Игра по сложению фруктов с использованием HTML, CSS и JavaScript

Введение

В этом проекте вы научитесь создавать простую игру по сложению фруктов с использованием HTML, CSS и JavaScript. Цель заключается в том, чтобы сложить падающие элементы фруктов в верхней части страницы в коробку в нижней части. Если в коробке есть три одинаковых фрукта, они будут автоматически удалены.

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

Эффект удаления выглядит так:

Эффект, при котором удаление не происходит, выглядит так:

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

Настройка структуры проекта

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

1. Откройте редактор, и вы должны увидеть следующие файлы: index.html, style.css, jquery.min.js и файлы изображений.
2. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.
3. Откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Добавьте обработчик события клика

В этом шаге вы добавите обработчик события клика к элементам фруктов в верхней части страницы.

1. В файле index.html найдите раздел TODO в теге <script>.
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 фруктов и больше нечего удалить, нажатие на элемент фруктов в верхней части не должно иметь никакого эффекта. Эффект, при котором удаление не происходит, выглядит так:

Поздравляем! Вы завершили проект Fruit Stacker.

Резюме

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