使用 HTML、CSS、JavaScript 的水果堆叠游戏

简介

在这个项目中，你将学习如何使用 HTML、CSS 和 JavaScript 创建一个简单的水果堆叠游戏。目标是将页面顶部掉落的水果物品堆叠到底部的盒子中。如果盒子里有三个相同的水果，它们将被自动消除。

👀 预览

可消除的效果如下所示：

不可消除的效果如下：

🎯 任务

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

• 如何通过在编辑器中打开提供的文件来设置项目
• 如何为页面顶部的水果物品添加点击事件处理程序
• 如何实现游戏逻辑以添加、移除和消除水果物品
• 如何完成项目并测试功能

🏆 成果

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

• 使用 jQuery 操作 DOM 并处理事件
• 使用 JavaScript 实现基本的游戏逻辑
• 创建一个简单且交互式的用户界面
• 测试和调试你的代码以确保实现所需的功能

Skills Graph

设置项目结构

在这一步中，你将通过在编辑器中打开提供的文件来设置项目。

1. 打开编辑器，你应该会看到以下文件：index.html、style.css、jquery.min.js 以及图像文件。
2. 点击 WebIDE 右下角的 Go Live 按钮来运行项目。
3. 在虚拟机顶部打开 “Web 8080” 并手动刷新以查看页面。

添加点击事件处理程序

在这一步中，你将为页面顶部的水果物品添加点击事件处理程序。

1. 在 index.html 文件中，找到 <script> 标签内的 TODO 部分。
2. <script> 标签内部设置了一个空的 ids 变量数组。

let ids = [];

$("#card li").on("click", function (e) {
  // TODO: 请在此处实现该函数
});

3. 在 TODO 部分添加以下代码：

$("#card li").on("click", function (e) {
  // TODO: 请在此处实现该函数
  if ($("#box li").length >= 7) {
    return;
  }
  let clone = $(this).clone();
  $("#box").append(clone);

  let currentId = $(this).data("id");
  ids.push($(this).data("id"));

  let currentIdLen = ids.filter((id) => id == currentId)?.length;

  if (currentIdLen == 3) {
    ids = ids.filter((id) => id !== currentId);
    let three = $(`#box li[data-id=${currentId}]`);
    for (let index = 0; index < three.length; index++) {
      const element = three[index];
      $(element).addClass("active");
      setTimeout(() => {
        element.remove();
      }, 200);
    }
  }

  $(this).css({
    top: "600px",
    left: "200px",
    opacity: 0,
    transition:
      "left.2s linear, top.2s cubic-bezier(.08,-0.35,.99,.33),opacity.2s linear"
  });
});

这段代码为页面顶部的水果物品添加了一个点击事件处理程序。当点击一个水果物品时，它将被克隆并添加到页面底部的盒子中。如果盒子里有三个相同的水果，它们将被移除。如果底部矩形（id=box）元素中有7个水果且无法消除，则点击的水果元素节点不在添加的矩形元素中。

完成项目

在这最后一步中，你将通过添加收尾工作来完成项目。

1. 通过点击页面顶部的水果物品来测试项目。验证水果是否被添加到盒子中，以及如果有三个相同的水果是否会被移除。可消除的效果如下所示：

2. 如果盒子中有7个水果且无法再移除更多水果，点击顶部的水果物品应该没有效果。不可移除的效果如下：

恭喜你！你已经完成了水果堆叠器项目。

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。