jQuery实现打地鼠游戏

这是一个jQuery实现的简单HTML打地鼠游戏。地鼠是没有的了，只有pop子和pip美。游戏规则

游戏时间为60秒；
击中pop子则奖励10分；
击中pip美则惩罚10分。

这里写图片描述
项目的目录分级为

code文件夹
- css文件夹
- js文件夹
- images文件夹
- index.html

一、HTML部分

我这里引用的jQuery版本是1.12.4版本，可以点击这里下载jQuery1.12.4版本（或者2.2.4版本或者3.1.1版本）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pop_pip</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="container">
    <div class="timer">60</div>
    <div class="score">0</div>
    <button class="start">开始游戏</button>
    <div class="rules">游戏规则</div>
    <div class="rule">
        <p>游戏规则</p>
        <p>1.游戏时间为60秒</p>
        <p>2.击中pop子奖励10分</p>
        <p>3.击中pip美惩罚10分</p>
        <a href="#" class="close">返回</a>
    </div>
    <div class="mask">
        <h1>GAME OVER</h1>
        <button class="restart">重新开始</button>
    </div>
</div>
</body>
</html>

二、CSS部分

背景图是百度图片里的，然后修改了一下下，自己拿来当背景图了。CSS部分就设置一下开始按钮、重新开始按钮、游戏规则按钮等页面布局。

*{
    margin: 0;
    padding: 0;
}

.container{
    width: 1280px;
    height: 720px;
    background: url(../images/background.png) no-repeat 0 0;
    margin: 50px auto;
}

.container>.timer{
    font-size: 30px;
    color: white;
    margin-left: 500px;
    padding-top: 25px;
    display: inline-block;
}

.container>.score{
    font-size: 30px;
    color: white;
    margin-left: 200px;
    display: inline-block;
}

.container>.start{
    width: 150px;;
    line-height: 45px;
    font-size: 20px;
    text-align: center;
    color: white;
    background:linear-gradient(rgb(255,230,76), rgb(255,180,60));
    border-radius: 17px;
    border: none;
    position: absolute;
    top: 425px;
    left: 50%;
    margin-left: -75px;
    display: block;
}

.container>.rules{
    width: 150px;;
    line-height: 45px;
    font-size: 20px;
    text-align: center;
    color: white;
    background:linear-gradient(rgb(255,230,76), rgb(255,180,60));
    border-radius: 17px;
    border: none;
    position: absolute;
    top: 500px;
    left: 50%;
    margin-left: -75px;
    display: block;
}

.container>.rule{
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0px;
    top: 0px;
    padding-top: 200px;
    box-sizing: border-box;
    display: none;
}

.rule>p{
    font-size: 20px;
    line-height: 200%;
    color: white;
}

.rule>a{
    color: yellow;
}

.container>.mask{
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0px;
    top: 0px;
    padding-top: 200px;
    box-sizing: border-box;
    display: none;
}

.mask>h1{
    font-size: 40px;
    padding-top: 100px;
    color:rgb(255,180,60);
    text-shadow: 3px 3px 0 rgb(255,255,255);
}

.mask>button{
    width: 150px;;
    line-height: 45px;
    font-size: 20px;
    color: white;
    background:linear-gradient(rgb(0,210,219), rgb(0,100,180));
    border-radius: 17px;
    border: none;
    position: absolute;
    top: 425px;
    left: 50%;
    margin-left: -75px;
}

三、jQuery实现功能

1.监听游戏规则按钮的点击

先找到规则所在的div，如果监听到点击事件，那么将原先隐藏（dispaly:none）的详细规则淡入显示出来。

$(function () {
    //监听游戏规则的点击
    $(".rules").click(function () {
        $(".rule").stop().fadeIn(100);
    })

点击规则的关闭按钮，同样需要将详细规则淡出。

2.监听开始游戏按钮的点击

点击开始按钮后，需要隐藏按钮，并且游戏时间开始倒计时且显示动画。

$(".start").click(function () {
    $(this).stop().fadeOut(100);
    $(".rules").stop().fadeOut(100);
    progressHandler();
    startpopAnimation();
})

2.1 控制游戏时间倒计时

function progressHandler() {
        $(".timer").html(60);
        var timer = setInterval(function () {
            var t = $(".timer").text();
            t --;
            if(t<=0){
                clearInterval(timer);
                $(".mask").stop().fadeIn(100);
            }
            if(t < 10){
                $(".timer").html('0'+t);
            }
            else{
                $(".timer").html(t);
            }
        },1000)
    }

2.2 设置开始动画的函数startpopAnimation()

首先存放pop子和pip美的动画图片，比如这种：
这里写图片描述
当然，这组图我没有用。

    //建立一个数组存放pop子的图片
     var pop=['./images/pop_x0.png',
     /*省略很多很多字*/
     './images/pop_x12.png'];
    //建立一个数组存放pip美的图片
    //存放15个洞的位置
     var arr=[
         {left:"430px",top:"210px"},
         //省略……
         {left:"1152px",top:"508px"}
     ];

然后就开始设置动画出现的效果。生成[0，14]内的随机数作为pop子或者是pip美出没的洞位置。当一组动画显示完后，当然要将原先的图片remove一下，才不会一直停留在页面中。

        //创建一个图片
        var image = $("<img src='' class='image'> ");
        //随机获取图片的位置
        var pos = getRandom(0,14);
        //设置图片显示的位置
        image.css({
            position:"absolute",
            left:arr[pos].left,
            top:arr[pos].top
        });
        //随机获取数组类型pop或者pip
        var array = Math.round(Math.random()) == 0 ? pop : pip;
        //设置图片的内容
        window.index = 0;
        window.indexEnd = 6;
        animationTimer = setInterval(function () {
            if(index > indexEnd){
                image.remove();
                clearInterval(animationTimer);
                startpopAnimation();
            }
            image.attr("src",array[index]);
            index ++;
        },300);
        //将图片添加到界面上
        $(".container").append(image);
        //调用处理游戏规则方法
        gameRules(image);

2.3 获取随机数

因为共有十五个洞，所以我们生成的随机数需要在[0，14]这个区间内，用这个随机数作为出现图片的洞的位置。具体实现代码如下：

 function getRandom(min, max) {
        var num1 = Math.random() * (max - min);
        var num2 = Math.round(num1 + min);
        num2 = Math.max(Math.min(num2,max),min);
        return num2;
    }

用Math.random函数随机生成0，0.1，0.2，0.3，0.4，0.5，0.6，0.7，0.8，0.9，1之间的任一个数。Math.round是向上取整，即四舍五入。

2.4 设置停止动画函数

弄完以上的步骤之后，游戏还存在bug，当倒计时结束之后，弹出了GAME OVER之后，动画还在继续。所以我们需要在游戏结束后停止动画。即remove图片，并且停掉动画的定时器。在倒计时函数中，如果时间为零，需要调用停止动画函数。

2.5 设置游戏规则

我们在开始有提到三个游戏规则。游戏时间已经设定好，现在需要设置一下得分规则，如果点击pop子，加10分；如果击中pip美，减10分。
这里写图片描述
“生气了吗？”“生气了哦。”
而且点击图片之后，要将pop子或者pip美被打到的动画显示出来。这时需要修改动画下标的索引。

 function gameRules(image) {
        image.one("click",function () {
            //修改索引
            window.index = 6;
            window.indexEnd = 12;
            //拿到当前点击图片的地址
            var $src = $(this).attr("src");
            //根据图片地址判断是否是pop
            var flag = $src.indexOf("o") >= 0;
            //根据点击的图片类型增减分数
            if(flag){
                $(".score").text(parseInt($(".score").text())+10);
            }
            else{
                $(".score").text(parseInt($(".score").text())-10);
            }
        })
    }

3.监听重新开始按钮的点击

淡出重新开始按钮，将分数置零，重新调用倒计时函数以及开始动画函数。

源代码可在这里下载。