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


Posted in Javascript onNovember 02, 2017

 随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一、开发周期长;二、运营花费高;他们正找一些能够克服这些缺点的替代品。正好,html5的出现可以改变这些现状,在淘宝、京东等一些大型电商网站、QQ、微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐。接下来我用javascript实现一个小型游戏---打地鼠。

一.游戏简介

打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏。本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编写,使用谷歌浏览器展示效果,游戏将会采用JavaScript实现整体的逻辑流程,最终使用谷歌浏览器来实现游戏的展示和操作。本次游戏需要有一定的HTML5+JavaScript基础。

二.游戏最终的效果如下:

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

三.游戏实现的流程

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中自定义一个按钮,通过按钮来控制音频的播放和暂停,代码如下:

按钮样式:

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

//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,通过鼠标移上来实现背景图片的切换

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

例:

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

4

 接下来是地鼠的出现功能,在地鼠出现的区域设置一个div用来显示地鼠,在地鼠未出现之前将地鼠隐藏在洞下,使用定时器setInterval()设定地鼠出现的时间,使用延时器setTimeout(),设定地鼠待在地面上的时间

首先是div块(地鼠显示的区域)和地鼠的隐藏div块

展示效果:

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

例:

//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指定的地鼠,实现地鼠随机的选取。

随机出现地鼠展示:

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

6

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

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

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 实现打地鼠小游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

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

Javascript 相关文章推荐
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
爬虫利器Puppeteer实战
Jan 09 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 #Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 #Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 #Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 #Javascript
JavaScript登录验证基础教程
Nov 01 #Javascript
vue打包后显示空白正确处理方法
Nov 01 #Javascript
js实现登录与注册界面
Nov 01 #Javascript
You might like
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP中echo和print的区别
2014/08/28 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
JavaScript window.location对象
2014/11/14 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
使用JS动态显示文本
2017/09/09 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
vue生命周期的探索
2019/04/03 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
python 字符串和整数的转换方法
2018/06/25 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Python 处理图片像素点的实例
2019/01/08 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
大学生旷课检讨书
2014/01/22 职场文书
仓库文员岗位职责
2014/04/06 职场文书
预防煤气中毒方案
2014/06/16 职场文书
大学生赌博检讨书
2014/09/22 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
董事长开业致辞
2015/07/29 职场文书
小学英语课教学反思
2016/02/15 职场文书