javascript写打地鼠

来源：互联网发布：公交线路优化调整方案编辑：程序博客网时间：2024/05/01 23:16

打地鼠游戏有两个比较重要的js函数：setTimeout()和setInterval(),setTimeout()用于在指定毫秒后调用函数或者计算表达式，但是只执行一次，可通过创建一个函数循环重复调用setTimeout()，如本例中的timeShow(),通过clearTimeout()函数来立即终止setTimeout()方法。setInterval()函数可按照指定周期(毫秒)来调用函数或者表达式，立即终止用clearInterval()方法。

<!DOCTYPE html><html><head><title>Hit Mouse</title><meta http-equiv="Content-Type" content="text/html"; charset=utf-8/><style type="text/css">#content{width:960px;margin:0 auto;text-align: center;}table{margin:0 auto;}table:hover{cursor:url('./img/hammer.jpg'),auto;}td{width:95px;height:95px;background-color:#00ff33;}</style></head><body><div id="content"><input type="button" value="start" onclick="GameStart()"><input type="button" value="end" onclick="GameOver()"><form name="form1"><label>score:</label><input type="text" name="score" size="5"><label>hit rate:</label><input type="text" name="success" size="10"><label>count down:</label><input type="text" name="remtime" size="5"></form><table><tr><td id="td[0]" onclick="hit(0)"></td><td id="td[1]" onclick="hit(1)"></td><td id="td[2]" onclick="hit(2)"></td><td id="td[3]" onclick="hit(3)"></td><td id="td[4]" onclick="hit(4)"></td></tr><tr><td id="td[5]" onclick="hit(5)"></td><td id="td[6]" onclick="hit(6)"></td><td id="td[7]" onclick="hit(7)"></td><td id="td[8]" onclick="hit(8)"></td><td id="td[9]" onclick="hit(9)"></td></tr><tr><td id="td[10]" onclick="hit(10)"></td><td id="td[11]" onclick="hit(11)"></td><td id="td[12]" onclick="hit(12)"></td><td id="td[13]" onclick="hit(13)"></td><td id="td[14]" onclick="hit(14)"></td></tr><tr><td id="td[15]" onclick="hit(15)"></td><td id="td[16]" onclick="hit(16)"></td><td id="td[17]" onclick="hit(17)"></td><td id="td[18]" onclick="hit(18)"></td><td id="td[19]" onclick="hit(19)"></td></tr><tr><td id="td[20]" onclick="hit(20)"></td><td id="td[21]" onclick="hit(21)"></td><td id="td[22]" onclick="hit(22)"></td><td id="td[23]" onclick="hit(23)"></td><td id="td[24]" onclick="hit(24)"></td></tr></table></body><script type="text/javascript">var td=new Array(),//保存每个格子的地鼠playing=false,//游戏是否开始score=0,//分数beat=0,//鼠标点击次数success=0,//命中率knock=0,//鼠标点中老鼠图片次数countDown=30,//倒计时interId=null,//指定setInterval()的变量timeId=null;//指定setTimeout()的变量//游戏结束function GameOver(){timeStop();playing=false;clearMouse();alert("GameOver\nYour score:"+score+"\nhit rate:"+success);success=0;score=0;knock=0;beat=0;countDown=30;}//显示当前倒计时所剩时间function timeShow(){document.form1.remtime.value=countDown;if(countDown==0){GameOver();return;}else{countDown=countDown-1;timeId=setTimeout("timeShow()",1000);}}//主动停止所有计时function timeStop(){clearInterval(interId);clearTimeout(timeId);}//循环显示老鼠图片function show(){if(playing){var current=Math.floor(Math.random()*25);document.getElementById("td["+current+"]").innerHTML='<img src="./img/mouse.jpg">';//使用setTimeout()实现3秒后隐藏老鼠图片setTimeout("document.getElementById('td["+current+"]').innerHTML=''",3000);}}//清除所有老鼠图片function clearMouse(){for(var i=0;i<24;i++){document.getElementById("td["+i+"]").innerHtml="";}}//点击事件函数，判断是否点中老鼠function hit(id){if(playing==false){alert("please press start");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;}}}//游戏开始function GameStart(){playing=true;interId=setInterval("show()",1000);document.form1.score.value=score;document.form1.success.value=success;timeShow();}</script></html>

转载：前端乱炖

链接：http://www.html-js.com/article/2663

阅读全文

0 0