热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

JS实现打字游戏

这篇文章主要为大家详细介绍了JS实现打字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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.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的操作只需交互一次,大大提高了性能,举个例子吧:

  • qwe
  • q2w
  • wee
  • eer
  • ewe
window.onload() = function () {
 var ul = document.getElementById("cn");
 var li = ul.getElementsByTagName('li');
 for(int i = 0;i 

首先找到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里的目标元素节点删掉,即用空格代替.每打对一字得一分,分数/键盘按下次数即为正确率.

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


推荐阅读
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 本文详细分析了JSP(JavaServer Pages)技术的主要优点和缺点,帮助开发者更好地理解其适用场景及潜在挑战。JSP作为一种服务器端技术,广泛应用于Web开发中。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文探讨了如何像程序员一样思考,强调了将复杂问题分解为更小模块的重要性,并讨论了如何通过妥善管理和复用已有代码来提高编程效率。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • python的交互模式怎么输出名文汉字[python常见问题]
    在命令行模式下敲命令python,就看到类似如下的一堆文本输出,然后就进入到Python交互模式,它的提示符是>>>,此时我们可以使用print() ... [详细]
  • 火星商店问题:线段树分治与持久化Trie树的应用
    本题涉及编号为1至n的火星商店,每个商店有一个永久商品价值v。操作包括每天在指定商店增加一个新商品,以及查询某段时间内某些商店中所有商品(含永久商品)与给定密码值的最大异或结果。通过线段树分治和持久化Trie树来高效解决此问题。 ... [详细]
  • Java 中的 BigDecimal pow()方法,示例 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文总结了汇编语言中第五至第八章的关键知识点,涵盖间接寻址、指令格式、安全编程空间、逻辑运算指令及数据重复定义等内容。通过详细解析这些内容,帮助读者更好地理解和应用汇编语言的高级特性。 ... [详细]
  • 探讨如何高效使用FastJSON进行JSON数据解析,特别是从复杂嵌套结构中提取特定字段值的方法。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
author-avatar
红太郎的等待_921
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有