Фрукты для веселья | Разработка игр на HTML, CSS и JavaScript

Введение

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

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

Предпросмотр игры по поиску пар фруктов

🎯 Задачи

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

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

🏆 Достижения

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

структурировать и организовать веб-разработку проекта;
использовать JavaScript для манипуляции с DOM и обработки взаимодействий пользователя;
использовать jQuery для упрощения кода JavaScript и анимаций;
обновлять пользовательский интерфейс в реальном времени на основе игровой логики.

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

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

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

├──css
│ └── style.css
├── Images
│ ├── apple.png
│ ├── cherry.png
│ ├── grape.png
│ ├── peach.png
│ ├── pear.png
│ ├── strawberry.png
│ ├──tangerine.png
│ └── watermelon.png
├─ js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html

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

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу. Игра не запускается должным образом при нажатии кнопки "Старт", как показано ниже:

незавершенный интерфейс игры

Реализация функциональности сравнения

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

В конце файла js/index.js добавьте функцию compare() следующим образом:

// Сравнивает два изображения между собой, чтобы определить, одинаковые ли они
function compare() {
  if ($("#" + images[0]).attr("src") == $("#" + images[1]).attr("src")) {
    score += 2;
    $("#score").text(score);
    // Скрыть
    $("#" + images[0])
      .parent()
      .css("visibility", "hidden");
    $("#" + images[1])
      .parent()
      .css("visibility", "hidden");
    images = [];
    foundImage += 2;
  } else {
    score -= 2;
    $("#score").text(score);
    $("#" + images[0]).hide();
    $("#" + images[1]).hide();

    images = [];
  }
}

Эта функция сравнивает источники двух кликнутых изображений. Если они одинаковые, счет увеличивается на 2 и квадраты скрываются. Если они разные, счет уменьшается на 2 и изображения скрываются. $("#score").text(score) обновляет отображение счета в разделе <p>The current number of points is <span id="score">0</span></p> файла html в реальном времени.

Реализация функциональности кнопки 'Старт'

В этом шаге вы реализуете функциональность кнопки "Старт". Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте файл js/index.js.
В функции startGame() добавьте следующий код, чтобы показать, а затем скрыть изображения на квадратах при нажатии кнопки "Старт":

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
}

В функции startGame() продолжайте предыдущий код, добавив следующий код, чтобы скрыть кнопку "Старт":

// Hide Start button
$("#start").css("visibility", "hidden");

Реализация функциональности клика

В этом шаге вы реализуете функциональность клика по квадратам. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте файл js/index.js.
В функции startGame() добавьте следующий код, чтобы обработать событие клика по квадратам:

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
  // Hide Start button
  $("#start").css("visibility", "hidden");
  $(".img-box").bind("click", function () {
    var id = $(this).children().attr("id"); // Получить id кликнутого изображения
    images.push(id);

    if ($(this).children().is(":hidden")) {
      $(this).children().show();
    } else {
      images.pop(id);
    }
    if (images.length == 2) {
      setTimeout(compare, 500);
    }
  });
}

Этот код добавит ID кликнутого изображения в массив images. Если изображение скрыто, оно будет показано. Если изображение уже показано, оно будет удалено из массива images. Когда в массиве images будет два изображения, функция compare() будет вызвана с задержкой в 500 миллисекунд.

После завершения этих шагов игра "Фрукты для веселья" должна быть полностью функциональной, и готовый результат выглядит так:

Демонстрация завершенной игры