溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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(https://cache.yisu.com/upload/information/20200622/114/77269.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="https://cache.yisu.com/upload/information/20200622/114/77270.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秒倒計時結束或者玩家主動點擊“結束按鈕”時，游戲結束并顯示游戲結果
實例中用到的圖片附件下載
關于“js實現如何打地鼠小游戲”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
