我们以前刚接触电脑的菜鸟时期应该都有玩过一些打字游戏，一些字母往下掉然后我们按下相应字母键然后这个字母消失；首先我们来分析下这个游戏内在原理和具体步骤：
内在原理分析：首先我们得随机生成大写字母并且得让它一直生成，其次我们得让它掉落，掉落的速度是随机的，并且我们不能让它一直无限制掉，得有退出时间，再次我们要建立交互，当玩游戏的人输入相应的字符，这时产生键盘事件，输入的字符和页面上产生的字符相同时我们得让页面上的字符消失，分析完我们开干：
第一步：封装随机函数。首先我们来封装一个产生n-m之间随机整数的函数，在下面的步骤中我们将多次调用：
function numRandom(n,m){
return parseInt(n+Math.random()*(m-n+1));
}
第二步：运动函数。解决字母随机掉落的问题，这里我们可以封装一个运动函数，在定时器随机生成字符后，对每一个字符对象直接调用这个函数就可以了：
//在运动的过程中我们不能让这个字符一直掉落，否则产生的字符越来越多，开的定时器也越来越多，将占用更多的内存，极大的影响性能，所以我们要规定字符掉到一定的高度我们要将这个字符销毁，并且关闭它身上的定时器。
function move(obj){
//随机速度
var speed = numRandom(2,5);
var timer = setInterval(function(){
//如果这个div的top大于500的时候就自己销毁掉
if(obj.offsetTop>=500){
obj.remove()
clearInterval(timer);
}else{
//如果没有到500的时候就去执行运动的代码
obj.style.top = obj.offsetTop+speed+"px";
}
},30)
}
第三步：定时器不断生成一个div， div里面的字符要是随机生成的，为了第一步我们要封装一个产生随机数的函数，另外因为我们做的是一个只产生大写字母的游戏，所以找到相对应的ACII码区间，我们要产生这个范围内的ACII码,并利用将ACII码转换成字符的方法转换成相应字符：
//不断的生成div
setInterval(function(){
//创建div
var div = document.createElement("div");
//随机生成一个大写字母的字符
var str = String.fromCharCode(numRandom(65,90))
//将随机的字符赋值给div
div.innerHTML = str;
//将div的left随机出现在页面的某个位置
div.style.left = numRandom(200,1000)+"px";
//插入到页面
document.body.appendChild(div);
//让div动起来 每一个div上面都添加了一个timer的定时器，所以当div销毁时timer也要被销毁
move(div);//这里我们需要调用第二步中封装的那个运动函数
},500)
第三步：键盘事件，当键盘输入某一个字符时获取这个字符的ACII码，然后将其转化为字符，再将其与页面上的所有div进行比较，当比较到第一个div时我们让这个div销毁，为了敲击键盘一次只删除一个对应的div我们此时用break退出当前循环不再执行下面的代码
document.onkeydown = function(e){
var e = e||event;
var code = e.keyCode || e.which;
//将用户按下的code转换成字符
var str = String.fromCharCode(code);
//获取页面上所有的div
var aDiv = document.getElementsByTagName("div");
//将字符和页面上所有的div里面的字符进行比较如果成功就删除掉自身
for(var i=0;i<aDiv.length;i++){
if(str == aDiv[i].innerHTML){
aDiv[i].remove();
break;
}
}
}