DOM案例-锅打灰太郎

查看效果

逐行代码注释如下：

<!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(){// 将分值设置为0score.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 visibleif(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"){// 灰太狼加10score.innerHTML = score.innerHTML/1+10;}else{// 小灰灰减10score.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

DOM案例-锅打灰太郎相关推荐

jQuery小游戏之锅打灰太郎
HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
平淡生活：喜羊羊和灰太郎获奖了
今天才知道,原来我一直很喜欢看的"喜羊羊和灰太郎"获国产动画片一等奖了,这可是国家动画最高奖哦,如果哪天谁能送给我这个,嘿嘿,会比今天更高兴叻! 喜羊羊,美羊羊,懒羊羊,沸羊羊, ...
周末带女儿看《喜羊羊与灰太郎之虎虎生威》的一点点感触
那就是"业精于专,功于勤". 整个动画片,最终解决战斗的,是[红太郎]的[平底锅]. 而红太郎,能在极高速度,极远距离准确命中[灰太郎]的原因,就是每天都要修炼N+1次[平底锅大法 ...
晨之替——谷川俊太郎
朝のリレー --谷川俊太郎カムチャツカの若者(わかもの)がきりんの夢(ゆめ)を見(み)ているときメキシコの娘(むすめ)は朝(あさ)もやの中(なか)でバスを待(ま)っているニューヨーク ...
storm人偶_STORM TOYS 真人快打系列 MOTARO 茂太郎可动人偶
分享到: QQ空间新浪微博腾讯微博微信更多比例: - 截单日期: 2020年8月27日参考售价: 772元立即订购>> 全高: 约24厘米预计到货: 2020年11月茂太 ...
「JOISC 2018 Day 3」比太郎的聚会
「JOISC 2018 Day 3」比太郎的聚会题意: 给你一个\(DAG\),若干组询问,每次给出一个终点和若干个点,问从给出点以外的点出发,到达终点的最长路.(\(|V|\leq 1e5 | ...
精彩生活：日系景太郎的故事
故事从男主角浦岛景太郎第三次考大学落榜开始,直接就让本来抱有"美少年至高论"的女性观众出局,失去了继续观赏这部动画的兴趣--没有流川枫,也没有阿斯兰,就连卡卡西都没有,单靠&quo ...
▷Scratch课堂丨【经典游戏系列】打地鼠1.3 - 地鼠太郎之毁灭之锤
授权转载 | Geekid 原文作者 | Mr.炎原文标题 | 游戏丨打地鼠1.3-地鼠太郎之毁灭之锤标签:难度中级:适合年龄段:8+: Scratch介绍 Scratch融合卡通.动画.音效等多 ...
DOM案例练习-推荐几个DOM小案例练习有示例代码
文章目录案例一: 轮播消息提示案例二: 关闭删除消息案例三: 侧边栏的展示案例四: 登录框的实现案例五: 王者的轮播图案例六: 书籍的购物车案例一: 轮播消息提示说明: 做一个消息提示 ...

DOM案例-锅打灰太郎

DOM案例-锅打灰太郎相关推荐

最新文章

热门文章