介绍
在这个项目中，你将学习如何使用 HTML、CSS 和 JavaScript 创建一个打地鼠游戏。该游戏要求在规定时间内击打从洞中随机出现的地鼠。你将创建必要的 HTML、CSS 和 JavaScript 文件，并逐步实现游戏逻辑。
👀 预览
🎯 任务
在这个项目中，你将学习：
- 如何为打地鼠游戏设置项目文件
- 如何添加必要的 CSS 样式来创建游戏布局和设计
- 如何实现使地鼠出现和消失、计分以及计时的游戏逻辑
- 如何为击打地鼠和开始游戏创建事件监听器
🏆 成果
完成这个项目后，你将能够：
- 为基于网页的游戏创建 HTML、CSS 和 JavaScript 文件
- 使用 CSS 对游戏元素进行样式设置和布局
- 使用 JavaScript 操作 DOM 使游戏元素出现和消失
- 处理用户交互并更新游戏状态
- 使用 JavaScript 中的定时器来跟踪时间并控制游戏流程
创建项目文件
首先，让我们为打地鼠游戏创建项目文件。
- 使用
cd命令进入~/project目录。 - 创建一个名为
index.html的新文件。 - 将以下代码复制并粘贴到
index.html中：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>打地鼠！</title>
</head>
<body
class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 flex items-center justify-center h-screen"
>
<div class="game bg-white p-8 rounded-lg shadow-2xl text-center">
<h1 class="text-4xl font-bold mb-4 text-red-600">打地鼠！</h1>
<p class="score text-2xl text-red-600">得分：<span id="score">0</span></p>
<p class="time text-2xl text-red-600">
剩余时间：<span id="time">0</span>
</p>
<button
id="startBtn"
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-4 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"
>
开始游戏
</button>
<div id="grid" class="grid grid-cols-3 gap-4 mt-4">
<!-- 地洞将在此处添加 -->
</div>
</div>
<script src="main.js"></script>
</body>
</html>
添加 CSS 样式
- 创建一个名为
styles.css的新文件。 - 将以下代码复制并粘贴到
styles.css中：
.game {
width: 600px;
border-radius: 2rem;
}
.hole {
height: 0;
padding-bottom: 100%;
position: relative;
background: #eee;
border: 3px solid #ccc;
border-radius: 50%;
overflow: hidden;
}
.mole {
width: 100%;
height: 100%;
background: #a0522d;
border-radius: 50%;
position: absolute;
transform: translateY(100%);
transition: transform 0.3s;
}
.mole.up {
transform: translateY(0);
}
.mole.whacked {
background: #008cff;
}
#startBtn {
background-color: #0051ff;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
#startBtn:hover {
background-color: #028a5f;
}
添加游戏逻辑
- 创建一个名为
main.js的新文件。 - 我们将在后续步骤中添加 JavaScript 代码。
现在，让我们将游戏逻辑添加到 main.js 文件中。
- 打开
main.js文件。 - 将以下代码复制并粘贴到
main.js中：
const grid = document.querySelector("#grid");
const scoreDisplay = document.querySelector("#score");
const timeDisplay = document.querySelector("#time");
const startBtn = document.querySelector("#startBtn");
let holes = [];
let score = 0;
let lastHole;
let timeUp = false;
let gameTimer;
let countdownTimer;
let countdown;
function createHoles() {
for (let i = 0; i < 6; i++) {
const hole = document.createElement("div");
const mole = document.createElement("div");
hole.classList.add("hole");
mole.classList.add("mole");
hole.appendChild(mole);
grid.appendChild(hole);
holes.push(hole);
}
}
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes) {
const idx = Math.floor(Math.random() * holes.length);
const hole = holes[idx];
if (hole === lastHole) {
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep() {
// 待办事项：在步骤 3 中实现此函数。
}
function startGame() {
// 待办事项：在步骤 4 中实现此函数。
}
function whack(e) {
// 待办事项：在步骤 5 中实现此函数。
}
createHoles();
// 待办事项：在步骤 6 中实现其余代码。
这段代码定义了一些变量来存储对各种 HTML 元素的引用，并初始化了其他必要的变量。它还定义了几个函数，用于创建洞、生成随机时间和洞、让地鼠出现和消失、开始游戏以及处理击打地鼠的操作。最后，它创建了洞，为洞添加了事件监听器，并设置了开始按钮的点击事件监听器。
实现窥视函数
在这一步中，我们将实现 peep 函数，该函数用于让地鼠随机出现和消失。
- 打开
main.js文件。 - 找到
peep函数。 - 将现有代码替换为以下代码：
function peep() {
const time = randomTime(200, 1000);
const hole = randomHole(holes);
hole.querySelector(".mole").classList.add("up");
setTimeout(() => {
hole.querySelector(".mole").classList.remove("up");
hole.querySelector(".mole").classList.remove("whacked");
if (!timeUp) peep();
}, time);
}
此函数使用 randomTime 函数设置一个介于 200 毫秒和 1000 毫秒之间的随机时间间隔。它使用 randomHole 函数选择一个随机的洞，并通过向地鼠元素添加 up 类来使地鼠出现。在指定的时间间隔之后，通过移除 up 类使地鼠消失。如果游戏尚未结束（timeUp 为 false），则该函数会递归调用自身以使另一只地鼠出现。
实现 startGame 函数
接下来，我们将实现 startGame 函数，该函数用于初始化游戏并启动计时器。
- 打开
main.js文件。 - 找到
startGame函数。 - 将现有代码替换为以下代码：
function startGame() {
scoreDisplay.textContent = 0;
timeUp = false;
score = 0;
peep();
gameTimer = setTimeout(() => (timeUp = true), 10000);
countdown = 10;
timeDisplay.textContent = countdown;
startBtn.disabled = true;
countdownTimer = setInterval(() => {
countdown--;
if (countdown < 0) {
clearInterval(countdownTimer);
startBtn.disabled = false;
return;
}
timeDisplay.textContent = countdown;
}, 1000);
}
此函数初始化分数，将 timeUp 设置为 false，并重置分数显示。它调用 peep 函数以开始让地鼠出现。它使用 setTimeout 启动一个游戏计时器，在 10 秒后将 timeUp 设置为 true。它还设置了一个倒计时计时器，每秒更新一次时间显示。倒计时初始设置为 10，当倒计时达到 0 时，清除倒计时计时器，启用开始按钮，然后函数返回。
实现敲击函数
现在，让我们实现 whack 函数，该函数用于处理击打地鼠并更新分数。
- 打开
main.js文件。 - 找到
whack函数。 - 将现有代码替换为以下代码：
function whack(e) {
if (!e.isTrusted || !this.querySelector(".mole").classList.contains("up"))
return; // 检测到假点击或地鼠未出现
score++;
this.querySelector(".mole").classList.remove("up");
this.querySelector(".mole").classList.add("whacked");
scoreDisplay.textContent = score;
}
当点击地鼠时会调用此函数。它会检查点击事件是否可信（e.isTrusted），以防止假点击。它还会通过检查地鼠元素是否具有 up 类来判断地鼠当前是否出现。如果点击有效，它会增加分数，从地鼠元素中移除 up 类，添加 whacked 类以直观地表明地鼠已被击打，并更新分数显示。
初始化游戏和事件监听器
在这一步中，我们将通过创建洞并为洞和开始按钮添加事件监听器来初始化游戏。
- 打开
main.js文件。 - 找到调用
createHoles()函数的那一行。 - 在
createHoles()函数调用之后添加以下代码：
holes.forEach((hole) => hole.addEventListener("click", whack));
startBtn.addEventListener("click", startGame);
这段代码为每个洞元素添加了一个点击事件监听器。当点击一个洞时，会调用 whack 函数。它还为开始按钮添加了一个点击事件监听器，当点击开始按钮时会调用 startGame 函数。
测试打地鼠游戏
点击 WebIDE 右下角的“上线”按钮，然后切换到“Web 8080”标签页。
这将在“Web 8080”标签页中打开项目。
总结
在这个项目中，我们已经创建了打地鼠游戏的项目文件。我们创建了 HTML 结构，添加了 CSS 样式，并使用 JavaScript 实现了游戏逻辑。接下来的步骤将涉及对游戏进行进一步的定制和增强，例如添加声音、关卡和难度设置。
