小游戏-打地鼠(js版)

最新推荐文章于 2023-11-12 22:10:45 发布

fanyuenan

最新推荐文章于 2023-11-12 22:10:45 发布

阅读量1.3k

点赞数

分类专栏： web前端

web前端专栏收录该内容

32 篇文章

订阅专栏

<!doctype html>

<html>

<head>

<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 = new Array(), //保存每个格子的地鼠

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= '<img src="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">

</form>

<table>

<tr>

<tdid="td[0]" οnclick="hit(0)"></td>

<tdid="td[3]" οnclick="hit(3)"></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

需要web前端课程工具和电子书，可以加: 33群105601600; 22群120342833

【内容展示有限，可以加群下载，群文件会定期更新学习资料，以及练手小案例】