原生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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
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
php实现购物车功能(下)
2016/01/05 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
js实现分页功能
2017/05/24 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
《郑和远航》教学反思
2014/04/16 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
电子商务专业求职信
2014/07/10 职场文书
人事专员岗位说明书
2014/07/29 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
英文升职感谢信
2015/01/23 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python