使用 HTML、CSS、JavaScript 制作水果匹配游戏

JavaScriptJavaScriptIntermediate
立即练习

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

简介

在这个项目中,你将学习如何使用 HTML、CSS 和 JavaScript 创建一个简单的「水果趣玩」游戏。该游戏通过点击游戏板上的方块来匹配成对的水果图像。

👀 预览

水果匹配游戏预览

🎯 任务

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

  • 如何设置项目文件和目录
  • 如何实现开始按钮的功能,以显示和隐藏水果图像
  • 如何实现点击方块以显示水果图像的功能
  • 如何实现比较两个点击图像并相应更新分数的功能
  • 如何实时更新分数显示

🏆 成果

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

  • 构建和组织一个网页开发项目
  • 使用 JavaScript 操作 DOM 并处理用户交互
  • 使用 jQuery 简化 JavaScript 代码和动画
  • 根据游戏逻辑实时更新用户界面

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") 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/comp_ops -.-> lab-445656{{"`使用 HTML、CSS、JavaScript 制作水果匹配游戏`"}} javascript/functions -.-> lab-445656{{"`使用 HTML、CSS、JavaScript 制作水果匹配游戏`"}} javascript/dom_select -.-> lab-445656{{"`使用 HTML、CSS、JavaScript 制作水果匹配游戏`"}} javascript/dom_manip -.-> lab-445656{{"`使用 HTML、CSS、JavaScript 制作水果匹配游戏`"}} javascript/event_handle -.-> lab-445656{{"`使用 HTML、CSS、JavaScript 制作水果匹配游戏`"}} end

设置项目结构

在这一步中,你将设置项目文件和结构。按照以下步骤完成此步骤:

打开项目文件夹。目录结构如下:

├──css
│ └── style.css
├── Images
│ ├── apple.png
│ ├── cherry.png
│ ├── grape.png
│ ├── peach.png
│ ├── pear.png
│ ├── strawberry.png
│ ├──tangerine.png
│ └── watermelon.png
├─ js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html

点击 WebIDE 右下角的「Go Live」按钮来运行项目。

接下来,在虚拟机顶部打开「Web 8080」并手动刷新以查看页面。当你点击开始按钮时,游戏运行不正常,如下所示:

未完成的游戏界面

实现比较功能

在这一步中,你将实现比较两张点击图片的功能。按照以下步骤完成此步骤:

  1. js/index.js 文件底部,添加以下 compare() 函数:
// 相互比较两张图片,看它们是否相同
function compare() {
  if ($("#" + images[0]).attr("src") == $("#" + images[1]).attr("src")) {
    score += 2;
    $("#score").text(score);
    // 隐藏
    $("#" + images[0])
      .parent()
      .css("visibility", "hidden");
    $("#" + images[1])
      .parent()
      .css("visibility", "hidden");
    images = [];
    foundImage += 2;
  } else {
    score -= 2;
    $("#score").text(score);
    $("#" + images[0]).hide();
    $("#" + images[1]).hide();

    images = [];
  }
}

此函数比较两张点击图片的源地址。如果它们相同,分数增加 2 分,方块隐藏。如果不同,分数减少 2 分,图片隐藏。$("#score").text(score) 会实时更新 HTML 文件中 <p>The current number of points is <span id="score">0</span></p> 部分的分数显示。

实现开始按钮功能

在这一步中,你将实现开始按钮的功能。按照以下步骤完成此步骤:

  1. 打开 js/index.js 文件。
  2. startGame() 函数中,添加以下代码,以便在点击开始按钮时显示然后隐藏方块上的图像:
function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
}
  1. startGame() 函数中,在上述代码之后继续添加以下代码,以隐藏「开始」按钮:
// 隐藏开始按钮
$("#start").css("visibility", "hidden");

实现点击功能

在这一步中,你将实现点击方块的功能。按照以下步骤完成此步骤:

  1. 打开 js/index.js 文件。
  2. startGame() 函数中,添加以下代码来处理方块上的点击事件:
function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
  // 隐藏开始按钮
  $("#start").css("visibility", "hidden");
  $(".img-box").bind("click", function () {
    var id = $(this).children().attr("id"); // 获取点击图像的id
    images.push(id);

    if ($(this).children().is(":hidden")) {
      $(this).children().show();
    } else {
      images.pop(id);
    }
    if (images.length == 2) {
      setTimeout(compare, 500);
    }
  });
}

这段代码会将点击图像的ID推送到 images 数组中。如果图像是隐藏的,它将被显示。如果图像已经显示,它将从 images 数组中移除。当 images 数组中有两个图像时,compare() 函数将在延迟500毫秒后被调用。

完成这些步骤后,「水果趣玩」游戏应该就能完全正常运行了,最终结果如下:

完成的游戏演示
✨ 查看解决方案并练习

总结

恭喜!你已完成此项目。你可以在 LabEx 中练习更多实验以提升技能。

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