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;