基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
随着html5的兴起，那些公司对大型游戏的开发正在慢慢疏远，一、开发周期长；二、运营花费高；他们正找一些能够克服这些缺点的替代品。正好，html5的出现可以改变这些现状，在淘宝、京东等一些大型电商网站、QQ、微信等聊天软件都出现了html5的小游戏，这说明html5越来越受到大家的青睐。接下来我用javascript实现一个小型游戏---打地鼠。
一．游戏简介
打地鼠这个游戏相信大家都不陌生，也是童年时候一款经典的游戏。本次游戏的编写是以html文件形式完成的，并且使用HBulider软件进行编写，使用谷歌浏览器展示效果，游戏将会采用JavaScript实现整体的逻辑流程，最终使用谷歌浏览器来实现游戏的展示和操作。本次游戏需要有一定的HTML5+JavaScript基础。
二．游戏最终的效果如下：
三．游戏实现的流程
a) 游戏界面的切换和背景音乐的实现
b) 设置按钮的点击效果
c) 地鼠的隐藏与出现
d) 地鼠的随机出现
e) 设置小锤跟随鼠标移动
f) 小锤和地鼠的碰撞
1
首先是游戏界面的切换，在我们点击开始游戏或者游戏说明时，都会进行页面的切换，页面切换效果我们可以使用隐藏属性display:none。在游戏主菜单界面时，将内容content设置为出现：
document.getElementById("content").style.display="block";
在进入游戏或者游戏说明时，将content内容设置为隐藏，从而实现界面的切换效果
document.getElementById("content").style.display="none";
2
接下来是音频的实现，HTML5新特性中的<audio>标签提供音乐播放的功能，在进入游戏时，音乐自动播放，我们在body中自定义一个按钮，通过按钮来控制音频的播放和暂停，代码如下：
按钮样式：
//src中存放音频地址，设置autoplay加载完成自动播放，button按钮控制播放暂停 <audio id="audio" src="audio/game_music.ogg" autoplay="autoplay" loop="loop" ></audio> <input type="button" onclick="playOrPause()" id="playbtn"></input>
然后再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 实现打地鼠小游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了JS中如何比较两个Json对象是否相等实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
Nuxt3 布局layouts和NuxtLayout的使用详解
layouts是Nuxt3提供的一种方便开发者快速实现自定义布局的约定，是基于Vue3的一个开发框架，基于服务器端渲染SSR，可以更加方便的用于Vue的SEO优化，这篇文章主要介绍了Nuxt3 布局layouts和NuxtLayout的使用,需要的朋友可以参考下2023-04-04
本篇文章主要介绍了D3.js实现简洁实用的动态仪表盘的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了js实现精美的银灰色竖排折叠菜单,可实现页面左侧竖排的纵向折叠菜单效果,非常美观实用,需要的朋友可以参考下2015-05-05
iframe自适应宽度、高度 ie6 7 8，firefox 3.86下测试通过
近期需要一个iframe自适应高度的东西，在网上找了很多，都不能用……一看大体的日期都是大概 2008年前后的其他近期的基本都是以前的转载，所以只好自己动手了。2010-07-07
本文，我们将使用 Google 搜索出排名前 10 位的 JavaScript 库，并对它们逐一进行介绍。2010-04-04
本地存储cookie、localStorage和sessionStorage示例详解
cookie、localStorage 和 sessionStorage都是在客户端存储数据的方式，但它们之间有一些区别,下面这篇文章主要给大家介绍了关于JavaScript中cookie、localStorage和sessionStorage的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了JS+cookie实现购物评价五星好评功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
近来无聊，翻出来大学时候的数据结构教材来看。突然想起，大学时候就想过用js实现基本的排序算法的事情，反正闲来无事，便写出来后记录于此2012-08-08
这篇文章主要介绍了微信小程序与公众号卡券/会员打通的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
最新评论