创建交互式拼图游戏

介绍

在这个项目中，你将学习如何使用 JavaScript 创建一个交互式拼图游戏。该游戏要求玩家重新排列拼图碎片以重建完整图像，为玩家提供引人入胜且具有挑战性的体验。

👀 预览

交互式拼图演示

🎯 任务

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

如何设置项目环境并了解文件结构。
如何为拼图碎片实现拖放功能。
如何检查拼图是否完成并相应地显示成功消息。
如何测试完成的项目并确保游戏功能正确。

🏆 成果

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

使用 JavaScript 创建一个交互式游戏。
理解网页开发中拖放功能的原理。
实现检查任务完成情况并向用户提供反馈的逻辑。
获得使用文档对象模型（DOM）和操作 HTML 元素的经验。

设置项目环境

在这一步中，你将设置项目环境并了解文件结构。

打开实验环境并导航到项目目录 /home/labex/project。
目录结构如下：
```
├── css
├── images
├── index.html
└── js
    └── index.js
```
- images 是项目图像文件夹。
- css 是项目样式文件夹。
- index.html 是主页。
- js/index.js 是你需要添加代码的 JavaScript 文件。
点击 WebIDE 右下角的 Go Live 按钮来运行项目。
在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

实现拖放功能

在这一步中，你将为拼图碎片实现拖放功能。

在 js/index.js 文件中，找到 drop 函数。

在 drop 函数内部，添加以下代码以交换被拖动的拼图碎片和目标拼图碎片的图像：

// 检查被拖动的拼图碎片是否不是当前目标拼图碎片
if (draggedPiece !== this) {
  // TODO
  // 保存被拖动和目标拼图碎片的当前状态
  let saveArr = [
    [draggedPiece.children[0].src, draggedPiece.children[0].dataset.id],
    [this.children[0].src, this.children[0].dataset.id]
  ];

  // 交换图像的src和data-id属性
  draggedPiece.children[0].src = saveArr[1][0];
  draggedPiece.children[0].dataset.id = saveArr[1][1];
  this.children[0].src = saveArr[0][0];
  this.children[0].dataset.id = saveArr[0][1];
}

// 重置正在被拖动的拼图碎片
draggedPiece = null;

这段代码首先检查被拖动的拼图碎片是否不是当前目标拼图碎片。如果是，它会保存被拖动和目标拼图碎片的当前状态，然后交换图像的 src 和 data-id 属性。

检查拼图是否完成

在这一步中，你将实现检查拼图是否成功完成的逻辑，并相应地显示或隐藏成功消息。

在 js/index.js 文件中，找到 drop 函数。

在 drop 函数中，在上一步添加的代码之后，添加以下代码：

if (draggedPiece !== this) {
  // TODO
  //...
  // 获取拼图容器中所有图像的 data-id 值
  let imgDataIdList = [...container.getElementsByTagName("img")].map(
    (item) => item.dataset.id
  );

  // 检查拼图是否完成
  if (imgDataIdList.join(",") === "1,2,3,4,5,6,7,8,9") {
    // 显示成功消息
    successMessage.classList.remove("hide");
    successMessage.classList.add("show");
  } else {
    // 隐藏成功消息
    successMessage.classList.remove("show");
    successMessage.classList.add("hide");
  }
}

这段代码首先获取拼图容器中所有图像的 data-id 值，并检查它们是否按正确顺序排列（1 到 9）。如果是，它通过从成功消息元素中移除 hide 类并添加 show 类来显示成功消息。否则，它通过移除 show 类并添加 hide 类来隐藏成功消息。

测试完成的项目

刷新页面以查看拼图的初始状态。
尝试拖动并放下拼图碎片以重新排列它们。
观察成功消息根据拼图的完成情况出现或消失。
确保拼图碎片正确交换，并且图像的 src 和 data-id 属性相应更新。

完成后的效果如下：

完成效果

恭喜！你已使用提供的代码成功实现了拼图游戏。请随意进一步探索该项目，并尝试其他功能或增强功能。

总结

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

拼出未来

介绍