Home >Web Front-end >JS Tutorial >Native js implements typing animation game

Native js implements typing animation game

高洛峰Original: 2017-02-06 10:53:46945browse

This is a typing animation game written yesterday using native js. It mainly uses intermittent timers, objects, and Math methods. It feels okay. It mainly depends on the time it takes to eliminate letters, but there are also bugs, that is, the letters are all It is generated at one time, so at first, it looks like there will be an explosion. It would be great if we could generate a batch at once and then drop them in batches. Please help me change it. You can also refer to it.

<!DOCTYPE html>
<html>
<head>
 <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>

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website!

For more articles related to native js implementing typing animation games, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Pure js imitates windows system calendarNext article：Pure js imitates windows system calendar

See more

Native js implements typing animation game

Related articles