Выписать будущее

Введение

В этом проекте вы научитесь создавать интерактивную игру с пазлами на JavaScript. В игре нужно переставлять кусочки пазла, чтобы восстановить полное изображение, что обеспечивает увлекательное и вызывающее уважение игровое преодоление для игроков.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать проектную среду и понимать структуру файлов;
• реализовывать функциональность перетаскивания кусочков пазла;
• проверять завершение пазла и отображать соответствующее сообщение об успехе;
• тестировать завершенный проект и убедиться в правильности работы игры.

🏆 Достижения

После завершения этого проекта вы сможете:

• создавать интерактивную игру на JavaScript;
• понимать принципы функциональности перетаскивания в веб-разработке;
• реализовывать логику проверки завершения задачи и предоставлять обратную связь пользователю;
• получать опыт работы с Document Object Model (DOM) и манипулирования HTML-элементами.

Skills Graph

Настройка проектной среды

В этом шаге вы настроите проектную среду и поймете структуру файлов.

1. Откройте экспериментальную среду и перейдите в директорию проекта /home/labex/project.

2. Структура директорий следующая:

   ├── css
   ├── images
   ├── index.html
   └── js
       └── index.js

   • images - это папка с изображениями проекта.
   • css - это папка со стилями проекта.
   • index.html - главная страница.
   • js/index.js - JavaScript-файл, в котором нужно добавить код.

3. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

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. Этот код сначала проверяет, не является ли кусочек пазла, который перетаскивается, текущим целевым кусочком пазла. Если это так, он сохраняет текущее состояние кусочков пазла, которые перетаскиваются и целевые, а затем меняет атрибуты src и data-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. Убедитесь, что кусочки пазла правильно меняются местами, и атрибуты src и data-id изображений обновляются соответственно.

Эффект после завершения выглядит так:

Поздравляем! Вы успешно реализовали игру с пазлами с использованием предоставленного кода. Не стесняйтесь дальнейшего изучения проекта и экспериментирования с дополнительными функциями или улучшениями.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете выполнить больше лабораторных работ в LabEx, чтобы улучшить свои навыки.