上海哪家做网站,上海装修网站建设,中山外贸网站建设公司,小型人力资源公司注册文章目录 1实现效果2代码实现 1实现效果 游戏难度#xff1a;简单#xff0c;一般#xff0c;困难#xff0c;噩梦#xff08;控制setInterval的time参数#xff09; 按钮功能#xff1a;结束#xff08;可以通过修改gameScore的值来修改判定结束的分数#xff09;简单一般困难噩梦控制setInterval的time参数 按钮功能结束可以通过修改gameScore的值来修改判定结束的分数开始重开 游戏得分 2代码实现
注意路径 我的img和html文件是并列关系引入的相对路径
url(./img/xxx.jpg)资源图片 mouse.jpg bg.jpg hit.jpg hummer.png 注意注意计时器何时打开了何时需要关闭它创建的timeId从1开始之前的不关闭在创建新的时timeId是2 依次类推不及时关闭定时器可能会造成逻辑混乱。 比如在本例中在游戏执行过程中直接修改下拉框后不执行clearInterval(timeId)而是直接调用startGame(),就会创建另一个定时器此时如果达到了判输的条件执行gameOver()虽然执行了clearInterval(timeId)但是关闭的定时器是新开的那个此时的timeId值是2原来的1还存活着。但是这个结束条件依然成立scoregameScore,在第一个定时器中每次执行到gameOver()都会被触发这就是bug所以要在改变下拉框时要及时关闭第一个定时器timeId1的。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title打地鼠/titlestyle* {margin: 0;padding: 0;}body {background-color: lightblue;}.div1 {text-align: center;background-color: lightgreen;width: 100%;line-height: 50px;}.div2 {margin: 0 auto;width: 600px;height: 610px;}td {width: 200px;height: 200px;border-radius: 100px;background-image: url(./img/bg.jpg);background-size: 100% 100%;background-repeat: no-repeat;border: 1px solid #000;cursor: url(./img/hummer.png), auto;}select{text-align: center;width: 70px;height: 30px;font-family: Courier New, Courier, monospace;border-radius: 5px;}button{width: 100px;height: 30px;font-family: Courier New, Courier, monospace;border-radius: 5px;background-color: lightgray;margin-right: 30px;margin-left: 30px;}button:hover{background-color: orange;color: #fff;}span{color: red;width: 40px;height: 30px;padding-left: 10px;font-size: 20px;font-family: Courier New, Courier, monospace;display: inline-block;box-sizing: border-box;}/style
/headbodyaudio src./audio/bg.mp3 classbgMusic/audioaudio src./audio/hit.wav classhitMusic/audiodiv classdiv1游戏难度select idselectoption简单/optionoption一般/optionoption困难/optionoption噩梦/option/selectbutton idstart开始游戏/button游戏得分span idscore0/span/divdiv classdiv2tabletrtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/trtrtd/tdtd/tdtd/td/tr/table/divscript//是否开始游戏let isPlay false;let score 0;// 是否捶打let flag true;let lastIndex 0;var timeId 0;let Tid0;// 捶了是否锤中let isRightfalse;let isHitfalse;// 定时器时间let time 2000;let index 0;let gameScore -20;// 获取元素let select document.querySelector(#select);let start document.querySelector(#start);let scoreSpan document.querySelector(#score);let tds document.querySelectorAll(td);let bgMusic document.querySelector(.bgMusic);let hitMusic document.querySelector(.hitMusic);// 给开始按钮添加点击事件start.onclick function () {isPlay !isPlay;if (isPlay) {// 获取游戏难度let level select.value;clearTimeout(Tid);score 0;scoreSpan.innerHTML score;tds[lastIndex].style.backgroundImage url(./img/bg.jpg);// 设置游戏难度bgMusic.play();startGame(level);start.innerHTML 结束游戏;} else {// 结束游戏bgMusic.pause();clearInterval(timeId); // 清除定时器start.innerHTML 开始游戏;}}// 给td添加点击事件tds.forEach((td, i) {td.onclick hit.bind(null, i);})// 给下拉框添加change事件select.onchange function () {if (isPlay) {let level select.value;flag true;score 0;scoreSpan.innerHTML score;tds[lastIndex].style.backgroundImage url(./img/bg.jpg);// 清除之前开启的定时器直接切换选项之前开启的定时器还在运行所以要关闭clearInterval(timeId); startGame(level);}}function startGame(level) {if (level 简单) {time 2000;} else if (level 一般) {time 1500;} else if (level 困难) {time 1000;} else {time 800;}timeId setInterval(function () {// 在还原之前检查flag的值为false,代表上一次没有落捶if (flag false) {score - 5;scoreSpan.innerHTML score;}// 开始新的出现位置锤击状态置为未锤击flag false;isRightfalse;isHitfalse;gameOver(score);// 将上一次的改回原背景tds[lastIndex].style.backgroundImage url(./img/bg.jpg);// 随机获取一个索引if (isPlay) {index Math.floor(Math.random() * tds.length);;}// 给当前的索引添加样式tds[index].style.backgroundImage url(./img/mouse.jpg);lastIndex index;}, time);}// TODO: 游戏是否击中的判断逻辑需要完善function hit(i) {// 游戏开始时锤击才有效if (isPlay) {hitMusic.play();// 锤击的td和随机产生的td索引一致只第一次捶中有效锤击地鼠出现位置if (i lastIndex!isRight) {isRighttrue;score 3;// 改变背景tds[i].style.backgroundImage url(./img/hit.jpg)} else if(!isHit){// 捶错地方,只第一次捶错有效score - 5;gameOver(score);}scoreSpan.innerHTML score;flag true;isHittrue;}}// 游戏结束function gameOver(score) {if (score gameScore) {// 清楚当前的计时器idclearInterval(timeId);scoreSpan.innerHTML score;isPlay false;flag true;start.innerHTML 重新开始;Tid setTimeout(() {alert(游戏结束得分 score);}, 300);}}/script
/body/html
