javascript写打地鼠

打地鼠游戏有两个比较重要的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

javascript写打地鼠相关推荐

JavaScript写贪吃蛇游戏，代码思路都有，想学的自己看
JavaScript写一个贪吃蛇的游戏(附源码) javascript群内每日课题-今日课题:JavaScript写一个贪吃蛇的游戏 PS:最近群内很多伙伴想要做游戏学学,练练自己的JavaScrip ...
【译】用JavaScript写一个区块链
原文:Writing a tiny blockchain in JavaScript 作者:Savjee.be 译者:JeLewine 几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数 ...
JavaScript写一个虚拟软键盘，可拼音输入
在某些业务场景中,无法使用外接实体键盘,也不方便调出windows自带的虚拟键盘,这时候我们可以利用JavaScript写一个虚拟键盘,实现点击输入框即可唤醒,大小写中.英文及数字的输入.可满足实际使 ...
自己用JavaScript写出吉他和弦图生成器
前言:因为自己有个设计衣服的想法,但网络搜到的和弦图都太模糊,也对市场上的和弦图生成器不太清楚,于是,用自己所学,使用JavaScript写出和弦图和弦图画起来也是比较简单的,分析一下,就是横竖线, ...
用html css JavaScript写一个功能全面的王者荣耀轮播图（仿淘宝京东轮播图）通俗易懂
首先分析一下案例需求: 1.鼠标经过就显示隐藏左右按钮 2.动态生成小圆圈有几张图片,就生成几个小圆圈 3.点击小圆圈,移动图片当然移动的是 ul(大盒子) 4.点击左右按钮, 图片滚动 ...
弹力细胞，一个由JavaScript写的网页小游戏
弹力细胞 (BounceCell) 一个由JavaScript写的网页小游戏作为大一菜鸟,这是我第一次比较正式的写文章 [害臊] 游戏玩法通过鼠标或触屏控制屏幕底部的滑动弹板将发射的小球反弹出去撞 ...
php开发俄罗斯方块,用JavaScript写一个俄罗斯方块
曾经用 Turbo C++ 3.0 写过 DOS 下的俄罗斯方块,不久之后又用 VB 写了另一个版本.这次决定用 JavaScript 再写一个并非完全心血来潮,从技术上来说,主要是想尝试使用 web ...
jsemu - 用 JavaScript 写成的模拟器大集合
转载地址:https://juejin.im/entry/564ad56b60b2260e5ba13612 原文链接:https://github.com/BigEd/jsemu 一个大大的列表,全部 ...
用JavaScript写一个正则表达式测试工具
用JavaScript写一个正则表达式测试工具 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...

javascript写打地鼠

javascript写打地鼠相关推荐

最新文章

热门文章