js打地鼠

js經典專案打地鼠如何利用js來實作打地鼠呢？

首先是游戲頁面的制作

  <!-- 游戲背板 -->
    <div class=" backdrop">
        <!-- 游戲積分器 -->
        <div class="score">0</div>
        <!-- 游戲計時器 -->
        <div class="timebar"></div>
        <!-- 狼 -->
        <div class="wolves"></div>
        <!-- 開始游戲 -->
        <div class="menu1">
            <div class="start">開始游戲</div>
            <div class="intro">游戲說明</div>
        </div>
        <!-- 游戲說明介紹 -->
        <div class="introGame">
            <p>游戲說明</p>
            <p>
                在30秒內, 盡可能多的去打灰太狼, 每打1只灰太狼加10分, 每打1只小灰灰減10分, 請在30秒內盡可能的多得分
            </p>
        </div>
        <!-- 游戲結束 -->
        <div class="menu2">
            <div class="gameOver">游戲結束</div>
            <div class="newStart">重新開始</div>
        </div>
    </div>

下一步寫css加點樣式讓頁面變的更好看

<style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 背景 */
        .backdrop {
            width: 320px;
            height: 480px;
            background: url("image/game_bg.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            margin: 50px auto;
            position: relative;
        }

        .score {
            width: 100px;
            line-height: 20px;
            font-size: 15px;
            color: white;
            font-weight: bolder;
            background: red;
            position: absolute;
            top: 15px;
            left: 58px;
        }

        /* 計時器 */
        .timebar {
            width: 180px;
            height: 16px;
            background: url("image/progress.png");
            position: absolute;
            top: 66px;
            left: 63px;
        }

        /* 設定狼 */
        .wolvesDiv {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* 開始游戲 */
        .menu1,
        .menu2 {
            width: 100%;
            height: 200px;
            position: absolute;
            left: 0;
            top: 190px;
        }

        .menu1 div,
        .menu2 div {
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            color: orange;
        }

        .menu2 {
            display: none;
        }

        /* 游戲說明 */
        .introGame {
            width: 300px;
            height: 200px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            line-height: 40px;
            position: absolute;
            left: 10px;
            top: 140px;
            display: none;
        }

        .introGame p:nth-child(2) {
            text-indent: 32px;
        }
    </style>

然后重頭戲來了

整體思路

先要寫入的標簽

再建立每個坑的位置的二維陣列

在一個函式里面寫狼的所有要干的事情

在另外一個函式寫狼消失的函式

然后創建多個狼函式

定義當狼點擊后判斷狼的型別分數的操作

<script type="text/javascript">
    var score = document.querySelector('.score');
    var timebar = document.querySelector('.timebar');
    var wolves = document.querySelector('.wolves');
    var menu1 = document.querySelector('.menu1');
    var start = document.querySelector('.start');
    var intro = document.querySelector('.intro');
    var introGame = document.querySelector('.introGame');
    var menu2 = document.querySelector('.menu2');
    var gameOver = document.querySelector('.gameOver');
    var newStart = document.querySelector('.newStart');
    var posArr = [
        ['98px', '115px'],
        ['17px', '160px'],
        ['15px', '220px'],
        ['30px', '293px'],
        ['122px', '273px'],
        ['207px', '295px'],
        ['200px', '211px'],
        ['187px', '141px'],
        ['100px', '185px']];//二維陣列[[left,top],[left,top]...]
    var carateTimer;//創建多個狼的計時器；
    var score = 0;//記錄分數；

    // 游戲說明
    intro.onclick = function () {
        introGame.style.display = 'block';
    }
    introGame.onclick = function () {
        this.style.display = 'none';
    }

    //游戲開始
    start.onclick = function () {
        menu1.style.display = 'none';
        //倒計時開始；
        changeTiming();
        //創建狼
        creatMoreWolvev()
    }

    function changeTiming() {
        var timer = setInterval(function () {
            var timeWidth = timebar.offsetWidth;
            //當timeDiv的寬度小于0時需要停止計時器；
            if (timeWidth > 0) {
                timebar.style.width = timeWidth - 1 + 'px';
            } else {
                clearInterval(timer);
                // 游戲結束
                gameOverFn();
            }
        }, 100);
    }

    //游戲結束函式
    function gameOverFn() {
        //停止狼的計時器
        clearInterval(carateTimer);
        //清除頁面所有的計時器；
        var timer = setInterval(function () { }, 1000);
        for (i = 0; i < timer; i++) {
            clearInterval(i)
        }
        //顯示游戲界面；
        menu2.style.display = 'block';
    }

    //先創建一個狼；
    function createWolf() {
        var wolf = new Image();
        wolf.type = randomFn(1, 100) > 80 ? 'x' : 'h';
        wolf.index = 0;//狼顯示圖片的下標；
        wolf.src = 'image/' + wolf.type + wolf.index + '.png';
        wolf.clickAble = true;//狼能否被點擊，默認是true；
        wolf.style.position = 'absolute';
        //隨機狼的位置的下標；
        var posInd;
        var isHave = true;
        //選擇沒有狼的位置
        while (isHave) {
            posInd = randomFn(0, 8);
            var wolvesArr = wolves.children;
            for (var i = 0; i < wolvesArr.length; i++) {
                if (wolvesArr[i].style.left == posArr[posInd][0]) {
                    //表示該位置沒有狼，需要重新隨機
                    break;
                }
            }

            if (i == wolvesArr.length) {
                //表示該位置上沒有狼，則結束while回圈
                isHave = false;
            }
        }
        wolf.style.left = posArr[posInd][0];
        wolf.style.top = posArr[posInd][1];
        wolves.appendChild(wolf);
        return wolf;
    }
    function randomFn(n1, n2) {
        return Math.round(Math.random() * (n2 - n1) + n1);
    }

    //狼顯示和消失的影片；
    function wolfAnimateFn() {
        var wolf = createWolf();
        //狼顯示的影片；
        wolf.appearTimer = setInterval(function () {
            if (wolf.index < 5) {
                wolf.index++;
                wolf.src = 'image/' + wolf.type + wolf.index + '.png';
            } else {
                //停止狼顯示的影片,創建狼消失的影片；
                clearInterval(wolf.appearTimer);
                wolf.disappearTimer = setInterval(function () {
                    if (wolf.index > 0) {
                        wolf.index--;
                        wolf.src = 'image/' + wolf.type + wolf.index + '.png';
                    } else {
                        wolf.remove();
                        //停止狼消失影片的計時器；
                        clearInterval(wolf.disappearTimer);
                    }
                }, 150);
            }
        }, 150);
        // 執行狼被打的函式
        clickWolf(wolf);
    }

    //創建多頭狼
    function creatMoreWolvev() {
        carateTimer = setInterval(wolfAnimateFn, 1000);
    }
    // 狼被點擊的函式
    function clickWolf(wf) {
        wf.onclick = function () {
            if (wf.clickAble) {
                // 停止狼出現和消失的計時器
                clearInterval(wf.appearTimer);
                clearInterval(wf.disappearTimer);
                // 創建狼被打的影片
                wf.index = 6;
                wf.src = 'image/' + wf.type + wf.index + '.png';
                wf.clickTimer = setInterval(function () {
                    if (wf.index < 9) {
                        wf.index++;
                        wf.src = 'image/' + wf.type + wf.index + '.png';
                    } else {
                        clearInterval(wf.clickTimer);
                        wf.remove();
                    }
                }, 200);
                // 狼被點擊后，判斷點擊狼的型別
                if (wf.type == 'h') {
                    score += 10;
                } else {
                    score -= 10;
                }
                score.innerText = score;
            }
            wf.clickAble = false;//禁止狼再次被打
        }

    }
    //定義游戲結束函式

    //重新開始
    newStart.onclick = function () {
        // 強制重繪當前頁面
        history.go(0);
    }

</script>