当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js实现打地鼠小游戏

js实现打地鼠小游戏

2019年03月26日  | 移动技术网IT编程  | 我要评论

鲁思屋,探囊取物的主人公是谁,康熙的狂宠逃妃

话不多说，请看代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打地鼠</title>
 <style type="text/css">
 #content {
 width:960px;
 margin:0 auto;
 text-align:center;
 margin-top:40px;
 }
 #form1 {
 margin:20px 0;
 }
 table {
 margin:0 auto;
 cursor:url(http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png),auto;
 }
 td {
 width:95px;
 height:95px;
 background:#00ff33;
 }
 </style>
 <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("游戏结束！\n 你获得的分数为："+score+"\n 命中率为："+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="http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png">';
 settimeout("document.getelementbyid('td["+current+"]').innerhtml=''",3000); //使用 settimeout()实现3秒后隐藏老鼠图片
 }
 }
 //清除所有老鼠图片
 function clearmouse(){
 for(var i=0;i<25;i++){
 document.getelementbyid("td["+i+"]").innerhtml="";
 }
 }
 //点击事件函数，判断是否点中老鼠
 function hit(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;
 }
 }
 }
 //游戏开始
 function gamestart(){
 playing = true;
 interid = setinterval("show()",1000); 
 document.form1.score.value = score;
 document.form1.success.value = success;
 timeshow();
 } 
 </script>
</head>
<body>
 <div id="content">
 <input type="button" value="开始游戏" onclick="gamestart()" />
 <input type="button" value="结束游戏" onclick="gameover()" />
 <form name="form1" id="form1">
  <label>分数：</label>
  <input type="text" name="score" size="5">
  <label>命中率：</label>
  <input type="text" name="success" size="10">
  <label>倒计时：</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>
 </div>
</body>
</html>

流程设计：

  • 点击“开始游戏”按钮游戏开始，否则将提示“请点击开始游戏”字样
  • 分数、命中率显示重置为“0”，倒计时开始（默认为30秒）
  • 老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏
  • 当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果

实例中用到的

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网