隨著html5的興起，那些公司對大型游戲的開發(fā)正在慢慢疏遠，一、開發(fā)周期長；二、運營花費高；他們正找一些能夠克服這些缺點的替代品。正好，html5的出現(xiàn)可以改變這些現(xiàn)狀，在淘寶、京東等一些大型電商網(wǎng)站、QQ、微信等聊天軟件都出現(xiàn)了html5的小游戲，這說明html5越來越受到大家的青睞。接下來我用javascript實現(xiàn)一個小型游戲---打地鼠。
一．游戲簡介
打地鼠這個游戲相信大家都不陌生，也是童年時候一款經(jīng)典的游戲。本次游戲的編寫是以html文件形式完成的，并且使用HBulider軟件進行編寫，使用谷歌瀏覽器展示效果，游戲?qū)捎肑avaScript實現(xiàn)整體的邏輯流程，最終使用谷歌瀏覽器來實現(xiàn)游戲的展示和操作。本次游戲需要有一定的HTML5+JavaScript基礎。
二．游戲最終的效果如下：
三．游戲?qū)崿F(xiàn)的流程
a) 游戲界面的切換和背景音樂的實現(xiàn)
b) 設置按鈕的點擊效果
c) 地鼠的隱藏與出現(xiàn)
d) 地鼠的隨機出現(xiàn)
e) 設置小錘跟隨鼠標移動
f) 小錘和地鼠的碰撞
1
首先是游戲界面的切換，在我們點擊開始游戲或者游戲說明時，都會進行頁面的切換，頁面切換效果我們可以使用隱藏屬性display:none。在游戲主菜單界面時，將內(nèi)容content設置為出現(xiàn)：
document.getElementById("content").style.display="block";在進入游戲或者游戲說明時，將content內(nèi)容設置為隱藏，從而實現(xiàn)界面的切換效果
document.getElementById("content").style.display="none";2
接下來是音頻的實現(xiàn)，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)"; } }3
之后是設置按鈕的點擊效果，這個比較簡單，實際上就是兩個圖片之間的切換，給按鈕一個hover，通過鼠標移上來實現(xiàn)背景圖片的切換
例：
//開始按鈕被鼠標指向時觸發(fā)#start:hover{ background-image: url(../img/start2.png); }4
接下來是地鼠的出現(xiàn)功能，在地鼠出現(xiàn)的區(qū)域設置一個div用來顯示地鼠，在地鼠未出現(xiàn)之前將地鼠隱藏在洞下，使用定時器setInterval（）設定地鼠出現(xiàn)的時間，使用延時器setTimeout（），設定地鼠待在地面上的時間
首先是div塊（地鼠顯示的區(qū)域）和地鼠的隱藏div塊
展示效果：
例：
//d0為地鼠出現(xiàn)的區(qū)域，m0設置地鼠隱藏的區(qū)域<div id="d0" > <div id="m0" ></div> </div>
其次是地鼠的出現(xiàn)和消失，
例：
//老鼠顯示和消失動畫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
地鼠的隨機出現(xiàn)，我們可以設定一個隨機數(shù)，
例：
//隨機產(chǎn)生0-8之間的隨機數(shù)，包括0和8var num = Math.floor(Math.random()*9);
產(chǎn)生0-8之間的隨機數(shù)，指定九個洞中哪個洞出現(xiàn)地鼠，然后將num傳遞給定時器和延時器中的id指定的地鼠，實現(xiàn)地鼠隨機的選取。
隨機出現(xiàn)地鼠展示：
6
設置錘子的移動需要與鼠標移動同步，使用到JavaScript中的鼠標移動事件，首先注冊鼠標移動事件，代碼如下：
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
檢測碰撞：
檢測錘子是否與出現(xiàn)的地鼠相碰撞，使用offsetTop、offsetWidth、offsetHeight和offsetLeft計算出地鼠和錘子的位置，根據(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; //錘子與老鼠碰撞計算if(r1<l2 || l1>r2 || b1<t2 || t1>b2) { var ele = document.getElementById("m"+num); //實現(xiàn)錘子點擊動畫 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); //實現(xiàn)錘子點擊動畫 ele.onmousedown = function(){ ChangeBg("Img","img/hammer2.png"); document.getElementById('m'+num).style.background='url(img/mouse1.png); } }以上是主要功能的代碼展示，需要完整的游戲代碼，可自行下載。
總結(jié)
以上所述是小編給大家介紹的基于JavaScript+HTML5 實現(xiàn)打地鼠小游戲，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
