이 글에서는 두더지 잡기 게임을 구현하기 위한 js의 샘플 코드를 주로 공유합니다. 참조 값이 매우 좋습니다. 아래 편집기로 살펴보겠습니다.
더 이상 고민하지 말고 코드를 살펴보세요.
<!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> <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>
프로세스 설계:
게임을 시작하려면 "게임 시작" 버튼을 클릭하세요. 그렇지 않으면 "게임을 시작하려면 클릭하세요"라는 메시지가 표시됩니다.
점수, 적중률 표시가 "0"으로 재설정되고 카운트다운이 시작됩니다(기본값은 30초)
마우스 사진이 계속 표시되고 숨겨지며 플레이어는 클릭할 수 있습니다. 마우스 왼쪽 버튼으로 게임 진행
30초 카운트다운이 종료되거나 플레이어가 적극적으로 "종료 버튼"을 클릭하면 게임이 종료되고 게임 결과가 표시됩니다
[관련 추천]
php.cn 원본 html5 동영상 튜토리얼위 내용은 html+js를 사용하여 두더지 잡기 게임을 구현하기 위한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!