C语言学习网

如何使用JS实现打字游戏

发表于:2022-08-12 作者:安全数据网编辑
编辑最后更新 2022年08月12日,这篇文章将为大家详细讲解有关如何使用JS实现打字游戏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下第一步:页面的排版和布局1.1实现开始游戏的界面1.1

这篇文章将为大家详细讲解有关如何使用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打字正确率

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[xss_clean] = target[xss_clean] == "开始"?"暂停":"开始";   if(target[xss_clean] == "开始"){    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的操作只需交互一次,大大提高了性能,举个例子吧:

  • qwe
  • q2w
  • wee
  • eer
  • ewe
_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删除该字符所在的元素

//evt代表的是事件对象 _document.onkeyup = function (evt) {  var e = evt || window.event;  var codeVal = e.keyCode;  // e.keyCode获得键盘码  if(codeVal >= 65 && codeVal <= 90){   count++;  }  // 根据Unicode编码找到对应字符  var char = keyVal[codeVal];  if(char){   var index = letters.search(eval("/" + char + "/gi"));   // var index = letters.search(char);   if(index != -1) {   game.removeChild(letterEles[index]);   var exp = eval("/" + char + "/gi");   letters = letters.replace(exp, "");   // letters = letters.replace(char,"");   tit.children[0].firstElementChild[xss_clean] = ++score;   tit.children[1].firstElementChild[xss_clean] = (score/count*100).toFixed(2) + "%";  }  } }

以上实现键盘打字,字母消失的代码的主要过程是:

通过e.keyCode获得键盘码,通过键盘码找到对应字符,然后用正则表达式的eval方法对找到的字符进行计算,用search方法匹配到当前目标元素节点距离字符串开始位置的偏移位置.把它从父节点里删掉,还要将letters里的目标元素节点删掉,即用空格代替.每打对一字得一分,分数/键盘按下次数即为正确率.

关于"如何使用JS实现打字游戏"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

0