最近在学ExtJs，看了蔡世友老师的视频课程，在第十课中留了一个小作业，就是用javascript写一个打字小游戏，于是按照前几课所讲的知识自己编写了一个。
一、需求：网页上在随机位置会出现字母，字母会不停的掉落，键盘输入字母，如果输入的字母屏幕上有，就将字母消除，否则字母落到底部自动销毁。
二、我的思路：首先先创建一个生成字母的函数，通过setInterval函数来使它周期性的运行。然后创建一个改变所有包含字母DIV的style的top属性的函数，当top属性达到某个值的时候，销毁当前DIV。也通过setInterval函数使它周期性的运行。通过以上步骤可以实现字母的产生和消失。最后编写一个监听键盘事件的函数，输入值时，将输入的值和屏幕上的DIV中的值比较，如果有，则消除当前DIV，返回。
二、编写步骤：
1、先编写一个能动态生成包含字母的DIV的函数
function create() {//随机生成字符编码var number = Math.floor(Math.random() * 26 + 65);//随机生成字母出现在屏幕上的位置var px = Math.random() * screen.availWidth + "px";//将字符编码转换为字母var letter = String.fromCharCode(number);//生成divvar oDiv = document.createElement("div");oDiv.setAttribute("name", "letter");//生成一个总数加一，为了记录一共输出了多少字母total++;//设置div的属性oDiv.setAttribute("style","position:absolute; width:10px; height:10px; left:20px; top:40px");oDiv.style.left = px.toString();var oText = document.createTextNode(letter);oDiv.appendChild(oText);var root = document.documentElement;var oBody = root.lastChild;oBody.appendChild(oDiv);}
2、编写改变div属性的函数
function changeStyle() {//获得所有包含字母的DIVvar oLetters = document.getElementsByName("letter");//改变记录行的内容var total=document.getElementById("total");total.innerHTML="共出现"+(window.total-1)+"个字母，您一共打了"+test+"个字母，打对"+score+"个，打错"+error+"个，遗漏"+miss+"个";//判断DIV是否超出边界，如果超出，删除DIV，如果没超出，继续向下走for(var i=0;i<oLetters.length;i++){;var oldTop=parseInt(oLetters[i].style.top);if(oldTop>=screen.availHeight-240){document.body.removeChild(oLetters[i]);window.miss+=1;}else{var newTop = 40+oldTop+"px";oLetters[i].style.top=newTop;}}}
3、编写键盘事件相应函数
function input(event){window.totalInput+=1;//获得键盘输入的字母var key =String.fromCharCode(event.keyCode);//比较输入也屏幕上的字母是否有相同的，如果有删除该DIV，如果没有错误+1var oLetters = document.getElementsByName("letter");for(var i=0;i<oLetters.length;i++){if(oLetters[i].textContent == key){document.body.removeChild(oLetters[i]);window.score+=1;return 1;}}window.error+=1;}
4、设置周期性执行前两个函数
function start(){window.addEventListener("keydown",input);createTimer=setInterval(create,500);changeTimer=setInterval(changeStyle,500);}
5、编写停止运行的函数
function stop(){clearInterval(createTimer);clearInterval(changeTimer);}
6、html界面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script src="game.js"></script></head><body><div id="total">共出现0个字母，您打对了0个，正确率是0%</div><div οnclick="start();">开始游戏</div><div οnclick="stop();">停止游戏</div></body></html>
注意：编写的不够规范，而且并没有编写在IE上运行的判断。
