生成字母:
Ø 可以用label ,span等标签将字母包里面,因为这些标签的范围正好是标签内的文本的大小,而,div或者p标签则会使整行的区域都包括,需要设置样式,所以在这选择的是label。var label = document.createElement("label"); 在设置label的style的top ,left,以及innerHTML,并将创建的label放入到body内。document.body.appendChild(label)。
Ø 可以在页面上显示后,开始用Math的随机函数,可以点击的时候产生一个随机的字母。Math.random()返回的是0-1的随机数,所以后面一般都要乘以所需要的长度。所以将1中点击时出现的字母用一个随机数生成,String.charAt(index)得到指定index的值,index可以用随机数得到,注意,用随机数返回的是小数,需要转成整数。
Ø 可以随机生成字母后,将label的left也随机在X方向上出现,求出浏览器的宽度,Math.max(document.documentElement.clientWidth,document.documentElement.offsetWidth,document.documentElement.scrollWidth),这样解决这几个参数的混淆以及浏览器的兼容问题。
Ø 这时候可以开启一个定时器,在这用的是setInterval。
改变label的Y坐标:
Ø 为了避免每一个字母开启一个定时器,所以所有的字母同时开启一个定时器,所以在生成字母的时候需要用一个数组对象将所有的label保存起来,方法是array.push(label),在这用到label,所以在产生函数中一定要返回。定时改变label的type的top的值,获得浏览器的高度和宽度的方法一样,需要判断的是,当字母落下大于浏览器高度时,一定要把字母移除,因为字母都保存在数组中,可以用遍历的方式判断,并且,将数组中的label删除。
Ø 在这需要注意的一个问题是,label.style.top返回的是一个String类型,为top加坐标的时候必须要先转换才加,否则得不到修改的top。
添加键盘事件:
Ø 因为监听的是整个浏览器额可见部分,所以监听的目标元素为document.documentElement。事件名称用onkeydown,事件处理函数要传递一个事件源event参数,可以方便获取到keyCode,最后可以用遍历的方式对数组内的字母和keyCode对比,相等就删除即可!!
//a String to preserve the 26 words
var words = "QWERTYUIOPLKJHGFDSAZXCVBNM";
//a Array to preserve all the label
var labelArray = new Array();
//Create a word
function createWord(){
var label = document.createElement("label");
var word = words.charAt(createRandom(words.length));
label.style.position = "absolute";
label.style.top = "40px";
document.body.appendChild(label);
label.innerHTML = word;
var width = Math.max(document.documentElement.clientWidth,document.documentElement.offsetWidth,document.documentElement.scrollWidth)-40;
label.style.left = createRandom(width)+"px"; //must remenber attach the "px";
return label;
};
//a utility function to create random number
function createRandom(maxNumber){
return parseInt(Math.random()*maxNumber);
};
//Create the timer to auto generate these words
function autoGenerate(){
setInterval(function(){
var label = createWord();
labelArray.push(label);
}, 300);
setInterval(function(){
for ( var i = 0; i < labelArray.length; i++) {
var label = labelArray[i];
var height = Math.max(document.documentElement.clientHeight,document.documentElement.offsetHeight,document.documentElement.scrollHeight)-30;
var top = label.style.top;
var currentTop = parseInt(top)+30; //this is a string ,so must change its type;
//delete label
if(currentTop >= height){
if(label.parentNode){
label.parentNode.removeChild(label);
labelArray.splice(i, 1);
score.innerHTML = parseInt(score.innerHTML)-1;
}
}
label.style.top = currentTop+"px";
}
}, 1000);
//handle the keyboard event
document.documentElement.onkeydown = function(event){
var score = document.getElementById("score");
var code =String.fromCharCode(event.keyCode);
for ( var i = 0; i < labelArray.length; i++) {
if(code == labelArray[i].innerHTML)
{
if(labelArray[i].parentNode){
labelArray[i].parentNode.removeChild(labelArray[i]);
labelArray.splice(i, 1);
score.innerHTML = parseInt(score.innerHTML)+1;
}
break;
}
}
}
};
//handle the global object
window.onload=function(){
var start = document.getElementById("start");
start.onclick = function(){
autoGenerate();
};
};
HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>type.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="type.js"></script>
</head>
<body>
分数:<span id="score">100</span>
<input type="button" id="start" value="开始游戏" >
</body>
</html>