-
逐行代码注释如下：
<!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