大佬教程收集整理的这篇文章主要介绍了基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一、开发周期长;二、运营花费高;他们正找一些能够克服这些缺点的替代品。正好,html5的出现可以改变这些现状,在淘宝、京东等一些大型电商网站、QQ、微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐。接下来我用javascript实现一个小型游戏---打地鼠。
打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏。本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编写,使用谷歌浏览器展示效果,游戏将会采用JavaScript实现整体的逻辑流程,最终使用谷歌浏览器来实现游戏的展示和操作。本次游戏需要有一定的HTML5+JavaScript基础。
a) 游戏界面的切换和背景音乐的实现
b) 设置按钮的点击效果
C) 地鼠的隐藏与出现
d) 地鼠的随机出现
E) 设置小锤跟随鼠标移动
f) 小锤和地鼠的碰撞
首先是游戏界面的切换,在我们点击开始游戏或者游戏说明时,都会进行页面的切换,页面切换效果我们可以使用隐藏属性display:none。在游戏主菜单界面时,将内容content设置为出现:
在进入游戏或者游戏说明时,将content内容设置为隐藏,从而实现界面的切换效果
接下来是音频的实现,HTML5新特性中的
按钮样式:
然后再js中自定义按钮的功能,代码如下:
然后再js中自定义按钮的功能,代码如下:
之后是设置按钮的点击效果,这个比较简单,实际上就是两个图片之间的切换,给按钮一个hover,通过鼠标移上来实现背景图片的切换
接下来是地鼠的出现功能,在地鼠出现的区域设置一个div用来显示地鼠,在地鼠未出现之前将地鼠隐藏在洞下,使用定时器seTinterval()设定地鼠出现的时间,使用延时器setTimeout(),设定地鼠待在地面上的时间
首先是div块(地鼠显示的区域)和地鼠的隐藏div块
展示效果:
其次是地鼠的出现和消失,
timEID2= setTimeout(function(){
$("#m"+num).animate({"marginTop":100+"px"});
},1000);
});
//老鼠被打进洞后,恢复原图
document.getElementById("m"+num).style.BACkgroundImage = "url(img/mouse1.png)";
},3000);
地鼠的随机出现,我们可以设定一个随机数,
产生0-8之间的随机数,指定九个洞中哪个洞出现地鼠,然后将num传递给定时器和延时器中的id指定的地鼠,实现地鼠随机的选取。
随机出现地鼠展示:
设置锤子的移动需要与鼠标移动同步,使用到JavaScript中的鼠标移动事件,首先注册鼠标移动事件,代码如下:
检测锤子是否与出现的地鼠相碰撞,使用offsetTop、offsetWidth、offsetHeight和offsetLeft计算出地鼠和锤子的位置,根据距离的计算,判断地鼠与锤子是否重合碰撞。
效果:
代码如下:
以上是大佬教程为你收集整理的基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)全部内容,希望文章能够帮你解决基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。