介绍 & lt; !——游戏开始的界面——比;
,& lt; div id=癵ameStart"比;
& lt;才能div id=笆痹诳? lt;/div>
& lt;才能div id=癲escribe"在说明& lt;/div>
& lt;才能div id=癲es"在打字游戏介绍:点击开始,进入游戏开始界面,
,,通过点击下落的字母可以获得得分和正确率
& lt;才能span id=癱l1"在关闭& lt;/span>
& lt;才能/div>
& lt;/div> operate.onclick =, function (evt), {
var 才能;e =, evt | |, window.event;
var 才能;target =, e.srcElement | |, e。target;//,才能目标:当前事件的目标dom节点//才能,如果(==target.className “t") {//,才能,gameStart.style.display =,“block";//,才能,game.style.display =,“none";//才能,}
如果才能(target.className ==皊et") {
,,sel.style.display =,“block";
,,}//,才能进入游戏界面之后的开始游戏//才能,目标元素的名称==如果才能(target.className ==皊") {
,,target.innerHTML =, target.innerHTML ==,“开始“?“暂停“:“开始“;
,,如果(target.innerHTML ==,“开始“){
,,,operate.lastElementChild.style.cursor =,“pointer";
,,,clearInterval (c);
,,,c =,定义;
,,,clearAllLetters ();
其他,,}{
,,,//游戏的开始
,,,operate.lastElementChild.style.cursor =,“not-allowed";
,,,//控制单位时间内字母的多少的定时器
,,c =, setInterval (function (), {
,,,createLetter ();
,,,letterEles =, document.getElementsByClassName (“active");
,,},等级* 1000);//控制显示页面字母的多少
,,,//暂停之后的开始游戏
,,,gameStar ();
,,}
,,}
,//处理结束游戏
如果才能(==target.className “f") {
,才能完成();
,,}
,//处理退出游戏
如果才能(==target.className “t") {
,//才能,首先处理结束游戏要做的事情
,才能完成();//,才能显示游戏开始界面,隐藏进入游戏界面
,,game.style.display =,“none";
,,gameStart.style.display =,“block";
,,}
以前,} & lt; ul id=癱n"比;
,& lt; li> qwe
,& lt; li> q2w
,& lt; li> wee
,& lt; li> eer
,& lt; li> ewe
& lt;/ul> window (),=, function (), {
,var ul =, . getelementbyid (“cn");
,var li =, ul.getElementsByTagName(& # 39;李# 39;);
,(int 小姐:=,0;小姐:& lt;, li.length;我+ +){
,警报(1212);
,}
} window (),=, function (), {
,var ul =, . getelementbyid (“cn");=,,ul.onclick function (), {,
,警报(& # 39;1220 & # 39;);
,}
}
这篇文章将为大家详细讲解有关如何使用JS实现打字游戏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体内容如下
<强>第一步:页面的排版和布局
1.1实现开始游戏的界面
1.1.1开始游戏
1.1.2游戏说明
1.2进入游戏的界面
1.2.1开始按钮,在游戏的暂停
1.2.2结束游戏,在清除掉所有字母元素的定时器,删除字母元素
1.2.3退出游戏——祝辞退出到游戏开始的界面
1.2.4设置,在设置当前游戏的难度
1.2.5打字得分——在每打对一字,得一分
打相对于1.2.6字正确率
在对四个跨越即开始,设置,结束,退出加事件时用到了事件委托,事件委托有哪些好处呢?
事件委托一般用在对很多dom添加事件处理的情况中,比如:有100个,每个李都有相同的onclick事件,我们一般会用的循环来遍历所有的,然后给它们添加事件。但这种方法要不断与dom节点进行交互,访问dom的次数越多,浏览器重绘和重排的次数也越多,就会延长整个页面的交互就绪时间,事件委托的原理就是事件冒泡原理,即从最深的节点开始,一步一步向上传播事件,比如,有一个dom树,div> ul>李要给李添加点击事件,那么这个点击事件会一层一层往外执行,执行到div上。使用事件委托的话,就可以对它的父级元素进行操作,与dom的操作只需交互一次,大大提高了性能,举个例子吧:
首先找到ul,然后遍历,点击李的时候,又要找到目标李的位置,才能执行最后的操作,每次点击都要找一次李。性能很低。
采用事件委托优化的代码:
