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

    </div>
    <!-- 下面再顯示一個計分的盒子 -->
    <div class="jifen">當前分數(shù):0</div>
  </div>

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

        // 判斷用戶點擊的時候:條件:如果沒有點中指定的盒子(類名為'random_box')的盒子,就結(jié)束游戲;不然就計分num++;
        obj.onmousedown = function (event) {
          // 根據(jù)事件對象里面的事件源來進行判斷;
          //當它的事件源的名字等于'random_box'的時候;
          if (event.target.className == 'random_box') {
            // 讓這個事件源的的背景色變?yōu)榧t色;
            event.target.style.backgroundColor = 'red';
            //當用戶點擊了事件源時,把他的類名清空, 不然只變了顏色,到了第6個,判斷類名還是'random_box'時, 就會結(jié)束游戲;
            event.target.className = '';
            // 計分
            num++;
            // 顯示在當前得分的盒子里
            jifen.innerHTML = '當前得分' + 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é)束!再來一局';
            jifen.innerHTML = '最終得分' + num;
            // 讓遮罩層顯示
            zhezhaoceng.style.display = 'block';
          }
          // 加速(判斷分數(shù)到了多少時,讓主體下降的top值變大)
          if (num % 5 == 0) {
            sudu++;
          }
        }

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