案例六、打地鼠的小遊戲

在寫這個打地鼠的遊戲開始首先要清楚每一步該做什麼

然後再一步一步搭好架構再完善功能。

1.建立table三行三列，用來存放坑（圖檔）

2.獲得所有的圖檔标簽

3.老鼠的動作有①.冒出來

4.②. 老鼠跑了

5.③.老鼠被打死了

6.完善功能

一、首先實作第一步，用table建立一個三行三列的坑

<div id = "content">
<h2>打地鼠</h2><br/>
<table id = "background">

<tr>
<td><img src="./images/keng.gif" ></td>
<td><img src="./images/keng.gif" ></td>
<td><img src="./images/keng.gif" ></td>
</tr>

<tr>
<td><img src="./images/keng.gif" ></td>
<td><img src="./images/keng.gif" ></td>
<td><img src="./images/keng.gif" ></td>
</tr>

<tr>
<td><img src="./images/keng.gif" ></td>
<td><img src="./images/keng.gif" ></td>
<td><img src="./images/keng.gif" ></td>
</tr>
</table>

接下來就是寫js函數。

二、首先獲得所有的坑的集合

var image = document.getElementsByTagName(‘img’);

三、老鼠的動作有：①.冒出來

老鼠冒出來的坑得獲得一個随機的坑，然後将坑的圖檔替換成地鼠的圖檔

再将每個老鼠綁定click事件。然後要麼打死觸發die()函數。要麼隔一段時間觸發paole()函數

function chulai(){
    ranK = Math.floor(Math.random() * );
    image[ranK].src = "./images/dishu.gif";
    image[ranK].style.marginTop = "0px";
    image[ranK].setAttribute("onclick","die()");
    setTimeout("paole()", Math.random()*+);
}

四、老鼠的動作：②.老鼠很幸運的跑了

如果執行老鼠跑了的這個函數，那麼得做一些改變。首先圖檔得換成預設的坑的圖檔。然後移除掉綁定到它身上的click事件。最後再繼續調用老鼠出來的函數，chulai();

function paole(){
    image[ranK].src = "./images/keng.gif";
    image[ranK].style.marginTop = "31px";
    image[ranK].removeAttribute("onclick");
    setTimeout("chulai()", Math.random()*+);
}

五、老鼠的動作：③.老鼠很不幸的被我們打死了

老鼠執行該事件得進行以下改變，同樣也得移除它身上的click事件，将它的圖檔換成受傷的圖檔。

function die(){
        image[ranK].src = "./images/shang.gif";
        image[ranK].removeAttribute("onclick");
        image[ranK].style.marginTop = "3px";
    }

在寫完了上面這些代碼後，貌似有了完整的功能，實際上卻不能執行。因為少了一個入口的函數，即老鼠出來的函數應該被調用，當然，這個函數也應該在Math.random()的随機時間中被調用，即整合後的代碼如下。

<script type="text/javascript">

//1 先擷取到所有的坑(圖檔)
var image = document.getElementsByTagName('img');
var ranK;

//随機時間調用入口函數
setTimeout("chulai()",Math.random()*+);
//讓老鼠随機出現在一個坑裡
function chulai(){

    ranK = Math.floor(Math.random() * );
    image[ranK].src = "./images/dishu.gif";
    image[ranK].style.marginTop = "0px";
    image[ranK].setAttribute("onclick","die()");
    setTimeout("paole()", Math.random()*+);

}
//2 老鼠回去了
function paole(){

    image[ranK].src = "./images/keng.gif";
    image[ranK].style.marginTop = "31px";
    image[ranK].removeAttribute("onclick");
    setTimeout("chulai()", Math.random()*+);

}

//3 老鼠被打死了
function die(){
        image[ranK].src = "./images/shang.gif";
        image[ranK].removeAttribute("onclick");
        image[ranK].style.marginTop = "3px";

}
</script>

在通過設定css樣式後，就可以完美的執行了。效果圖如下。

案例六、打地鼠的小遊戲

上面的主體代碼已經完成了。接下來就添加功能。

添加功能一、記錄目前打死的老鼠數

如果想要添加計數功能，那麼在body中定義一個div塊，用來顯示目前打死多少隻老鼠的字元串。在這裡我們設定為id為score。再定義一個變量count，記錄目前打死的老鼠數。在die()函數中進行count++。

部分代碼如下：

function die(){
        image[ranK].src = "./images/shang.gif";
        image[ranK].removeAttribute("onclick");
        image[ranK].style.marginTop = "3px";
        count++;
        score.innerHTML =count;
        }

效果圖如下：

案例六、打地鼠的小遊戲

添加功能二、儲存曆史最佳紀錄

要實作儲存曆史最佳紀錄那麼要使用本地存儲localStorage對象。在這兒我們主要使用該對象的

localStorage.setItem(“鍵名”,”值”)，将值以鍵值對的形式存儲到本地。localStorage.getItem(“鍵名”)；通過鍵名獲得值。

在這裡我們隻需将利用var preScore = localStorage.getItem(“鍵名”)獲得曆史的最佳記錄，然後與目前的count進行對比，如果preScore大于目前的count，則不更新曆史最佳記錄。如果preScore小于了目前的count，那麼使preScore=count；再本輪遊戲結束後進行存儲。

添加功能三、設定倒計時器，控制遊戲結束

那麼本輪遊戲什麼時候可以結束，那麼就要設定一個計時器。在這裡我寫了一個一分鐘的倒計時器。當sencond等于0，時遊戲結束，然後再對

localStorage.setItem(“bestScore”,preScore)，進行更新。

添加功能二和三的代碼如下：

function die(){
    try{
        image[ranK].src = "./images/shang.gif";
        image[ranK].removeAttribute("onclick");
        image[ranK].style.marginTop = "3px";
        count++;
        score.innerHTML =count;

        if( count > preScore)
        {
            score1.innerHTML = count;
            preScore = count;
        }
        localStorage.setItem("bestScore",preScore);
    }catch(ex){

    }
}

//設定一個定時器
var seconds = ;
var speed = ;

function countDown(seconds,speed){
  var txt = "剩餘時間：" + ((seconds < ) ? "0" + seconds : seconds)  +"秒";
  div.innerHTML = txt;
  var timeId = setTimeout("countDown(seconds--,speed)",speed);

  //如果時間到了
  if(seconds == ){
  //對最佳記錄進行存儲，不管目前有沒有打破記錄
     localStorage.setItem("bestScore",preScore);
         clearTimeout(timeId);
           if(cover.style.display == "none"){
                cover.style.display = "block";

                //當沒有打到一隻老鼠的話顯示該資訊
       if(count === undefined)
                text.innerHTML = "目前成績為："++"分"+"<br/>"+"遊戲結束！";

    //超越了曆史記錄，此時localStorage.getItem("bestScore")儲存的值時目前的count值。顯示該資訊
     else if(count == localStorage.getItem("bestScore"))
     {
       text.innerHTML = "目前成績為："+count+"分"+"<br/>"+"恭喜您打破紀錄"+"<br/>"+"遊戲結束！";
     }
      else
         text.innerHTML = "目前成績為："+count+"分"+"<br/>"+"遊戲結束！";   
         }
      }
}

countDown(seconds,speed);

效果圖如下：

案例六、打地鼠的小遊戲

最後附上完整的源代碼

<!DOCTYPE html>
<html>
<head>
<mata charset = "utf-8" />
    <title>打地鼠</title>
    <script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
    *{
        margin: px;
        padding: px;
    }
    #background{
        background: url(./images/beijing.jpg);

    }
    h2{
            font-family: "微軟雅黑";
            font-size: px;
            padding-left: px;
       }

    table td{
         width: px;
          height: px;
        }

    img{
            margin-top: px;
        }
    #content{
           z-index: ;
            margin-left: %;
        }

     #count{
        width: px;
        height: px;
        background-color:#E8E8E8; 
        padding-left: px;
        text-align: center;
        color: red;
        font-size: px;
        line-height: px;
        font-family: "微軟雅黑";
     }

      #count .score{
        text-align: center;
        color: lightgreen;
        font-size: px;
        line-height: px;
        font-family: "微軟雅黑";
      }

      #history #id{
        text-align: center;
        color: lightgreen;
        font-size: px;
        line-height: px;
        font-family: "微軟雅黑";
      }
      #history{
        position: absolute;
        top:px;
        right:px;
        width: px;
        height: px;
        background-color: #E8E8E8;
        color: lightblue;
        font-size:px;
        line-height: px;
        text-align: center;
      }
      .clock{
        position: absolute;
        top:px;
        right:px;
        width: px;
        height: px;
        background-color: lightblue;
        color: red;
        font-size: px;
        text-align: center;
        line-height: px;
      }
      #cover{
         margin-top: px;
        position: absolute;
        z-index: ;
        width: px;
        height: px;
        top: px;   
        left: px;   
        right: px;   
        bottom: px;   
        margin: auto; 
        background :rgba(,,,);
        color: red;
        font-size: px;
        text-align: center;
        vertical-align: middle;
        }
    </style>
</head>
<body>

<div id = "content">
<h2>打地鼠</h2><br/>
<table id = "background">

    <tr>
        <td><img src="./images/keng.gif" ></td>
        <td><img src="./images/keng.gif" ></td>
        <td><img src="./images/keng.gif" ></td>
    </tr>

    <tr>
        <td><img src="./images/keng.gif" ></td>
        <td><img src="./images/keng.gif" ></td>
        <td><img src="./images/keng.gif" ></td>
    </tr>

    <tr>
        <td><img src="./images/keng.gif" ></td>
        <td><img src="./images/keng.gif" ></td>
        <td><img src="./images/keng.gif" ></td>
    </tr>
</table>
<div id = "count">目前得分 ：<span class = "score"> 0  </span>分</div>
<div id = "history">最佳記錄: <span id = "score1"> 0 </span>分</div>
<div class = "clock"></div>
</div>

<div id = "cover" style="display:none"> <span id = "text"></span></div>
<script type="text/javascript">


//1 先擷取到所有的坑(圖檔)
var content = document.getElementById('content');
var cover = document.getElementById('cover');
var image = document.getElementsByTagName('img');
var countMouse = document.getElementById('count');
var score = countMouse.querySelector(".score");
var history = document.getElementById("history");
var score1 = document.getElementById("score1");
var div = document.querySelector(".clock");
var text = document.getElementById("text");
var preScore = ;
var ranK;
var count = ;

// localStorage.removeItem("bestScore");
// localStorage.removeItem("scoreshow");

preScore = localStorage.getItem("bestScore");
console.log(preScore);
score1.innerHTML = preScore;

//讓老鼠随機出現在一個坑裡
setTimeout("chulai()",Math.random()*+);


function chulai(){
    try{
    ranK = Math.floor(Math.random() * );
    image[ranK].src = "./images/dishu.gif";
    image[ranK].style.marginTop = "0px";
    image[ranK].setAttribute("onclick","die()");
    setTimeout("paole()", Math.random()*+);
    }catch(ex){}
}
//2 老鼠回去了
function paole(){
    try{
    image[ranK].src = "./images/keng.gif";
    image[ranK].style.marginTop = "31px";
    image[ranK].removeAttribute("onclick");
    setTimeout("chulai()", Math.random()*+);
    }catch(ex){}
}
//3 老鼠被打死了

function die(){
    try{
        image[ranK].src = "./images/shang.gif";
        image[ranK].removeAttribute("onclick");
        image[ranK].style.marginTop = "3px";
        count++;
        score.innerHTML =count;

        if( count > preScore)
        {
            score1.innerHTML = count;
            preScore = count;
        }
        localStorage.setItem("bestScore",preScore);
    }catch(ex){

    }
}

//設定一個定時器
var seconds = ;
var speed = ;


function countDown(seconds,speed){
                var txt = "剩餘時間：" + ((seconds < ) ? "0" + seconds : seconds)  +"秒";
                div.innerHTML = txt;
                var timeId = setTimeout("countDown(seconds--,speed)",speed);
                if(seconds == ){
                    //localStorage.setItem("scoreshow",count);
                    localStorage.setItem("bestScore",preScore);

                        clearTimeout(timeId);
                        if(cover.style.display == "none"){
                            cover.style.display = "block";
                        if(count === undefined)
                             text.innerHTML = "目前成績為："++"分"+"<br/>"+"遊戲結束！";

                        else if(count == localStorage.getItem("bestScore")){
                             text.innerHTML = "目前成績為："+count+"分"+"<br/>"+"恭喜您打破紀錄"+"<br/>"+"遊戲結束！";
                            }
                        else
                                text.innerHTML = "目前成績為："+count+"分"+"<br/>"+"遊戲結束！";
                             }  
                    }

}

countDown(seconds,speed);

</script>
</body>
</html>

案例六、打地鼠的小遊戲

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

案例六 、打地鼠的小遊戲

繼續閱讀

案例六、打地鼠的小遊戲