JavaScript+HTML5 實現打地鼠小遊戲

時間 2019-11-05

標籤 javascript+html5 javascript html 實現遊戲欄目 JavaScript 简体版

原文原文鏈接

一．遊戲簡介

打地鼠這個遊戲相信你們都不陌生，也是童年時候一款經典的遊戲。本次遊戲的編寫是以html文件形式完成的，而且使用HBulider軟件進行編寫，使用谷歌瀏覽器展現效果，遊戲將會採用JavaScript實現總體的邏輯流程，最終使用谷歌瀏覽器來實現遊戲的展現和操做。本次遊戲須要有必定的HTML5+JavaScript基礎。php

二．遊戲最終的效果以下：

三．遊戲實現的流程

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

b) 設置按鈕的點擊效果瀏覽器

c) 地鼠的隱藏與出現dom

d) 地鼠的隨機出現ide

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

f) 小錘和地鼠的碰撞動畫

1

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

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

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

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

2

接下來是音頻的實現，HTML5新特性中的<audio>標籤提供音樂播放的功能，在進入遊戲時，音樂自動播放，咱們在body中自定義一個按鈕，經過按鈕來控制音頻的播放和暫停，代碼以下：3d

按鈕樣式：

//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，經過鼠標移上來實現背景圖片的切換

例：

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

4

接下來是地鼠的出現功能，在地鼠出現的區域設置一個div用來顯示地鼠，在地鼠未出現以前將地鼠隱藏在洞下，使用定時器setInterval（）設定地鼠出現的時間，使用延時器setTimeout（），設定地鼠待在地面上的時間

首先是div塊（地鼠顯示的區域）和地鼠的隱藏div塊

展現效果：

例：

//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指定的地鼠，實現地鼠隨機的選取。

隨機出現地鼠展現：

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

檢測碰撞：

檢測錘子是否與出現的地鼠相碰撞，使用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);  
}
                   
          }