實作2
廖姸惁
目錄
程式碼
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>打地鼠</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>打地鼠遊戲</h1>
<p>分數：<span id="score">0</span></p>
<p>時間：<span id="time">30</span> 秒</p>
<div id="game">
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
<div class="hole"></div>
</div>
<button onclick="startGame()">開始遊戲</button>
<script src="script.js"></script>
</body>
</html>body {
text-align: center;
font-family: sans-serif;
background-color: rgb(243, 235, 162);
}
#game {
width: 300px;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.hole {
width: 80px;
height: 80px;
background-color: #63c1ce;
cursor: pointer;
}
.mole {
background-color: rgb(42, 95, 165);
}let holes = document.querySelectorAll(".hole");
let score = 0;
let time = 30;
let timer;
let moleTimer;
let isPlaying = false; // ⭐ 新增
function startGame() {
score = 0;
time = 30;
isPlaying = true; // ⭐ 開始遊戲
document.getElementById("score").textContent = score;
document.getElementById("time").textContent = time;
clearInterval(timer); // ⭐ 防止重複計時
clearInterval(moleTimer); // ⭐ 防止重複地鼠
timer = setInterval(countDown, 1000);
moleTimer = setInterval(showMole, 500);
}
function countDown() {
if (!isPlaying) return; // ⭐ 保護
time--;
document.getElementById("time").textContent = time;
if (time <= 0) {
isPlaying = false; // ⭐ 關閉遊戲
clearInterval(timer);
clearInterval(moleTimer);
alert("遊戲結束！分數：" + score);
}
}
function showMole() {
if (!isPlaying) return; // ⭐ 保護
holes.forEach(h => h.classList.remove("mole"));
let random = Math.floor(Math.random() * 9);
holes[random].classList.add("mole");
}
holes.forEach(hole => {
hole.addEventListener("click", function () {
if (!isPlaying) return; // ⭐ 遊戲結束不能點
if (this.classList.contains("mole")) {
score++;
document.getElementById("score").textContent = score;
this.classList.remove("mole");
}
});
});HTML
CSS
JS
JS
變數
let holes = document.querySelectorAll(".hole");
let score = 0;
let time = 30;
let timer;
let moleTimer;
let isPlaying = false;holes : 抓全部格子（九宮格）
score : 分數（從0開始）
time : 時間（30秒）
timer : 記錄倒數計時器
moleTimer : 記錄地鼠出現計時器
isPlaying : 遊戲有沒有在進行（開關）
開始遊戲
function startGame() { //重置遊戲
score = 0; //分數歸零
time = 30; //時間回到30
isPlaying = true; //遊戲開始
document.getElementById("score").textContent = score;
document.getElementById("time").textContent = time;
//把分數、時間顯示在網頁上
clearInterval(timer);
clearInterval(moleTimer);
//清掉舊的計時器 避免按兩次開始 速度變快
timer = setInterval(countDown, 1000);
moleTimer = setInterval(showMole, 500);
/*每 1 秒 → 執行 countDown
每 0.5 秒 → 執行 showMole*/
}倒數計時
function countDown() {
if (!isPlaying) return; //如果遊戲結束 → 直接停止
time--; //時間 -1 秒
document.getElementById("time").textContent = time; //更新畫面上的時間
if (time <= 0) {
isPlaying = false; //如果時間到就停止遊戲
clearInterval(timer);
clearInterval(moleTimer);
//停止所有計時器
alert("遊戲結束！分數：" + score); //跳出分數
}
}地鼠出現
function showMole() {
if (!isPlaying) return; //沒在玩就不動
holes.forEach(h => h.classList.remove("mole")); //先把全部地鼠清掉
let random = Math.floor(Math.random() * 9); //隨機選一個位置（0~8）
holes[random].classList.add("mole"); //在那個格子放地鼠
}點擊事件（打地鼠）
holes.forEach(hole => {
hole.addEventListener("click", function () { //每個格子都可以被點
if (!isPlaying) return; //遊戲結束不能點
if (this.classList.contains("mole")) { //判斷這個是不是地鼠
score++; //分數 +1
document.getElementById("score").textContent = score; //更新畫面分數
this.classList.remove("mole"); //打掉地鼠（消失）
}
});
});創造/改變
創造/改變
可以從什麼方面下手 : (舉例)
- 地鼠變快
- 分數+2
- 換顏色
- 改成圖片
- 增加難度(改成16宮格)
地鼠變快
moleTimer = setInterval(showMole, 500);moleTimer = setInterval(showMole, 300);分數+2
score++;score += 2;換顏色
.mole {
background-color: brown;
}.mole {
background-color: blue;
}改成圖片
.mole {
background-image: url("mole.png");
background-size: cover;
}- 圖片(要放同資料夾)
- 網址
增加難度(改成16宮格)
第一步 : html
將hole複製至16行
第二步 : css
改 4 欄
grid-template-columns: repeat(4, 1fr);第三步 : js
改隨機範圍
Math.floor(Math.random() * 16);Kahoot!
THANKS
Minimal
By ys
Minimal
- 61
