js实现打地鼠小游戏
话不多说,请看代码:
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>打地鼠</title> <styletype="text/css"> #content{ width:960px; margin:0auto; text-align:center; margin-top:40px; } #form1{ margin:20px0; } table{ margin:0auto; cursor:url(http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png),auto; } td{ width:95px; height:95px; background:#00ff33; } </style> <scripttype="text/javascript"> vartd=newArray(),//保存每个格子的地鼠 playing=false,//游戏是否开始 score=0,//分数 beat=0,//鼠标点击次数 success=0,//命中率 knock=0,//鼠标点中老鼠图片的次数 countDown=30,//倒计时 interId=null,//指定setInterval()的变量 timeId=null;//指定setTimeout()的变量 //游戏结束 functionGameOver(){ timeStop(); playing=false; clearMouse(); alert("游戏结束!\n你获得的分数为:"+score+"\n命中率为:"+success); success=0; score=0; knock=0; beat=0; countDown=30; } //显示当前倒计时所剩时间 functiontimeShow(){ document.form1.remtime.value=countDown; if(countDown==0){ GameOver(); return; }else{ countDown=countDown-1; timeId=setTimeout("timeShow()",1000); } } //主动停止所有计时 functiontimeStop(){ clearInterval(interId); clearTimeout(timeId); } //随机循环显示老鼠图片 functionshow(){ if(playing){ varcurrent=Math.floor(Math.random()*25); document.getElementById("td["+current+"]").innerHTML='<imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png">'; setTimeout("document.getElementById('td["+current+"]').innerHtml=''",3000);//使用setTimeout()实现3秒后隐藏老鼠图片 } } //清除所有老鼠图片 functionclearMouse(){ for(vari=0;i<25;i++){ document.getElementById("td["+i+"]").innerHTML=""; } } //点击事件函数,判断是否点中老鼠 functionhit(id){ if(playing==false){ alert("请点击开始游戏!"); return; }else{ beat+=1; if(document.getElementById("td["+id+"]").innerHTML!=""){ score+=1; knock+=1; success=knock/beat; document.form1.success.value=success; document.form1.score.value=score; document.getElementById("td["+id+"]").innerHTML=""; }else{ score+=-1; success=knock/beat; document.form1.success.value=success; document.form1.score.value=score; } } } //游戏开始 functionGameStart(){ playing=true; interId=setInterval("show()",1000); document.form1.score.value=score; document.form1.success.value=success; timeShow(); } </script> </head> <body> <divid="content"> <inputtype="button"value="开始游戏"onclick="GameStart()"/> <inputtype="button"value="结束游戏"onclick="GameOver()"/> <formname="form1"id="form1"> <label>分数:</label> <inputtype="text"name="score"size="5"> <label>命中率:</label> <inputtype="text"name="success"size="10"> <label>倒计时:</label> <inputtype="text"name="remtime"size="5"> </form> <table> <tr> <tdid="td[0]"onclick="hit(0)"></td> <tdid="td[1]"onclick="hit(1)"></td> <tdid="td[2]"onclick="hit(2)"></td> <tdid="td[3]"onclick="hit(3)"></td> <tdid="td[4]"onclick="hit(4)"></td> </tr> <tr> <tdid="td[5]"onclick="hit(5)"></td> <tdid="td[6]"onclick="hit(6)"></td> <tdid="td[7]"onclick="hit(7)"></td> <tdid="td[8]"onclick="hit(8)"></td> <tdid="td[9]"onclick="hit(9)"></td> </tr> <tr> <tdid="td[10]"onclick="hit(10)"></td> <tdid="td[11]"onclick="hit(11)"></td> <tdid="td[12]"onclick="hit(12)"></td> <tdid="td[13]"onclick="hit(13)"></td> <tdid="td[14]"onclick="hit(14)"></td> </tr> <tr> <tdid="td[15]"onclick="hit(15)"></td> <tdid="td[16]"onclick="hit(16)"></td> <tdid="td[17]"onclick="hit(17)"></td> <tdid="td[18]"onclick="hit(18)"></td> <tdid="td[19]"onclick="hit(19)"></td> </tr> <tr> <tdid="td[20]"onclick="hit(20)"></td> <tdid="td[21]"onclick="hit(21)"></td> <tdid="td[22]"onclick="hit(22)"></td> <tdid="td[23]"onclick="hit(23)"></td> <tdid="td[24]"onclick="hit(24)"></td> </tr> </table> </div> </body> </html>
流程设计:
- 点击“开始游戏”按钮游戏开始,否则将提示“请点击开始游戏”字样
- 分数、命中率显示重置为“0”,倒计时开始(默认为30秒)
- 老鼠图片不断显示、隐藏,玩家可点击鼠标左键进行游戏
- 当30秒倒计时结束或者玩家主动点击“结束按钮”时,游戏结束并显示游戏结果
实例中用到的图片附件下载
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!