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

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

1.1实现开始游戏的界面

1.1.1开始游戏

1.1.2游戏说明

<!--游戏开始的界面-->
 <div id="gameStart">
  <div id="start">开始</div>
  <div id="describe">说明</div>
  <div id="des">打字游戏介绍:点击开始,进入游戏开始界面,
  通过点击下落的字母可以获得得分和正确率
  <span id="cl1">关闭</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即开始,设置,结束,退出加事件时用到了事件委托,事件委托有哪些好处呢"htmlcode">

<ul id="cn">
 <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删除该字符所在的元素

//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.innerHTML = ++score;
   tit.children[1].firstElementChild.innerHTML = (score/count*100).toFixed(2) + "%";
  }
  }
 }

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

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

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

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?