利用定时器和延时器来完成打地鼠游戏的案例利用定时器和延时器来完成打地鼠游戏的案例,利用定时器和延时器来完成打地鼠游戏的案

利用定时器和延时器来完成打地鼠游戏的案例

< !DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Whack A Mole !</title>
        <link href='reset.css' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Whack-a-mole ! <span class="score">0</span></h1>
        <p><button>Start</button></p>
        <div class="game">
            <div class="hole hole1">
                <div class="mole"></div>
            </div>
            <div class="hole hole2">
                <div class="mole"></div>
            </div>
            <div class="hole hole3">
                <div class="mole"></div>
            </div>
            <div class="hole hole4">
                <div class="mole"></div>
            </div>
            <div class="hole hole5">
                <div class="mole"></div>
            </div>
            <div class="hole hole6">
                <div class="mole"></div>
            </div>
        </div>

        <h2 class="game-status"></h2>
    </body>
    <script>
        //获取元素
        let score = document.querySelector('.score')
        let start = document.querySelector('button')
        let moles = document.querySelectorAll('.mole')
        let gameStatus = document.querySelector('.game-status')

        start.addEventListener('click', function () {
            let temp = null
            let flag = true //单击地鼠否响应处理,true为响应相处
            //开启定时器让随机数自动生成后冒出地鼠
            let timeId = setInterval(function () {
                // 一开始设置true为响应相处,等到单击地鼠后再改为false,这样就避免可以单击几次地鼠增加分数值
                flag = true
                start.style.display = 'none'
                // 生成6个地鼠的随机数, 地鼠随机冒出
                let random = parseInt(Math.random() * moles.length)
                moles[random].style.top = '0'

                // 再开启延时器,没有点击的地鼠,自动下去
                temp = setTimeout(function () {
                    moles[random].style.top = '70%'
                }, 800);

            }, 1000)

            // 设置一个延时器,设置总时长为10秒
            setTimeout(function () {
                clearInterval(timeId)
                //游戏结束的时 显示开始按钮
                start.style.display = 'block'
            }, 10000)

            //绑定地鼠操作
            let count = 0
            moles.forEach(function (ele, index) {
                ele.addEventListener('click', function () {
                    // 由于一开始设置flag为true为可以处理的了,所以进行判断,如果点击了一次地鼠后,就更改为false避免可以单击几次地鼠增加分数值
                    if (flag) {
                        flag = false
                        count++
                        score.innerHTML = count
                        //当前点击的马上消失
                        ele.style.top = '70%'
                        //由于点击地鼠就马上消失,所以直接关闭不点击自动消失的延时器
                        clearTimeout(temp)
                    }
                })
            });

        })

    </script>

    </html>