基于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入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
vue实现文字加密功能
Sep 27 Javascript
使用p5.js临摹动态图片
Nov 04 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
深入PHP异步执行的详解
2013/06/03 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
python time模块用法实例详解
2014/09/11 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
极简的Python入门指引
2015/04/01 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python遍历numpy数组的实例
2018/04/04 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
在python image 中实现安装中文字体
2020/05/16 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
外贸采购员岗位职责
2014/03/08 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python