基于基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解实现打地鼠小游戏逻辑流程图文详解
(附完整代码附完整代码)
打地鼠小游戏大家都喜欢玩，本文是以html编写的，并且使用HBulider软件进行编写的，下面通过本文给大家分
享基于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)";
}
}
评论0