欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

js如何實現(xiàn)打字動畫游戲

小編給大家分享一下js如何實現(xiàn)打字動畫游戲，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

目前成都創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、焉耆網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

示例代碼如下：

<!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 ;//時間的計數(shù)
   var num = 0 ;//成績的計數(shù)
   var gameover = false ;
   var timeandtime = null;
   var letters = null ;
   //字母放在一個字符串里面，隨機選取
   var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
   //點擊開始按鈕，字母會自動生成，從頂部，以隨機速度落下
   //用戶操作：按鈕對應(yīng)字母的按鈕，然后字母就會消失
   //用戶沒有點擊到的按鈕到達(dá)底部以后會回到頂上重新落下；
   //用戶清除所有字母后，彈出對話框，顯示分?jǐn)?shù)和文字。
   //封裝一個對象，里面包含獲取事件對象，頁面位置，清除冒泡，獲取事件目標(biāo)的兼容性方法
   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全部放入一個偽數(shù)組中，第一個除外，屬于game，因此遍歷從1開始
    //在鍵盤上，按下對應(yīng)的字母鍵，字母會立即消失，同時分?jǐn)?shù)會增加，并且在上面重新生成；
    document.onkeydown = function (event) {
     var evt = eventUtil.getEvent(event);
     var keychar = String.fromCharCode(evt.keyCode);//將按下的字母鍵盤碼轉(zhuǎn)換成直接的大寫字母
     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){//當(dāng)偽數(shù)組的長度只有一個時，那么游戲就結(jié)束
      gameover = true ;
      clearInterval(timeandtime);
      alert("用時"+timenum+"秒，再接再厲！突破10秒！");
     } else {
      time.innerHTML = timenum;
     }
    },1000)
   }
   //封裝函數(shù)
   function letter(){
    this.x=Math.random()*900+100; //設(shè)置位置在100-1000之間
    this.y=0;
    this.speedY = Math.random()*4+1; //速度隨機設(shè)置在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>

以上是“js如何實現(xiàn)打字動畫游戲”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：js如何實現(xiàn)打字動畫游戲
鏈接URL：http://chinadenli.net/article24/ppdjje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、做網(wǎng)站、網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、網(wǎng)站設(shè)計、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)