JS实现打字游戏

2023-08-04 11:09:06 78

本文实例为大家分享了JS实现打字游戏的具体代码，供大家参考，具体内容如下

第一步：页面的排版和布局

1.1实现开始游戏的界面

1.1.1开始游戏

1.1.2游戏说明



开始

说明

打字游戏介绍：点击开始,进入游戏开始界面, 通过点击下落的字母可以获得得分和正确率关闭

operate.onclick=function(evt){ vare=evt||window.event; vartarget=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"; } }

window.onload()=function(){ varul=document.getElementById("cn"); varli=ul.getElementsByTagName('li'); for(inti=0;i

首先找到ul,然后遍历li,点击li的时候,又要找到目标li的位置,才能执行最后的操作,每次点击都要找一次li.性能很低.

采用事件委托优化的代码:

window.onload()=function(){
varul=document.getElementById("cn");
ul.onclick=function(){
alert('1220');
}
}

此上代码在点击ul时也会触发onclick事件,所以不是最终优化的代码.

最终优化的代码:

window.onload()=function(){
varul=document.getElementById("cn");
ul.onclick=function(evt){
vare=evt||window.event;
vartarget=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){
vare=evt||window.event;
varcodeVal=e.keyCode;
//e.keyCode获得键盘码
if(codeVal>=65&&codeVal<=90){
count++;
}
//根据Unicode编码找到对应字符
varchar=keyVal[codeVal];
if(char){
varindex=letters.search(eval("/"+char+"/gi"));
//varindex=letters.search(char);
if(index!=-1){
game.removeChild(letterEles[index]);
varexp=eval("/"+char+"/gi");
letters=letters.replace(exp,"");
//letters=letters.replace(char,"");
tit.children[0].firstElementChild.innerHTML=++score;
tit.children[1].firstElementChild.innerHTML=(score/count*100).toFixed(2)+"%";
}
}
}

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JS实现打字游戏

热门推荐

随机推荐