-
逐行代碼註釋如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鍋打灰太郎-前端貓</title> <style> *{ padding:0; margin:0; } #app { position: relative; width: 320px; height: 480px; background:url("./img/game_bg.jpg"); margin:0 auto; } .btn{ position: absolute; top:200px; left:50%; font-size:40px; cursor: pointer; transform: translateX(-50%); color:white; } .btn:hover{ color:red; } /*進度條*/ #progress{ position: absolute; left:63px; top:66px; width: 180px; height: 16px; background:url("./img/progress.png"); } /*狼圖片定位*/ #wolf img{ position: absolute; } #score{ position: absolute; left:60px; top:10px; font-size: 20px; color:skyblue; } </style> </head> <body> <div id="app"> <!-- 進度條 --> <div id="progress"></div> <!-- 灰太狼或小灰灰 --> <div id="wolf"></div> <div id="score">0</div> <!-- 開始按鈕 --> <div class="btn" id="start">開始</div> <!-- 繼續按鈕 --> <div class="btn" id="continue">繼續</div> </div> </body> <script> // 僞代碼： // 當用戶將瀏覽器最小化，或重新打開一個視口，遊戲應該中止， // 當用戶再次進入遊戲時，需要點擊繼續纔可以。 // 當遊戲開始後，監聽用戶的行爲：是否離開當前頁面。 // 如果離開需要讓遊戲暫停 // 1- 將倒計時與狼動畫定時器移除 // 2- 顯示 繼續 按鈕 // 3- 點擊繼續，可以繼續玩。 // 3-1: 將倒計時與狼動畫的定時器添加上 // 3-2: 繼續按鈕隱藏掉。 // 當遊戲結束（時間到了）之後，記得清理監聽離開事件 // 獲得點擊按鈕 var startBtn = document.querySelector("#start"); // 分數 var score = document.querySelector("#score"); // 得到進度條 var progress = document.querySelector("#progress"); // 得到包裹狼圖片的元素 var wolfBox = document.querySelector("#wolf"); // 繼續按鈕 var continueBtn = document.querySelector("#continue"); continueBtn.style.display = "none";// 隱藏繼續按鈕 // 存儲倒計時定時器返回的值 var countTime; // 狼出現在洞口的定位下標 var wolfStartArr = [ {left: "98px", top: "115px"}, {left: "17px", top: "160px"}, {left: "15px", top: "220px"}, {left: "30px", top: "293px"}, {left: "122px", top: "273px"}, {left: "207px", top: "295px"}, {left: "200px", top: "211px"}, {left: "187px", top: "141px"}, {left: "100px", top: "191px"} ]; // 創建一個圖片元素,狼 var wolfImg = document.createElement("img"); // 爲繼續按鈕增加事件 continueBtn.onclick = function(){ // 計時器 countTime = setInterval(countDown,10); // 創建狼的動畫定時器 wolfImg.timer = setInterval(wolfMove,200); // 隱藏繼續按鈕 this.style.display = "none"; } // 爲按鈕增加事件 startBtn.onclick = function(){ // 將分值設置爲0 score.innerHTML = 0; // 將時間進度條寬度設置爲180px; progress.style.width = "180px"; // 隱藏開始按鈕 this.style.display = "none"; // 通過定時器控制進度條的寬度 countTime = setInterval(countDown,10); // 調用產生狼的方法 createWolf(); // 判斷用戶是否離開 當前頁面 document.onvisibilitychange = function(){ // 如果離開或進入到該頁面會觸發該函數。 // hidden:離開 visible進入。 // console.log(document.visibilityState);// hidden visible if(document.visibilityState === "hidden"){ // 離開 // 1- 將倒計時與狼動畫計時器移除 // 2- 顯示 繼續 按鈕 clearInterval(countTime); clearInterval(wolfImg.timer); continueBtn.style.display = "block"; } } } // 爲狼增加點擊事件 wolfImg.onclick = function(){ this.state = 3;// 將動畫的狀態設置爲3，說明鍋打 this.index = 5; if(this.wolfType === "h"){ // 灰太狼加10 score.innerHTML = score.innerHTML/1+10; }else{ // 小灰灰減10 score.innerHTML = score.innerHTML/1-10; } } // 去除選中的默認行爲 document.onmousedown = function (e){ e.preventDefault(); } // 倒計時 function countDown(){ // 每秒鐘需要將進度條的寬度進行減法運行 progress.style.width = (progress.getBoundingClientRect().width-0.3)+"px"; // 判斷是否倒計時結束 if(progress.getBoundingClientRect().width-0.3 <= 0){ document.onvisibilitychange = null; // 清除定時器 clearInterval(countTime); // 清除狼動畫 clearInterval(wolfImg.timer); // 清除狼圖片 wolfBox.removeChild(wolfImg); // 顯示按鈕，並將按鈕的文字修改爲重新開始 startBtn.innerHTML = "重新開始"; startBtn.style.display = "block"; console.log("遊戲結束") } } // 讓狼出現 function createWolf(){ // 獲得狼出現洞穴的位置 var wolfStart = wolfStartArr[getRandom(0,8)]; // 左 wolfImg.style.left = wolfStart.left; // 上 wolfImg.style.top = wolfStart.top; // 通過隨機函數生成1---100 數字，如果得到的數字<=80認爲是灰太狼，否則是小灰灰 wolfImg.wolfType = getRandom(1,100)<=80?"h":"x"; // 指定初始圖片位置 wolfImg.index = 0; // 指定圖片的狀態 1- 出洞 2-回洞 3- 鍋打 wolfImg.state = 1; // 指定具體圖片: 狼的類型+圖片下標 wolfImg.src = "./img/"+(wolfImg.wolfType+wolfImg.index)+".png"; // 將圖片放置到指定的位置 wolfBox.appendChild(wolfImg); // 播放動畫 wolfImg.timer = setInterval(wolfMove,200); } // 狼進行移動，播放動畫 function wolfMove(){ // 出洞 if(wolfImg.state === 1){ wolfImg.index++; // 當下標如果等於5，那麼應該回洞 if(wolfImg.index === 5) wolfImg.state = 2; }else if(wolfImg.state === 2){ wolfImg.index--; }else if(wolfImg.state === 3){ wolfImg.index++; } // 已經回洞了 if(wolfImg.index<0 || wolfImg.index>9){ // 清除定時器 clearInterval(wolfImg.timer); // 將狼從wolfBox中移除。（注意：只是從容器中移除了） wolfBox.removeChild(wolfImg); createWolf(); return; } wolfImg.src = "./img/"+(wolfImg.wolfType+wolfImg.index)+".png" } // 生成兩個數之間的隨機數字 function getRandom(min,max){ return Math.floor(Math.random()*(max-min+1)+min); } </script> </html> 下載鏈接：https://pan.baidu.com/s/18RnubtDDgznJODOzdhjJXA
提取碼：duan