Teilen Sie einen Beispielcode für HTML+JS, um das Whack-a-Mole-Spiel zu implementieren-HTML-Tutorial-php.cn

Teilen Sie einen Beispielcode für HTML+JS, um das Whack-a-Mole-Spiel zu implementieren

零下一度

Freigeben： 2017-05-08 11:37:50

Original

7284 Leute haben es durchsucht

Dieser Artikel enthält hauptsächlich den Beispielcode von js zur Implementierung des Whack-a-Mole-Spiels. Es hat einen sehr guten Referenzwert, schauen wir es uns mit dem Editor unten an

Schauen Sie sich ohne weitere Umschweife den Code an:

<!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 = &#39;<img src="http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png">&#39;;
 setTimeout("document.getElementById(&#39;td["+current+"]&#39;).innerHtml=&#39;&#39;",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>
 <p 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>
 </p>
</body>
</html>

Nach dem Login kopieren

Prozessdesign:

Klicken Sie auf die Schaltfläche „Spiel starten“ , um das Spiel zu starten. Andernfalls wird die Meldung „Bitte klicken, um das Spiel zu starten“ angezeigt
Ergebnis, Die Trefferquotenanzeige wird auf „0“ zurückgesetzt und der Countdown beginnt (Standard ist 30 Sekunden)
Mausbilder werden ständig angezeigt und ausgeblendet Klicken Sie mit der linken Maustaste, um das Spiel zu spielen
Wenn der 30-Sekunden-Countdown endet oder der Spieler aktiv auf die Schaltfläche „Ende“ klickt, endet das Spiel und die Spielergebnisse werden angezeigt

[Verwandte Empfehlungen]

Kostenloses HTML-Online-Video-Tutorial

php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode für HTML+JS, um das Whack-a-Mole-Spiel zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!