js實(shí)現(xiàn)一款簡(jiǎn)單踩白塊小游戲(曾經(jīng)很火)

 <div class="bigbox">
    <!-- 顯示游戲的區(qū)域 -->
    <div class="gamequyu">
      <!-- 上面顯示一個(gè)游戲開(kāi)始的按鈕 -->
      <div class="start">游戲開(kāi)始</div>
      <!-- 再顯示一個(gè)游戲的主體部分 -->
      <div class="zhuti"></div>
      <div class="zhezhaoceng"></div>

    </div>
    <!-- 下面再顯示一個(gè)計(jì)分的盒子 -->
    <div class="jifen">當(dāng)前分?jǐn)?shù):0</div>
  </div>

<script>
    // 先找到主體內(nèi)容的盒子,添加到這個(gè)盒子中去
    var zhuti = document.getElementsByClassName('zhuti')[0];
    //找到計(jì)分 , 每點(diǎn)擊一次, 就讓分?jǐn)?shù)++;
    var jifen = document.getElementsByClassName('jifen')[0];
    // 找到游戲開(kāi)始按鈕, 點(diǎn)擊讓它影藏,結(jié)束時(shí)顯示并把里面的文字改變?yōu)?游戲結(jié)束'
    var start = document.getElementsByClassName('start')[0];
    // 找到遮罩層, 結(jié)束游戲的時(shí)候顯示
    var zhezhaoceng = document.getElementsByClassName('zhezhaoceng')[0];
    // addbox('row')
    //動(dòng)態(tài)創(chuàng)建盒子的函數(shù)
    function addbox(classname) {
      // 思路: 
      // 1: 先封裝一個(gè)函數(shù)動(dòng)態(tài)的創(chuàng)建盒子;
      // 2: 一個(gè)盒子里裝了四個(gè)小盒子;
      // 3: 隨機(jī)一個(gè)數(shù),讓這四個(gè)小盒子的某一個(gè)的顏色改為黑色 ;
      // 4: 給這個(gè)小盒子添加類名,設(shè)置樣式;
      // 5: 隨機(jī)數(shù)作為下標(biāo), 給這個(gè)隨機(jī)數(shù)的下標(biāo)的小盒子添加一個(gè)類名;
      // 6: 添加到'zhuti'里面去,顯示在頁(yè)面上(如果zhuti里面有內(nèi)容了,就要添加到所有內(nèi)容的最前面,如果沒(méi)有,接直接添加)
      // 生成隨機(jī)數(shù)作為四個(gè)盒子的下標(biāo)
      var index = Math.floor(Math.random() * 4)
      // console.log(index);
      //創(chuàng)建一個(gè)盒子; 
      var bigdiv = document.createElement('div');
      bigdiv.className = classname;
      // 再依次創(chuàng)建四個(gè)小盒子;添加到剛剛創(chuàng)建的大盒子中;
      for (var i = 0; i < 4; i++) {
        var smallbox = document.createElement('div')
        bigdiv.appendChild(smallbox)
      }
      // 判斷主體里面有沒(méi)有盒子 ; 
      // 如果已經(jīng)存在盒子,就要添加到它們的最前面
      // 如果沒(méi)有,就可以直接添加到頁(yè)面上
      if (zhuti.children.length == 0) {
        zhuti.appendChild(bigdiv)
      } else {
        zhuti.insertBefore(bigdiv, zhuti.children[0])
      }
      // 給隨機(jī)下標(biāo)的盒子添加樣式的背景色為黑色;
      bigdiv.children[index].style.backgroundColor = 'black';
      // 再給這個(gè)隨機(jī)的盒子添加一點(diǎn)東西,可以用來(lái)做判斷
      bigdiv.children[index].className = 'random_box';
    }
    //計(jì)分與控制速度的函數(shù)
    function move(obj) {
      // 封裝一個(gè)計(jì)時(shí)器移動(dòng)的方法, 讓主體內(nèi)的內(nèi)容動(dòng)起來(lái);
      // 思路: 
      //   1: 先獲取元素的最終樣式,距離頂部的top值;
      //   2: 聲明兩個(gè)變量; 一個(gè)用來(lái)改變?cè)鼐嚯x頂部的top值; 一個(gè)用來(lái)計(jì)分?jǐn)?shù); 
      var num = 0;
      var sudu = 5;
      // 創(chuàng)建一個(gè)計(jì)時(shí)器讓它緩動(dòng)顯示到頁(yè)面
      //在樣式里面就設(shè)置了top值為-150px；
      //通過(guò)計(jì)時(shí)器讓它的top值緩動(dòng)到頁(yè)面， 當(dāng)它的top值等于0的時(shí)候，又讓它的top值變?yōu)?150px；
      //就調(diào)用創(chuàng)建元素的方法再創(chuàng)建一個(gè)盒子，讓它插在這個(gè)顯示在頁(yè)面上的盒子的前面
      obj.timeID = setInterval(function () {
        var nowtop = parseInt(getComputedStyle(obj)['top']) + sudu;
        // console.log(nowtop);
        obj.style.top = nowtop + 'px';
        if (parseInt(getComputedStyle(obj)['top']) >= 0) {
          addbox('row')
          obj.style.top = -150 + 'px'
        }
        // 判斷條件：在移動(dòng)的時(shí)候，如果用戶沒(méi)有點(diǎn)擊到帶有顏色的盒子，讓盒子超過(guò)了界限；就結(jié)束游戲；
        if (obj.children.length == 6) {
          for (var i = 0; i < 4; i++) {
            if (obj.children[obj.children.length - 1].children[i].className == 'random_box') {

              jifen.innerHTML = '當(dāng)前最高得分:' + num;
              start.style.display = 'block'
              start.innerHTML = '小朋友, 游戲結(jié)束';
              start.style.display = 'block';
              start.style.backgroundColor = 'green';
              start.style.height = 60 + 'px';
              start.style.fontSize = 30 + 'px';
              zhezhaoceng.style.display = 'block';
              clearInterval(obj.timeID)

            }
          }
          // 讓主體的內(nèi)容的長(zhǎng)度永遠(yuǎn)等于6,如果不等于6,就會(huì)出現(xiàn)按下第一個(gè)帶'random_box'類名的小盒子,之后就不會(huì)再回到以上的判斷里面了;
          obj.removeChild(obj.children[obj.children.length - 1])
        }
        // console.log(obj.children.length);

        // 判斷用戶點(diǎn)擊的時(shí)候:條件:如果沒(méi)有點(diǎn)中指定的盒子(類名為'random_box')的盒子,就結(jié)束游戲;不然就計(jì)分num++;
        obj.onmousedown = function (event) {
          // 根據(jù)事件對(duì)象里面的事件源來(lái)進(jìn)行判斷;
          //當(dāng)它的事件源的名字等于'random_box'的時(shí)候;
          if (event.target.className == 'random_box') {
            // 讓這個(gè)事件源的的背景色變?yōu)榧t色;
            event.target.style.backgroundColor = 'red';
            //當(dāng)用戶點(diǎn)擊了事件源時(shí),把他的類名清空, 不然只變了顏色,到了第6個(gè),判斷類名還是'random_box'時(shí), 就會(huì)結(jié)束游戲;
            event.target.className = '';
            // 計(jì)分
            num++;
            // 顯示在當(dāng)前得分的盒子里
            jifen.innerHTML = '當(dāng)前得分' + num;
          } else {
            // 結(jié)束游戲
            clearInterval(obj.timeID)
            start.style.display = 'block';
            start.style.backgroundColor = 'green';
            start.style.height = 60 + 'px';
            start.style.fontSize = 30 + 'px';
            start.innerHTML = '游戲結(jié)束!再來(lái)一局';
            jifen.innerHTML = '最終得分' + num;
            // 讓遮罩層顯示
            zhezhaoceng.style.display = 'block';
          }
          // 加速(判斷分?jǐn)?shù)到了多少時(shí),讓主體下降的top值變大)
          if (num % 5 == 0) {
            sudu++;
          }
        }

      }, 20)
    }
    // 當(dāng)它點(diǎn)擊開(kāi)始按鈕的時(shí)候,再調(diào)用函數(shù);運(yùn)行起來(lái);
    start.onclick = function () {
      //如果事重新來(lái)一局,那就先把頁(yè)面上已經(jīng)創(chuàng)建的盒子先清除;
      if (zhuti.children.length != 0) {
        zhuti.innerHTML = ''
      }
      // 讓遮罩層隱藏
      zhezhaoceng.style.display = 'none';
      // 讓開(kāi)始的按鈕影藏 
      this.style.display = 'none';
      jifen.innerHTML = '當(dāng)前得分:0'
      move(zhuti)
    }
  </script>

<style>
    .bigbox {
      width: 400px;
      height: auto;
      border: 1px solid #2d2d2d;
      margin: 100px auto 0 auto;
    }

    .gamequyu {
      width: 100%;
      height: 600px;
      position: relative;
      overflow: hidden;
      background-color: #fefefe;
      /* background: url("./dog.png") no-repeat; */
      background-size: 100%;
    }

    .start {
      position: absolute;
      width: 400px;
      height: 50px;
      color: white;
      text-align: center;
      line-height: 50px;
      background-color: brown;
      font-size: 30px;
      cursor: pointer;
      z-index: 9999;
    }

    .zhuti {
      width: 100%;
      height: 600px;
      position: absolute;
      top: -150px;
    }

    .jifen {
      width: 400px;
      height: 50px;
      font-size: 30px;
      text-align: center;
      line-height: 50px;
      color: white;
      margin: 0 auto;
      background-color: brown;
    }

    .row {
      width: 400px;
      height: 150px;

    }

    .row div {
      width: 100px;
      height: 150px;
      border: 1px solid #343434;
      border-top-width: 0;
      border-left-width: 0;
      float: left;
      cursor: pointer;
      box-sizing: border-box;
    }

    .zhezhaoceng {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 999;
      display: none;
    }
  </style>