生成字母：
Ø 可以用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>