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