基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

document.getElementById("content").style.display="block";

document.getElementById("content").style.display="none";

//src中存放音频地址，设置autoplay加载完成自动播放，button按钮控制播放暂停
<audio id="audio" src="/UploadFiles/2021-04-02/game_music.ogg">

然后再js中自定义按钮的功能，代码如下：
然后再js中自定义按钮的功能，代码如下：


//音频播放与暂停
function playOrPause(){
 var audio = document.getElementById("audio");
 if(audio.paused){
 audio.play();
document.getElementById("playbtn").style.backgroundImage = "url(img/musicplaying.png)";
 }else if(audio.played){
  audio.pause();
 document.getElementById("playbtn").style.backgroundImage = "url(img/musicpause.png)";
 }
 }


3
之后是设置按钮的点击效果，这个比较简单，实际上就是两个图片之间的切换，给按钮一个hover，通过鼠标移上来实现背景图片的切换

例：


//开始按钮被鼠标指向时触发
#start:hover{
 background-image: url(../img/start2.png);
 }


4
 接下来是地鼠的出现功能，在地鼠出现的区域设置一个div用来显示地鼠，在地鼠未出现之前将地鼠隐藏在洞下，使用定时器setInterval（）设定地鼠出现的时间，使用延时器setTimeout（），设定地鼠待在地面上的时间
首先是div块（地鼠显示的区域）和地鼠的隐藏div块
展示效果：

例：


//d0为地鼠出现的区域，m0设置地鼠隐藏的区域
<div id="d0" >
 <div id="m0" ></div> 
</div>


其次是地鼠的出现和消失，
例：


//老鼠显示和消失动画
intervalid= setInterval(function(){
 $("#m"+num).animate({"marginTop":0+"px"},function(){

  timeId2= setTimeout(function(){
  $("#m"+num).animate({"marginTop":100+"px"});
  },1000);
  
 }); 
 //老鼠被打进洞后，恢复原图
  document.getElementById("m"+num).style.backgroundImage = "url(img/mouse1.png)";
  
 },3000);


5


 地鼠的随机出现，我们可以设定一个随机数，
例：


//随机产生0-8之间的随机数，包括0和8
var num = Math.floor(Math.random()*9);


产生0-8之间的随机数，指定九个洞中哪个洞出现地鼠，然后将num传递给定时器和延时器中的id指定的地鼠，实现地鼠随机的选取。
随机出现地鼠展示：

6
 设置锤子的移动需要与鼠标移动同步，使用到JavaScript中的鼠标移动事件，首先注册鼠标移动事件，代码如下：



var ele=document.getElementById("all");
ele.onmousemove=function(){GetMouse(event);}
function GetMouse(oEvent,snum)
{
 x=oEvent.clientX;
 y=oEvent.clientY; document.getElementById('Img').style.left=(parseInt(x))+10+"px";
 document.getElementById('Img').style.top=y-30+"px"; 
 var oEvent=oEvent||event; 


7
 检测碰撞：
检测锤子是否与出现的地鼠相碰撞，使用offsetTop、offsetWidth、offsetHeight和offsetLeft计算出地鼠和锤子的位置，根据距离的计算，判断地鼠与锤子是否重合碰撞。
效果：


代码如下：


var l1=document.getElementById('Img').offsetLeft; 
var r1=document.getElementById('Img')
.offsetLeft+document.getElementById('Img').offsetWidth; 
var t1=document.getElementById('Img').offsetTop; 
var b1=document.getElementById('Img')
.offsetTop+document.getElementById('Img').offsetHeight; 
var l2=document.getElementById('m'+num).offsetLeft; 
var r2=document.getElementById('m'+num)
.offsetLeft+document.getElementById('m'+num).offsetWidth; 
var t2=document.getElementById('m'+num).offsetTop; 
var b2=document.getElementById('m'+num)
.offsetTop+document.getElementById('m'+num).offsetHeight; 
//锤子与老鼠碰撞计算
if(r1<l2 || l1>r2 || b1<t2 || t1>b2) 
 { 
 var ele = document.getElementById("m"+num);
 //实现锤子点击动画
 ele.onmousedown = function(){
 ChangeBg("Img","img/hammer2.png");
 //打中老鼠老鼠切换图片
 document.form1.score.value = beat;
 console.log("总得分为："+beat);   document.getElementById('m'+num)
.style.backgroundImage='url(img/mouse2.png)'; 
 } 
beat+=1; 
 } 
else 
 { 
 var ele = document.getElementById("m"+num);
 //实现锤子点击动画
 ele.onmousedown = function(){
 ChangeBg("Img","img/hammer2.png"); document.getElementById('m'+num).style.background='url(img/mouse1.png); 
}
 }


以上是主要功能的代码展示，需要完整的游戏代码，可自行下载。
总结
以上所述是小编给大家介绍的基于JavaScript+HTML5 实现打地鼠小游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！