第一步：页面的排版和布局
1.1实现开始游戏的界面
1.1.1开始游戏
1.1.2游戏说明
<!--游戏开始的界面--> <div> <div>开始</div> <div>说明</div> <div>打字游戏介绍：点击开始,进入游戏开始界面, 通过点击下落的字母可以获得得分和正确率 <span>关闭</span> </div> </div>
1.2进入游戏的界面
1.2.1开始按钮-->游戏的暂停
1.2.2结束游戏-->清除掉所有字母元素的定时器,删除字母元素
1.2.3退出游戏-->退出到游戏开始的界面
1.2.4设置-->设置当前游戏的难度
1.2.5打字得分-->每打对一字，得一分
1.2.6打字正确率
operate.onclick = function (evt) { var e = evt || window.event; var target = e.srcElement || e.target; // target:当前事件的目标dom节点 // if(target.className == "t"){ // gameStart.style.display = "block"; // game.style.display = "none"; // } if(target.className =="set"){ sel.style.display = "block"; } // 进入游戏界面之后的开始游戏 // 目标元素的className ＝＝ if(target.className =="s"){ target.innerHTML = target.innerHTML == "开始"?"暂停":"开始"; if(target.innerHTML == "开始"){ operate.lastElementChild.style.cursor = "pointer"; clearInterval(c); c = undefined; clearAllLetters(); }else{ //游戏的开始 operate.lastElementChild.style.cursor = "not-allowed"; //控制单位时间内字母的多少的定时器 c = setInterval(function () { createLetter(); letterEles = document.getElementsByClassName("active"); },level*1000);//控制显示页面字母的多少 //暂停之后的开始游戏 gameStar(); } } // 处理结束游戏 if(target.className == "f"){ finished(); } // 处理退出游戏 if(target.className == "t"){ // 首先处理结束游戏要做的事情 finished(); // 显示游戏开始界面，隐藏进入游戏界面 game.style.display = "none"; gameStart.style.display = "block"; } }
在对四个span即开始,设置,结束,退出加事件时用到了事件委托,事件委托有哪些好处呢?
事件委托一般用在对很多dom添加事件处理的情况中,比如:有100个li,每个li都有相同的onclick事件,我们一般会用for循环来遍历所有的li,然后给它们添加事件.但这种方法要不断与dom节点进行交互,访问dom的次数越多,浏览器重绘和重排的次数也越多,就会延长整个页面的交互就绪时间,事件委托的原理就是事件冒泡原理,即从最深的节点开始,一步一步向上传播事件,比如,有一个dom树,div>ul>li,要给li添加点击事件,那么这个点击事件会一层一层往外执行,执行到div上.使用事件委托的话,就可以对它的父级元素进行操作,与dom的操作只需交互一次,大大提高了性能,举个例子吧:
<ul> <li>qwe</li> <li>q2w</li> <li>wee</li> <li>eer</li> <li>ewe</li> </ul>
window.onload() = function () { var ul = document.getElementById("cn"); var li = ul.getElementsByTagName('li'); for(int i = 0;i < li.length;i++){ alert(1212); } }
首先找到ul,然后遍历li,点击li的时候,又要找到目标li的位置,才能执行最后的操作,每次点击都要找一次li.性能很低.
采用事件委托优化的代码:
window.onload() = function () { var ul = document.getElementById("cn"); ul.onclick = function () { alert('1220'); } }
此上代码在点击ul时也会触发onclick事件,所以不是最终优化的代码.
最终优化的代码:
window.onload() = function () { var ul = document.getElementById("cn"); ul.onclick = function (evt) { var e = evt || window.event; var target = e.target || e.srcElement; if(target.nodeName == 'li'){ alert('1220'); } } }
event对象提供了一个target属性,返回的是当前事件的目标元素节点,这样的话点击ul就不会触发onclick事件了.
第二步：实现开始游戏
2.1说明提示
2.2进入游戏界面
2.3游戏退出
2.4设置;>显示选择游戏难度
第三步：进入游戏界面之后的开始游戏
3.1点击进入游戏,实现字母的掉落
3.2游戏开始之后,实现游戏的暂停
第四步：实现游戏的暂停
4.1清除定时器，清除单位时间内掉落多少个字母的定时器
4.2清除字母掉落速度的定时器,每个字母元素都存在定时器
4.3结束游戏,清除4.1的定时器和删除4.2所有字母所在的元素
4.4退出游戏,结束游戏,显示游戏开始界面,影藏进入游戏界面
第五步：实现游戏难度的设置
5.1游戏的默认难度是慢
5.2游戏在进行过程中是不允许设置游戏难度的
5.3在游戏暂停和开始之前是允许设置游戏难度的
5.4游戏难度设置之后，在关闭游戏难度设置之后生效
第六步：实现键盘打字，字母消失
6.1全局变量：把当前游戏界面里所有字符存放在该变量里
6.2根据键盘输入的字符，在全局变量字符串里找到该字符的位置
6.3删除该字符所在的元素