原生js实现打字动画游戏


Posted in Javascript onFebruary 04, 2017

这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  body,button{
   margin: 0;
   padding: 0;
  }
  body {
   background: #333;
  }
  #game {
   width: 400px;
   margin: 0 auto;
  }
  #start {
   width: 80px;
   height: 40px;
  }
  span {
   margin: 20px;
   color: white;
  }
  .letter {
   position: absolute;
   color: yellow;
   font: bold 30px "Arial";
  }
 </style>
 <script>
  window.onload= function () {
   var start = document.getElementById("start");
   var scroll = document.getElementById("scroll");
   var time = document.getElementById("time");
   var g = 1 ;//Gravity
   var timenum = 0 ;//时间的计数
   var num = 0 ;//成绩的计数
   var gameover = false ;
   var timeandtime = null;
   var letters = null ;
   //字母放在一个字符串里面,随机选取
   var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   //点击开始按钮,字母会自动生成,从顶部,以随机速度落下
   //用户操作:按钮对应字母的按钮,然后字母就会消失
   //用户没有点击到的按钮到达底部以后会回到顶上重新落下;
   //用户清除所有字母后,弹出对话框,显示分数和文字。
   //封装一个对象,里面包含获取事件对象,页面位置,清除冒泡,获取事件目标的兼容性方法
   var eventUtil = {
    getEvent: function (event) {
     return event || window.event;
    },
    getPageX: function (event) {
     return event.pageX || event.clientX + document.documentElement.scrollLeft;
    },
    getPageY: function (event) {
     return event.pageY || event.clientY + document.documentElement.scrollTop;
    },
    stopPropagation: function (event) {
     if (event.stopPropagation) {
      event.stopPropagation();
     } else {
      event.cancelBubble = true;
     }
    },
    getTarget: function (event) {
     return event.target || event.srcElement;
    }
   };
   start.onclick= function () {
    for(var i = 0 ;i<26;i++){
     new letter();
    }
    letters = document.body.children;//将页面中所有的div全部放入一个伪数组中,第一个除外,属于game,因此遍历从1开始
    //在键盘上,按下对应的字母键,字母会立即消失,同时分数会增加,并且在上面重新生成;
    document.onkeydown = function (event) {
     var evt = eventUtil.getEvent(event);
     var keychar = String.fromCharCode(evt.keyCode);//将按下的字母键盘码转换成直接的大写字母
     for(var i = 1 ;i<letters.length;i++){
      if(keychar===letters[i].innerHTML){
       num++;
       scroll.innerHTML = num;
       document.body.removeChild(letters[i]);
      }
     }
    }
    timeandtime=setInterval(function () {
     timenum = timenum + 1 ;
     console.log(letters);
     if(letters.length==1){//当伪数组的长度只有一个时,那么游戏就结束
      gameover = true ;
      clearInterval(timeandtime);
      alert("用时"+timenum+"秒,再接再厉!突破10秒!");
     } else {
      time.innerHTML = timenum;
     }
    },1000)
   }
   //封装函数
   function letter(){
    this.x=Math.random()*900+100; //设置位置在100-1000之间
    this.y=0;
    this.speedY = Math.random()*4+1; //速度随机设置在1-5之间
    this.value = str[parseInt(Math.random()*25)]; //在26个字母中随机生成一个字母
    var letDiv = document.createElement("div");
    letDiv.className = "letter";
    letDiv.style.top = this.y+"px";
    letDiv.style.left = this.x+ "px";
    letDiv.innerHTML = this.value;
    document.body.appendChild(letDiv);
    //字母往下掉
    var that = this ;
    this.timer=setInterval(function () {
     //leader = leader + step;
     that.y = that.y + that.speedY;
     if(that.y>=client().height-letDiv.offsetHeight){
      that.y = 0;
      that.x = Math.random()*900+100;
     }
     if(!gameover){
      letDiv.style.left = that.x + "px";
      letDiv.style.top = that.y + "px";
     } else {
      clearInterval(that.timer);
     }
    },15)
   }
   // 获取可视窗口的宽度和高度窗,兼容性问题
   function client() {
    return {
     width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
     height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    };
   }
  }
 </script>
</head>
<body>
<div id="game">
 <button id="start">开始</button>
 <span>得分:<i id="scroll">0</i></span>
 <span>计时:<i id="time">0</i></span>
</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
jquery提示效果实例分析
Nov 25 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
详解angular应用容器化部署
Aug 14 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
js实现自定义路由
Feb 04 #Javascript
jQuery窗口拖动功能的实现代码
Feb 04 #Javascript
简单易懂的天气插件(代码分享)
Feb 04 #Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 #Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 #Javascript
javascript实现复选框全选或反选
Feb 04 #Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 #Javascript
You might like
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
SONY ICF-F10中波修复记
2021/03/02 无线电
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
什么是JavaScript
2009/08/13 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
Python 使用with上下文实现计时功能
2018/03/09 Python
pandas 选择某几列的方法
2018/07/03 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Python中断多重循环的思路总结
2019/10/04 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
医院办公室主任职责
2013/12/29 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
青春励志演讲稿
2014/04/29 职场文书
期末考试复习计划
2015/01/19 职场文书
爱护环境建议书
2015/09/14 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
Python集合set()使用的方法详解
2022/03/18 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python