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

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


推荐阅读
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
  • 本文详细介绍了如何使用ActionScript 3.0 (AS3) 连接并操作MySQL数据库。通过具体的代码示例和步骤说明,帮助开发者理解并实现这一过程。 ... [详细]
  • 在即将迎来26岁生日之际,作者的人生陷入了低谷。经过近三年的硕士学习后,最终决定退学,并且面临没有工作经验的困境。尽管如此,作者依然坚定地选择为自己的人生负责。 ... [详细]
  • 以下实例展示了locals( ... [详细]
  • 使用Python在SAE上开发新浪微博应用的初步探索
    最近重新审视了新浪云平台(SAE)提供的服务,发现其已支持Python开发。本文将详细介绍如何利用Django框架构建一个简单的新浪微博应用,并分享开发过程中的关键步骤。 ... [详细]
  • 本文详细介绍了美国最具影响力的十大财团,包括洛克菲勒、摩根、花旗银行等。这些财团在历史发展过程中逐渐形成,并对美国的经济、政治和社会产生深远影响。 ... [详细]
  • andr ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • 解决Element UI中Select组件创建条目为空时报错的问题
    本文介绍如何在Element UI的Select组件中使用allow-create属性创建新条目,并处理创建条目为空时出现的错误。我们将详细说明filterable属性的必要性,以及default-first-option属性的作用。 ... [详细]
  • 本文介绍如何通过HTML和CSS构建一个美观且功能齐全的水平导航栏,包括不同的布局方法及其效果。 ... [详细]
  • 图数据库中的知识表示与推理机制
    本文探讨了图数据库及其技术生态系统在知识表示和推理问题上的应用。通过理解图数据结构,尤其是属性图的特性,可以为复杂的数据关系提供高效且优雅的解决方案。我们将详细介绍属性图的基本概念、对象建模、概念建模以及自动推理的过程,并结合实际代码示例进行说明。 ... [详细]
  • PMP 项目沟通管理:关键步骤与技巧
    本文详细介绍了项目沟通管理的五个核心步骤,包括识别干系人、规划沟通管理、信息发布、管理干系人期望和绩效报告。同时探讨了沟通维度、沟通技巧、规划沟通管理的目的及影响沟通技术的因素,并深入解析了沟通模型的步骤和常见方法。 ... [详细]
  • 本文详细介绍了VMware的多种认证选项,帮助你根据职业需求和个人技能选择最合适的认证路径,涵盖从基础到高级的不同层次认证。 ... [详细]
  • VPX611是北京青翼科技推出的一款采用6U VPX架构的高性能数据存储板。该板卡搭载两片Xilinx Kintex-7系列FPGA作为主控单元,内置RAID控制器,支持多达8个mSATA盘,最大存储容量可达8TB,持续写入带宽高达3.2GB/s。 ... [详细]
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社区 版权所有