23. Гра на JavaScript “Острів скарбів”

Сьогодні на нас чекає гра на JavaScript “Острів скарбів”. В цій грі ми шукатимемо скарб на мапі, а програма даватиме підказки й нараховуватиме бали.

Суть гри на JavaScript “Острів скарбів”

Мета гри – знайти скарб. Вебсторінка буде відображати карту, на якій програма випадковим чином вибирає точку, де заховані скарби. Кожен раз, коли гравець клацає по карті, програма повідомляє, наскільки він близький до скарбу. При кліці по точці зі скарбом (або дуже близько до неї) гра виводитиме привітання і повідомлятиме, скільки кліків пішло на пошуки. 

Створюємо гру

1: Створіть новий проєкт. Додайте файл javascript і підключіть його на сторінці html

  <script src="script.js"></script>

2: Створіть html-код сторінку гри з картинкою (картою скарбів у тезі div) і місцем, куди будуть виводитися повідомлення для гравця.

    <h1>Знайди скарб!</h1>
    <p>Кількість кліків: <span>0</span></p>
    <p >Підказка:</p>
    <div></div>

3: Додайте полю span id=clicks. Для поля з підказкою id=hint і для div id=map

4: Додайте картинку з мапою скарбів. Її можна знайти в інтернеті.

5: Додайте наступні стилі, змінивши посилання на картинку і розміри, якщо треба

#map {
  width: 400px;
  height: 400px;
  background-image: url("map.png");
  background-size: cover;
  margin: 20px auto;
  position: relative;
  border: 3px solid #fff;
  border-radius: 10px;
  cursor: crosshair;
}

#message {
  margin-top: 10px;
  font-size: 18px;
}

6: Створимо функцію для onload (працює від завантаження сторінки). Надалі увесь код будемо складати у цю функцію

 window.onload = function () {
 };

7: Для початку запишемо у змінні елементи, які ми створили у файлику html, щоб ними можна було керувати і зі скриптів. Код додаємо у функцію onload.

  const map = document.getElementById("map");
  const clicksDisplay = елемент_з_id "clicks";
  const hintDisplay = лемент_з_id "hint" ;
  let clicks = 0;

8: Оскільки розмір карти 400 × 400 пікселів, координати її верхнього лівого кута рівні {x: 0, y: 0}, а координати нижнього правого кута – {x: 399, y: 399}.

Щоб вказати на карті скарбів випадкову точку, нам потрібно вибрати випадкове значення в діапазоні від 0 до розміру ширини для координати x і випадкове значення для висоти для координати y. Для цього створимо словник з координатами.

  const treasure = {
    x: Math.floor(Math.random() * map.clientWidth),
    y: # допишіть самостійно
  };

Рахуємо відстань

Для розрахунків відстані нам знадобляться координати.

Створимо функцію для підрахунку відстані від точки зі скарбами(treasureX, treasureY), до точки, на яку клікнув юзер (eventX, eventY)

  // Відстань між двома точками
  function getDistance(eventX, eventY, treasureX, treasureY) {
    const dx = eventX - treasureX;
    // для dy допишіть самостійно
    return Math.sqrt(dx * dx + dy * dy);
  }

9: Наступною створимо функцію, що робить підказку юзеру залежно від того, на якій відстані був клік

  // Підказка на основі відстані
  function getHint(distance) {
    if (distance < 20) return "Гарячо!";

    return "Крижано!";
  }

Допишіть умови:
якщо відстань <50, то повертати “Дуже тепло”,
якщо відстань <100, то повертати “Тепло”,
якщо відстань <200, то повертати “Прохолодно”,
якщо відстань <300, то повертати “Холодно”,

Оброблювач кліків

Обробник кліків – це наша основна функція, яка буде працювати кожного разу, коли юзер натиснув на мапу.

  // Обробник кліку по карті
  map.addEventListener("click", (event) => {
    // збільшуємо змінну для кількості кліків на 1
    const distance = getDistance(event.offsetX, event.offsetY, treasure.x, treasure.y);
    const hint = //викликаємо функцію з підказкою для юзера і передаємо distance як аргумент;

    // Оновлення тексту
    clicksDisplay.textContent = `${clicks}`; //Кількість кліків:
    hintDisplay.textContent = //пишемо підказку hint 

    if (distance < 15) {
      //створюємо alert  зі словами `Вітаємо! Ви знайшли скарб за ${clicks} кліків! 🪙`;
      location.reload(); // Перезапуск гри
    }
  });

1: Додайте стилів: змініть колір фону та тексту, відцентруйте написи

2: Введіть в гру дві додаткові підказки (наприклад, «Дуже-дуже холодно! ») і додайте відповідні підказкам відстані.

3: Встановіть обмеження кількості кліків і показуйте гравцеві повідомлення «Кінець гри», якщо він перевищить це обмеження.

1: Додайте загрузку випадкової карти зі списку (у списку 3-4 карти). Функцію getRandomMap треба буде написати самостійно і додати цей код:

map.style.backgroundImage = `url("${getRandomMap()}")`;

2: Додайте таймер у гру. При виграші має також виводитися витрачений на гру час.

Хочете дізнатися більше ? Переходьте на сторінку з уроками по CSS та Javascript і прокачайте навички з веброзробки 😎🤖 !!!