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;//如果被打对象为灰太狼，则分数加10if(classname == 'hit_img') {score += 10;}//如果被打对象为小灰灰，分数减10if(classname == 'hit_img1') {score -= 10;}scoreItem.innerHTML = score + '分'isHit = false;down();//点击之后开始往下}}}
}

5.设置开始游戏按钮

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

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

开始界面

游戏界面

结束界面

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

JavaScript实现打地鼠小游戏相关推荐

linux打地鼠游戏代码,JavaScript实现打地鼠小游戏
一.实验说明 1. 环境介绍本实验环境采用Ubuntu Linux桌面环境,实验中会用到桌面上的程序: Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令 Fir ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
java 打地鼠源代码_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
敲地鼠java_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
java android 打地鼠_Android实现打地鼠小游戏
本文实例为大家分享了Android实现打地鼠小游戏的具体代码,供大家参考,具体内容如下实现结果代码实现 playmouse.java package com.example.playmouse; ...
如何用python制作五子棋游戏_Python制作打地鼠小游戏
原文链接 Python制作小游戏(二十一)mp.weixin.qq.com 效果展示打地鼠小游戏https://www.zhihu.com/video/1200492442610450432 简介 ...
视频教程-JavaScript打飞机小游戏视频教程-JavaScript
JavaScript打飞机小游戏视频教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强 ...
【180730】WinForm打地鼠小游戏源码
本源码是采用WinForm进行开发的一个并非简单的打地鼠小游戏,有动画效果哈!有打地鼠.计分.过关等功能. 菜单功能: 1.运行游戏后,输入玩家姓名,点击开始 2.用鼠标点击从洞中钻出的地鼠给予打击 ...
android打地鼠设计报告,android开发中利用handler制作一个打地鼠小游戏
android开发中利用handler制作一个打地鼠小游戏发布时间:2020-11-25 15:21:11 来源:亿速云阅读:136 作者:Leah 这期内容当中小编将会给大家带来有关androi ...

JavaScript实现打地鼠小游戏

正文

主要过程

JavaScript实现打地鼠小游戏相关推荐

最新文章

热门文章