创建一个打地鼠网页游戏

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何使用 HTML、CSS 和 JavaScript 创建一个打地鼠游戏。该游戏要求在规定时间内击打从洞中随机出现的地鼠。你将创建必要的 HTML、CSS 和 JavaScript 文件,并逐步实现游戏逻辑。

👀 预览

打地鼠网页游戏

🎯 任务

在这个项目中,你将学习:

  • 如何为打地鼠游戏设置项目文件
  • 如何添加必要的 CSS 样式来创建游戏布局和设计
  • 如何实现使地鼠出现和消失、计分以及计时的游戏逻辑
  • 如何为击打地鼠和开始游戏创建事件监听器

🏆 成果

完成这个项目后,你将能够:

  • 为基于网页的游戏创建 HTML、CSS 和 JavaScript 文件
  • 使用 CSS 对游戏元素进行样式设置和布局
  • 使用 JavaScript 操作 DOM 使游戏元素出现和消失
  • 处理用户交互并更新游戏状态
  • 使用 JavaScript 中的定时器来跟踪时间并控制游戏流程

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") subgraph Lab Skills javascript/functions -.-> lab-445717{{"`创建一个打地鼠网页游戏`"}} javascript/async_prog -.-> lab-445717{{"`创建一个打地鼠网页游戏`"}} javascript/dom_select -.-> lab-445717{{"`创建一个打地鼠网页游戏`"}} javascript/dom_manip -.-> lab-445717{{"`创建一个打地鼠网页游戏`"}} javascript/event_handle -.-> lab-445717{{"`创建一个打地鼠网页游戏`"}} end

创建项目文件

首先,让我们为打地鼠游戏创建项目文件。

  1. 使用 cd 命令进入 ~/project 目录。
  2. 创建一个名为 index.html 的新文件。
  3. 将以下代码复制并粘贴到 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/[email protected]/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 样式

  1. 创建一个名为 styles.css 的新文件。
  2. 将以下代码复制并粘贴到 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;
}
✨ 查看解决方案并练习

添加游戏逻辑

  1. 创建一个名为 main.js 的新文件。
  2. 我们将在后续步骤中添加 JavaScript 代码。

现在,让我们将游戏逻辑添加到 main.js 文件中。

  1. 打开 main.js 文件。
  2. 将以下代码复制并粘贴到 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 函数

在这一步中,我们将实现 peep 函数,该函数用于让地鼠随机出现和消失。

  1. 打开 main.js 文件。
  2. 找到 peep 函数。
  3. 将现有代码替换为以下代码:
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 类使地鼠消失。如果游戏尚未结束(timeUpfalse),则该函数会递归调用自身以使另一只地鼠出现。

✨ 查看解决方案并练习

实现 startGame 函数

接下来,我们将实现 startGame 函数,该函数用于初始化游戏并启动计时器。

  1. 打开 main.js 文件。
  2. 找到 startGame 函数。
  3. 将现有代码替换为以下代码:
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 函数

现在,让我们实现 whack 函数,该函数用于处理击打地鼠并更新分数。

  1. 打开 main.js 文件。
  2. 找到 whack 函数。
  3. 将现有代码替换为以下代码:
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 类以直观地表明地鼠已被击打,并更新分数显示。

✨ 查看解决方案并练习

初始化游戏和事件监听器

在这一步中,我们将通过创建洞并为洞和开始按钮添加事件监听器来初始化游戏。

  1. 打开 main.js 文件。
  2. 找到调用 createHoles() 函数的那一行。
  3. createHoles() 函数调用之后添加以下代码:
holes.forEach((hole) => hole.addEventListener("click", whack));

startBtn.addEventListener("click", startGame);

这段代码为每个洞元素添加了一个点击事件监听器。当点击一个洞时,会调用 whack 函数。它还为开始按钮添加了一个点击事件监听器,当点击开始按钮时会调用 startGame 函数。

测试打地鼠游戏

点击WebIDE右下角的“上线”按钮,然后切换到“Web 8080”标签页。

WebIDE上线按钮

这将在“Web 8080”标签页中打开项目。

Web 8080标签页视图
✨ 查看解决方案并练习

总结

在这个项目中,我们已经创建了打地鼠游戏的项目文件。我们创建了HTML结构,添加了CSS样式,并使用JavaScript实现了游戏逻辑。接下来的步骤将涉及对游戏进行进一步的定制和增强,例如添加声音、关卡和难度设置。

您可能感兴趣的其他 JavaScript 教程