基于JavaScript+HTML5實現打地鼠小游戲邏輯流程圖文詳解(附完整代碼)

隨著html5的興起，那些公司對大型游戲的開發正在慢慢疏遠，一、開發周期長；二、運營花費高；他們正找一些能夠克服這些缺點的替代品。正好，html5的出現可以改變這些現狀，在淘寶、京東等一些大型電商網站、QQ、微信等聊天軟件都出現了html5的小游戲，這說明html5越來越受到大家的青睞。接下來我用javascript實現一個小型游戲---打地鼠。

10年積累的網站制作、成都網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站制作后付款的網站建設流程，更有拜城免費網站建設讓你可以放心的選擇與我們合作。

一．游戲簡介

打地鼠這個游戲相信大家都不陌生，也是童年時候一款經典的游戲。本次游戲的編寫是以html文件形式完成的，并且使用HBulider軟件進行編寫，使用谷歌瀏覽器展示效果，游戲將會采用JavaScript實現整體的邏輯流程，最終使用谷歌瀏覽器來實現游戲的展示和操作。本次游戲需要有一定的HTML5+JavaScript基礎。

二．游戲最終的效果如下：

基于JavaScript+HTML5 實現打地鼠小游戲邏輯流程圖文詳解(附完整代碼)

三．游戲實現的流程

a) 游戲界面的切換和背景音樂的實現

b) 設置按鈕的點擊效果

c) 地鼠的隱藏與出現

d) 地鼠的隨機出現

e) 設置小錘跟隨鼠標移動

f) 小錘和地鼠的碰撞

首先是游戲界面的切換，在我們點擊開始游戲或者游戲說明時，都會進行頁面的切換，頁面切換效果我們可以使用隱藏屬性display:none。在游戲主菜單界面時，將內容content設置為出現：

document.getElementById("content").style.display="block";

在進入游戲或者游戲說明時，將content內容設置為隱藏，從而實現界面的切換效果

document.getElementById("content").style.display="none";

接下來是音頻的實現，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中自定義按鈕的功能，代碼如下：

//音頻播放與暫停
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)";
 }
 }

之后是設置按鈕的點擊效果，這個比較簡單，實際上就是兩個圖片之間的切換，給按鈕一個hover，通過鼠標移上來實現背景圖片的切換

基于JavaScript+HTML5 實現打地鼠小游戲邏輯流程圖文詳解(附完整代碼)

例：

//開始按鈕被鼠標指向時觸發
#start:hover{
 background-image: url(../img/start2.png);
 }

接下來是地鼠的出現功能，在地鼠出現的區域設置一個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);

地鼠的隨機出現，我們可以設定一個隨機數，

例：

//隨機產生0-8之間的隨機數，包括0和8
var num = Math.floor(Math.random()*9);

產生0-8之間的隨機數，指定九個洞中哪個洞出現地鼠，然后將num傳遞給定時器和延時器中的id指定的地鼠，實現地鼠隨機的選取。

隨機出現地鼠展示：

基于JavaScript+HTML5 實現打地鼠小游戲邏輯流程圖文詳解(附完整代碼)

設置錘子的移動需要與鼠標移動同步，使用到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;

檢測碰撞：

檢測錘子是否與出現的地鼠相碰撞，使用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實現打地鼠小游戲邏輯流程圖文詳解(附完整代碼)
標題URL：http://m.kartarina.com/article12/jeddgc.html

成都網站建設公司_創新互聯，為您提供網站收錄、商城網站、定制開發、手機網站建設、網站排名、虛擬主機

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容