原生js實現曾經很火的一款小遊戲---別踩白塊---

原生js實現曾經很火的一款小遊戲—別踩白塊—

第一次寫博客 , 想把很久之前寫的一款簡單的小遊戲的分享出來 , 大佬們勿噴 — 在 csdn 上學到很多 , 感謝這個平臺 !

• html

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

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

• js

<script>
       // 先找到主體內容的盒子,添加到這個盒子中去
       var zhuti = document.getElementsByClassName('zhuti')[0];
       //找到計分 , 每點擊一次, 就讓分數++;
       var jifen = document.getElementsByClassName('jifen')[0];
       // 找到遊戲開始按鈕, 點擊讓它影藏,結束時顯示並把裏面的文字改變爲'遊戲結束'
       var start = document.getElementsByClassName('start')[0];
       // 找到遮罩層, 結束遊戲的時候顯示
       var zhezhaoceng = document.getElementsByClassName('zhezhaoceng')[0];

       // addbox('row')
       //動態創建盒子的函數
       function addbox(classname) {

           // 思路: 
           // 1: 先封裝一個函數動態的創建盒子;
           // 2: 一個盒子裏裝了四個小盒子;
           // 3: 隨機一個數,讓這四個小盒子的某一個的顏色改爲黑色 ;
           // 4: 給這個小盒子添加類名,設置樣式;
           // 5: 隨機數作爲下標, 給這個隨機數的下標的小盒子添加一個類名;
           // 6: 添加到'zhuti'裏面去,顯示在頁面上(如果zhuti裏面有內容了,就要添加到所有內容的最前面,如果沒有,接直接添加)


           // 生成隨機數作爲四個盒子的下標
           var index = Math.floor(Math.random() * 4)
           // console.log(index);
           //創建一個盒子; 
           var bigdiv = document.createElement('div');
           bigdiv.className = classname;
           // 再依次創建四個小盒子;添加到剛剛創建的大盒子中;
           for (var i = 0; i < 4; i++) {
               var smallbox = document.createElement('div')
               bigdiv.appendChild(smallbox)
           }
           // 判斷主體裏面有沒有盒子 ; 
           // 如果已經存在盒子,就要添加到它們的最前面
           // 如果沒有,就可以直接添加到頁面上
           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';
       }



       //計分與控制速度的函數
       function move(obj) {

           // 封裝一個計時器移動的方法, 讓主體內的內容動起來;
           // 思路: 
           //      1: 先獲取元素的最終樣式,距離頂部的top值;
           //      2: 聲明兩個變量; 一個用來改變元素距離頂部的top值; 一個用來計分數;  

           var num = 0;
           var sudu = 5;
           // 創建一個計時器讓它緩動顯示到頁面
           //在樣式裏面就設置了top值爲-150px；
           //通過計時器讓它的top值緩動到頁面， 當它的top值等於0的時候，又讓它的top值變爲-150px；
           //就調用創建元素的方法再創建一個盒子，讓它插在這個顯示在頁面上的盒子的前面
           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'
               }
               // 判斷條件：在移動的時候，如果用戶沒有點擊到帶有顏色的盒子，讓盒子超過了界限；就結束遊戲；
               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 = '小朋友, 遊戲結束';
                           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)

                       }
                   }
                   // 讓主體的內容的長度永遠等於6,如果不等於6,就會出現按下第一個帶'random_box'類名的小盒子,之後就不會再回到以上的判斷裏面了;
                   obj.removeChild(obj.children[obj.children.length - 1])
               }
               // console.log(obj.children.length);

               // 判斷用戶點擊的時候:條件:如果沒有點中指定的盒子(類名爲'random_box')的盒子,就結束遊戲;不然就計分num++;
               obj.onmousedown = function (event) {
                   // 根據事件對象裏面的事件源來進行判斷;
                   //當它的事件源的名字等於'random_box'的時候;
                   if (event.target.className == 'random_box') {
                       // 讓這個事件源的的背景色變爲紅色;
                       event.target.style.backgroundColor = 'red';
                       //當用戶點擊了事件源時,把他的類名清空, 不然只變了顏色,到了第6個,判斷類名還是'random_box'時, 就會結束遊戲;
                       event.target.className = '';
                       // 計分
                       num++;
                       // 顯示在當前得分的盒子裏
                       jifen.innerHTML = '當前得分' + num;
                   } else {
                       // 結束遊戲
                       clearInterval(obj.timeID)
                       start.style.display = 'block';
                       start.style.backgroundColor = 'green';
                       start.style.height = 60 + 'px';
                       start.style.fontSize = 30 + 'px';
                       start.innerHTML = '遊戲結束!再來一局';
                       jifen.innerHTML = '最終得分' + num;
                       // 讓遮罩層顯示
                       zhezhaoceng.style.display = 'block';
                   }
                   // 加速(判斷分數到了多少時,讓主體下降的top值變大)
                   if (num % 5 == 0) {
                       sudu++;
                   }
               }

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

• css

<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>