基于JavaScript+HTML5 實(shí)現(xiàn)打地鼠小游戲邏輯流程圖文詳解(附完整代碼)
隨著html5的興起，那些公司對(duì)大型游戲的開發(fā)正在慢慢疏遠(yuǎn)，一、開發(fā)周期長(zhǎng)；二、運(yùn)營(yíng)花費(fèi)高；他們正找一些能夠克服這些缺點(diǎn)的替代品。正好，html5的出現(xiàn)可以改變這些現(xiàn)狀，在淘寶、京東等一些大型電商網(wǎng)站、QQ、微信等聊天軟件都出現(xiàn)了html5的小游戲，這說明html5越來越受到大家的青睞。接下來我用javascript實(shí)現(xiàn)一個(gè)小型游戲---打地鼠。
一．游戲簡(jiǎn)介
打地鼠這個(gè)游戲相信大家都不陌生，也是童年時(shí)候一款經(jīng)典的游戲。本次游戲的編寫是以html文件形式完成的，并且使用HBulider軟件進(jìn)行編寫，使用谷歌瀏覽器展示效果，游戲?qū)?huì)采用JavaScript實(shí)現(xiàn)整體的邏輯流程，最終使用谷歌瀏覽器來實(shí)現(xiàn)游戲的展示和操作。本次游戲需要有一定的HTML5+JavaScript基礎(chǔ)。
二．游戲最終的效果如下：
三．游戲?qū)崿F(xiàn)的流程
a) 游戲界面的切換和背景音樂的實(shí)現(xiàn)
b) 設(shè)置按鈕的點(diǎn)擊效果
c) 地鼠的隱藏與出現(xiàn)
d) 地鼠的隨機(jī)出現(xiàn)
e) 設(shè)置小錘跟隨鼠標(biāo)移動(dòng)
f) 小錘和地鼠的碰撞
1
首先是游戲界面的切換，在我們點(diǎn)擊開始游戲或者游戲說明時(shí)，都會(huì)進(jìn)行頁(yè)面的切換，頁(yè)面切換效果我們可以使用隱藏屬性display:none。在游戲主菜單界面時(shí)，將內(nèi)容content設(shè)置為出現(xiàn)：
document.getElementById("content").style.display="block";
在進(jìn)入游戲或者游戲說明時(shí)，將content內(nèi)容設(shè)置為隱藏，從而實(shí)現(xiàn)界面的切換效果
document.getElementById("content").style.display="none";
2
接下來是音頻的實(shí)現(xiàn)，HTML5新特性中的<audio>標(biāo)簽提供音樂播放的功能，在進(jìn)入游戲時(shí)，音樂自動(dòng)播放，我們?cè)赽ody中自定義一個(gè)按鈕，通過按鈕來控制音頻的播放和暫停，代碼如下：
按鈕樣式：
//src中存放音頻地址，設(shè)置autoplay加載完成自動(dòng)播放，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
之后是設(shè)置按鈕的點(diǎn)擊效果，這個(gè)比較簡(jiǎn)單，實(shí)際上就是兩個(gè)圖片之間的切換，給按鈕一個(gè)hover，通過鼠標(biāo)移上來實(shí)現(xiàn)背景圖片的切換
例：
//開始按鈕被鼠標(biāo)指向時(shí)觸發(fā)
#start:hover{
background-image: url(../img/start2.png);
}
4
接下來是地鼠的出現(xiàn)功能，在地鼠出現(xiàn)的區(qū)域設(shè)置一個(gè)div用來顯示地鼠，在地鼠未出現(xiàn)之前將地鼠隱藏在洞下，使用定時(shí)器setInterval（）設(shè)定地鼠出現(xiàn)的時(shí)間，使用延時(shí)器setTimeout（），設(shè)定地鼠待在地面上的時(shí)間
首先是div塊（地鼠顯示的區(qū)域）和地鼠的隱藏div塊
展示效果：
例：
//d0為地鼠出現(xiàn)的區(qū)域，m0設(shè)置地鼠隱藏的區(qū)域 <div id="d0" > <div id="m0" ></div> </div>
其次是地鼠的出現(xiàn)和消失，
例：
//老鼠顯示和消失動(dòng)畫
intervalid= setInterval(function(){
$("#m"+num).animate({"marginTop":0+"px"},function(){
timeId2= setTimeout(function(){
$("#m"+num).animate({"marginTop":100+"px"});
},1000);
});
//老鼠被打進(jìn)洞后，恢復(fù)原圖
document.getElementById("m"+num).style.backgroundImage = "url(img/mouse1.png)";
},3000);
5
地鼠的隨機(jī)出現(xiàn)，我們可以設(shè)定一個(gè)隨機(jī)數(shù)，
例：
//隨機(jī)產(chǎn)生0-8之間的隨機(jī)數(shù)，包括0和8 var num = Math.floor(Math.random()*9);
產(chǎn)生0-8之間的隨機(jī)數(shù)，指定九個(gè)洞中哪個(gè)洞出現(xiàn)地鼠，然后將num傳遞給定時(shí)器和延時(shí)器中的id指定的地鼠，實(shí)現(xiàn)地鼠隨機(jī)的選取。
隨機(jī)出現(xiàn)地鼠展示：
6
設(shè)置錘子的移動(dòng)需要與鼠標(biāo)移動(dòng)同步，使用到JavaScript中的鼠標(biāo)移動(dòng)事件，首先注冊(cè)鼠標(biāo)移動(dòng)事件，代碼如下：
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
檢測(cè)碰撞：
檢測(cè)錘子是否與出現(xiàn)的地鼠相碰撞，使用offsetTop、offsetWidth、offsetHeight和offsetLeft計(jì)算出地鼠和錘子的位置，根據(jù)距離的計(jì)算，判斷地鼠與錘子是否重合碰撞。
效果：
代碼如下：
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;
//錘子與老鼠碰撞計(jì)算
if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
{
var ele = document.getElementById("m"+num);
//實(shí)現(xiàn)錘子點(diǎn)擊動(dòng)畫
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);
//實(shí)現(xiàn)錘子點(diǎn)擊動(dòng)畫
ele.onmousedown = function(){
ChangeBg("Img","img/hammer2.png"); document.getElementById('m'+num).style.background='url(img/mouse1.png);
}
}
以上是主要功能的代碼展示，需要完整的游戲代碼，可自行下載。
總結(jié)
以上所述是小編給大家介紹的基于JavaScript+HTML5 實(shí)現(xiàn)打地鼠小游戲，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建CSS樣式規(guī)則方案
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建CSS樣式規(guī)則方案,本文包含獲取樣式表、創(chuàng)建樣式表、插入規(guī)則、添加規(guī)則等內(nèi)容,需要的朋友可以參考下2014-09-09
bootstrap timepicker在angular中取值并轉(zhuǎn)化為時(shí)間戳
這篇文章主要介紹了bootstrap timepicker在angular中取值并轉(zhuǎn)化為時(shí)間戳的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
匹配html標(biāo)記的正則...2006-07-07
showModalDialog模態(tài)對(duì)話框的使用詳解以及瀏覽器兼容
showModalDialog是jswindow對(duì)象的一個(gè)方法，和window.open一樣都是打開一個(gè)新的頁(yè)面。區(qū)別是：showModalDialog打開子窗口后，父窗口就不能獲取焦點(diǎn)了（也就是無法操作了）2014-01-01
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制
js實(shí)現(xiàn)DIV的一些簡(jiǎn)單控制...2007-06-06
這篇文章主要為大家介紹了Express框架req?res對(duì)象使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
javascript實(shí)現(xiàn)html頁(yè)面之間參數(shù)傳遞的四種方法實(shí)例分析
這篇文章主要介紹了javascript實(shí)現(xiàn)html頁(yè)面之間參數(shù)傳遞的四種方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)頁(yè)面之間參數(shù)傳遞的常用技巧,需要的朋友可以參考下2015-12-12
js switch case default 的用法示例介紹
switch case default的用法應(yīng)該存在一部分人不會(huì)使用吧，其實(shí)很簡(jiǎn)單就是每個(gè)case后，一定要加：break；default，就相當(dāng)于else，不會(huì)的朋友可以了解下2013-10-10
bootstrap fileinput 上傳插件的基礎(chǔ)使用
這篇文章主要介紹了bootstrap fileinput 上傳插件基礎(chǔ)使用，重點(diǎn)是把界面做得更加友好，更好的增加用戶體驗(yàn)。對(duì)bootstrap fileinput知識(shí)感興趣的朋友通過本文一起學(xué)習(xí)吧2017-02-02
純JavaScript實(shí)現(xiàn)獲取onclick、onchange等事件的值
這篇文章主要介紹了JavaScript獲取onclick、onchange等事件的值的方法,需要的朋友可以參考下2014-12-12