拼出未来

JavaScriptJavaScriptBeginner
立即练习

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

简介

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

👀 预览

交互式拼图演示

🎯 任务

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

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

🏆 成果

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("`DOM Traversal`") subgraph Lab Skills javascript/cond_stmts -.-> lab-299877{{"`拼出未来`"}} javascript/array_methods -.-> lab-299877{{"`拼出未来`"}} javascript/dom_select -.-> lab-299877{{"`拼出未来`"}} javascript/dom_manip -.-> lab-299877{{"`拼出未来`"}} javascript/event_handle -.-> lab-299877{{"`拼出未来`"}} javascript/dom_traverse -.-> lab-299877{{"`拼出未来`"}} end

设置项目环境

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

  1. 打开实验环境并导航到项目目录 /home/labex/project

  2. 目录结构如下:

    ├── css
    ├── images
    ├── index.html
    └── js
        └── index.js
    • images 是项目图像文件夹。
    • css 是项目样式文件夹。
    • index.html 是主页。
    • js/index.js 是你需要添加代码的 JavaScript 文件。
  3. 点击 WebIDE 右下角的 Go Live 按钮来运行项目。

  4. 在虚拟机顶部打开 “Web 8080” 并手动刷新以查看页面。

实现拖放功能

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

  1. js/index.js 文件中,找到 drop 函数。

  2. 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;
  3. 这段代码首先检查被拖动的拼图碎片是否不是当前目标拼图碎片。如果是,它会保存被拖动和目标拼图碎片的当前状态,然后交换图像的 srcdata-id 属性。

检查拼图是否完成

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

  1. js/index.js 文件中,找到 drop 函数。

  2. 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");
      }
    }
  3. 这段代码首先获取拼图容器中所有图像的 data-id 值,并检查它们是否按正确顺序排列(1到9)。如果是,它通过从成功消息元素中移除 hide 类并添加 show 类来显示成功消息。否则,它通过移除 show 类并添加 hide 类来隐藏成功消息。

测试完成的项目

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

完成后的效果如下:

完成效果

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

✨ 查看解决方案并练习

总结

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

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