水果趣玩 | HTML、CSS、JavaScript 游戏开发

介绍

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

👀 预览

水果匹配游戏预览

🎯 任务

在这个项目中，你将学习：

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

🏆 成果

完成这个项目后，你将能够：

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

设置项目结构

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

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

├──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」并手动刷新以查看页面。当你点击开始按钮时，游戏运行不正常，如下所示：

未完成的游戏界面

实现比较功能

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

在 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> 部分的分数显示。

实现开始按钮功能

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

打开 js/index.js 文件。
在 startGame() 函数中，添加以下代码，以便在点击开始按钮时显示然后隐藏方块上的图像：

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
}

在 startGame() 函数中，在上述代码之后继续添加以下代码，以隐藏「开始」按钮：

// 隐藏开始按钮
$("#start").css("visibility", "hidden");

实现点击功能

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

打开 js/index.js 文件。
在 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 中练习更多实验以提升技能。

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

介绍