一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

打地鼠的小游戏相信大家小时候都玩过，其实打地鼠的实现很简单，我们一起看看吧~

打地鼠介绍

如图，首先绘制一个4*5的矩阵，模拟地鼠的洞穴。地鼠随机的冒出头来，我们用鼠标去打地鼠的脑袋，打中加分，否则不加分。

绘制4*5矩阵

直接用table绘制

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

设置样式，添加洞穴的图片

table {
    width: 600px;
    margin: 0 auto;
}

td {
    height: 150px;
    text-align: center;
    vertical-align: bottom;
    background: url(image/hole.png) no-repeat center bottom;
    background-size: 125px;
}

每个洞穴都藏了一只地鼠。设置样式mouseUp使得地鼠探出头来。

<table>
    <tr>
        <td><img class="mouseUp" src="image/mouse.png" alt=""></td>
        <td><img src="image/mouse.png" alt=""></td>
        <td><img src="image/mouse.png" alt=""></td>
        <td><img src="image/mouse.png" alt=""></td>
    </tr>

随机从洞穴出现地鼠

var mouses = $('img');
function show() {
    var a = Math.floor(Math.random() * 20);
    var mouse = mouses.get(a);
    $(mouse).addClass('mouseUp').removeClass('mouseDown');
    // 添加地鼠出现的动画

    setTimeout(function () {
        $(mouse).addClass('mouseDown').removeClass('mouseUp');
    }, 2000);
    // 添加地鼠消失的动画
}

一次出现6个地鼠

function plays() {
    for (var i = 0; i < 6; i++) {
        new show();
    }
}

计算打中地鼠的得分

var scores = 0;
$('img').click(function () {
    scores += 10;
    $(this).addClass('mouseDown').removeClass('mouseUp');
    $('#score').text('得分：' + scores);
})

绘制地鼠出现和消失的样式

.mouseUp {
    animation: up 1s both;
}

.mouseDown {
    animation: down 0.3s both;
}

@keyframes up {
    from {
        height: 0;
    }
    to {
        height: 70px;
    }
}

@keyframes down {
    from {
        height: 70px;
    }
    to {
        height: 0;
    }
}

给鼠标添加样式，变成锤子

cursor: url(image/cursor.png),auto;

鼠标按下添加对于的锤子样式

$('body').mousedown(function () {
    $('body').css('cursor', 'url(image/cursor-down.png),auto');

}).mouseup(function () {
    $('body').css('cursor', 'url(image/cursor.png),auto');
})

再给页面加上背景图，配上音乐，就可以一起来玩打地鼠的游戏了。快动手试试吧！