您的位置：首页 > Web前端 > JavaScript

javascript写打地鼠

2017-08-08 16:58 148 查看
打地鼠游戏有两个比较重要的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;
}
//显示当前
4000
倒计时所剩时间
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航