JavaScript实现打地鼠小游戏

##前言：
打地鼠小游戏相信大家都玩过，地鼠会从一个个地洞中不经意的探出一个脑袋，我们要做的就是在地鼠出来的时候拖动鼠标去打它，当打到地鼠时，会加分，打到不是地鼠时，会减分，是一个很考验手速和眼力的小游戏

正文

没有找到地鼠素材，这儿用”灰太狼”来替代地鼠，”小灰灰”替代非地鼠的物体。接下来就是一步步去实现它。首先来做分析，地鼠是如何往上钻出来的。在这儿，有这样一张图片，大家看了之后就一目了然了~
在这儿先介绍一下CSS雪碧图的概念：CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。因此，我们将这张图片当做一个div的背景图，我们只需要通过计时器，每个一段时间来改变这个div的backgroundPosizition,这样就能实现灰太狼的上升和下降过程。

主要过程

1 . 页面布局 通过posizition:absolute,绝对定位，将创建好的div一个个放到坑里面去,页面背景以及布局好之后如下图如下图所示：之后让这些div消失，即display:none;

2 . 如何使地鼠从不同的洞口出来，即让哪一个div显示的问题。这儿，我们通过
var hit_img=document.querySelectorAll(‘.hit_img’)来获取所有包含地鼠的div,这样hit_img为一个数组，这样通过不断产生一个随机数，来改变数组下标，hit_img[rand],将该div的display改为’block’，这样，地鼠就显示出来啦。

function random_() {
//var img_class = ['hit_img', 'hit_img1','hit_img']，存放两个样式，一个是灰太狼，一个是小灰灰。
    rand = parseInt(Math.random() * 9)//出来的位置
    rand1 = parseInt(Math.random() * 3)//出来的是灰太狼还是小灰灰
}

3 . 实现上升或下降

//从上面那张雪碧图可以看出，当移动到第6个小块时，灰太狼上升到最高处，所以不能再上升了
function up() {
    var h_num = 6;//限定条件，不能超过6
    //上升定时器，每次使imgNum加1，因为每一个小块的宽度为108个像素，因此，每次让backgroundPositionX减108个像素，而backgroundPosizitionY不变。在这儿
    upTimer = setInterval(function() {
        imgNum++;
        if(imgNum < h_num) {
            hit_img[rand].style.display = 'block';
            hit_img[rand].className = img_class[rand1]
            hit_img[rand].style.backgroundPosition = -imgNum * 108 + 'px 0';
        } else {
            clearInterval(upTimer);//清楚上升计时器
            //灰太狼或小灰灰出洞口之后，停留一段时间在下去。
            upTimeout= setTimeout(function() {
                down();
            }, 500)
        }
    }, 50)
}

//下降定时器，每次使imgNum减1,原理类似于上升方法。
function down() {
    downTimer_ = setInterval(function() {
        imgNum--;
        if(imgNum > -1) {
            hit_img[rand].style.backgroundPosition = -imgNum * 108 + 'px 0';
        } else {
            hah = 0;
            hit_img[rand].style.display = 'none';
            //在地鼠消失后，隔一段时间再出来新的一个地鼠
            downTimer = setTimeout(function() {
                imgNum = 0;
                random_();//重新执行随机数方法，产生下一个地鼠
                clearTimer();//清楚之前的所有计时器
                progressTimer();//进度条计时器
                up();
            }, 100);
        }
    }, 50)
}
//清楚所有定时器
function clearTimer() {
    var timer = setInterval(function() {}, 1);
    for(var i = 0; i < timer; i++) {
        clearInterval(i);
    }
}

4 . 实现拍打地鼠，即添加onclick事件~

//为每个div添加点击事件
function click_() {
    for(var i = 0; i < hit_img.length; i++) {
        hit_img[i].onclick = function() {
            isHit = true;
            //保存本次点击的图片的class名，用来判断点击的是灰太狼还是小灰灰
            classname = this.className;
            //进入判断
            judge();
        }
    }
}
//判断
var hah = 0;//防止重复击打，加两次判断；当地鼠下降消失后，重置为0；
function judge() {
    hah++;
    if(hah == 1) {
        if(isHit) {
            {   //当点击之后，让图片索引变为9，出现被打动画
                imgNum = 9;
                //如果被打对象为灰太狼，则分数加10
                if(classname == 'hit_img') {
                    score += 10;
                }
                //如果被打对象为小灰灰，分数减10
                if(classname == 'hit_img1') {
                    score -= 10;
                }
                scoreItem.innerHTML = score + '分'
                isHit = false;
                down();//点击之后开始往下
            }
        }
    }
}

5.设置开始游戏按钮

//开始游戏
function start() {
    gameStart.style.display = 'none'
    up();
    click_();
    random_();
    progressTimer();
}

通过以上步骤，游戏基本功能可以实现啦，剩下的就是添加开始，结束界面，以及计时功能。下面附上效果图以及源码下载地址

开始界面

游戏界面

结束界面

源码下载地址，文件名为hit mouse