Tower Blocks — Увлекательная 3D игра на JavaScript

Научитесь создавать Tower Blocks Game — 3D-игру, где вы строите башню из блоков. Узнайте, как использовать Three.js и GSAP для создания анимаций, подсчета очков и управления процессом игры.

Tower Blocks Game — это увлекательная аркадная игра, в которой игрок должен строить башню, размещая блоки друг на друге. Цель — разместить блоки как можно точнее, чтобы башня оставалась устойчивой.

В этом руководстве мы создадим Tower Blocks Game с использованием HTML, CSS и JavaScript. Мы будем использовать Three.js для 3D-визуализации и GSAP для плавных анимаций. Игра включает в себя:

  1. Анимацию блоков, которые движутся и останавливаются.

  2. Изменение размеров и положения блоков в зависимости от точности размещения.

  3. Подсчет очков и игровой интерфейс.

Описание игры

Tower Blocks Game — это игра, где вам нужно строить башню, размещая движущиеся блоки. Чем точнее вы кладете блоки, тем выше будет башня. Если блок выходит за пределы предыдущего, часть блока отрезается. Игра завершается, если блоки полностью промахиваются мимо башни.

Особенности:

  • Удобное управление (клик или пробел).

  • Красочная 3D-графика.

  • Постепенно усложняющийся геймплей.

Этапы создания игры

1. Создание структуры HTML

  • Добавьте основные элементы: контейнер для игры, блоки для интерфейса (счет, инструкции, экран окончания игры).

  • Подключите стили и скрипты: Three.js, GSAP, и основной файл JavaScript.

2. Стилизация с помощью CSS

  • Используйте стили для центрирования игрового контейнера.

  • Создайте анимации появления интерфейсных элементов.

  • Настройте адаптивность интерфейса для различных экранов.

3. Логика игры на JavaScript

  • Класс Stage: настройка сцены, камеры и освещения.

  • Класс Block: управление отдельными блоками (размеры, движение, размещение).

  • Класс Game: управление процессом игры (добавление блоков, подсчет очков, состояния игры).

4. Реализация механики блока

  • Движение блока по оси.

  • Определение места соприкосновения с предыдущим блоком.

  • Обрезка блока, если он выходит за границы.

5. Настройка управления

  • Реагируйте на нажатие клавиш и клики мыши для размещения блоков.

6. Подсчет очков и завершение игры

  • Увеличивайте счет за каждый правильно размещенный блок.

  • Завершайте игру, если блок промахивается.

7. Тестирование и оптимизация

  • Убедитесь, что игра работает на всех устройствах и экранах.

  • Проверьте, что переходы между состояниями игры плавные.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Tower Blocks Game</title>
    <link rel="stylesheet" href="style.css"> <!-- Подключение стилей -->
</head>
<body>
    <div id="container">
        <!-- Основная область игры -->
        <div id="game"></div>
        
        <!-- Счет игры -->
        <div id="score">0</div>
        
        <!-- Инструкции -->
        <div id="instructions">Кликните, чтобы разместить блок</div>
        
        <!-- Экран окончания игры -->
        <div class="game-over">
            <h2>Игра окончена</h2>
            <p>Вы отлично справились, вы лучший.</p>
            <p>Кликните, чтобы начать заново</p>
        </div>
        
        <!-- Экран готовности к началу игры -->
        <div class="game-ready">
            <div id="start-button">Начать</div>
        </div>
    </div>

    <!-- Подключение скриптов -->
    <script src="https://codepen.io/steveg3003/pen/zBVakw.js"></script> <!-- Библиотека для вспомогательных функций -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script> <!-- Three.js для работы с 3D -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <!-- GSAP для анимации -->
    <script src="script.js"></script> <!-- Основная логика игры -->
</body>
</html>

Что мы делаем в этом HTML?

  1. Добавляем структуру игры:

    • Создаем контейнер с id="container", который будет основной областью игры.

    • Внутри контейнера размещаем:

      • #game — область для отрисовки 3D-графики с помощью Three.js.

      • #score — счет игры, который обновляется в реальном времени.

      • #instructions — подсказка для игрока, которая отображается в начале игры.

      • .game-over — экран, который появляется, когда игра завершена.

      • .game-ready — экран с кнопкой для начала игры.

  2. Подключаем стили:

    • Используем <link> для подключения файла style.css, который задает внешний вид игры и стилизует интерфейс.

  3. Подключаем библиотеки и скрипты:

    • Three.js — библиотека для создания и работы с 3D-графикой.

    • GSAP — библиотека для плавной анимации элементов.

    • script.js — основной файл с логикой игры.

  4. Добавляем мета-теги:

    • <meta charset="UTF-8"> — задает кодировку UTF-8, чтобы корректно отображать текст на русском.

    • <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> — обеспечивает адаптивность интерфейса игры на мобильных устройствах.

  5. Сценарии взаимодействия:

    • Подключенные скрипты реализуют механику игры:

      • #start-button начинает игру.

      • Взаимодействие с #instructions происходит при начале игры.

      • Экран .game-over появляется, если игрок допускает ошибку.

Добавим стилей CSS

Для стилизации Tower Blocks Game мы используем CSS, чтобы создать приятный и удобный интерфейс, поддерживающий адаптивность и анимации.

Основные элементы и их стили

1. Базовые настройки

Мы отключаем стандартные отступы и прокрутку, чтобы игра занимала весь экран:

html, body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: "Comfortaa", cursive;
}

2. Игровой контейнер

Контейнер занимает весь экран и служит основной областью для игры:

#container {
  width: 100%;
  height: 100%;
}

3. Счет

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

#container #score {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  font-size: 10vh;
  color: #333344;
  transition: transform 0.5s ease;
}

4. Графика игры

Область #game предназначена для отображения 3D-графики с помощью Three.js и занимает весь экран:

#container #game {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

5. Экраны окончания и начала игры

Экраны .game-over и .game-ready появляются в центре экрана с анимацией:

#container .game-over, #container .game-ready {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Где найти полный код?

Полный CSS-код доступен в приложении Кодик или на GitHub проекта. Это позволит изучить всю стилизацию и при необходимости настроить внешний вид под свои нужды.

Описание логики игры Tower Blocks Game (JavaScript)

JavaScript является основой для реализации всей игровой логики Tower Blocks Game. Он отвечает за управление 3D-сценой, движением блоков, подсчетом очков и взаимодействием с игроком.

Основные элементы JavaScript и их функциональность

1. Создание 3D-сцены

Для работы с 3D-графикой мы используем библиотеку Three.js. С помощью класса Stage создается сцена, камера и освещение:

class Stage {
  constructor() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.scene = new THREE.Scene();
    this.camera = new THREE.OrthographicCamera(...);
    this.light = new THREE.DirectionalLight(0xffffff, 0.5);
    this.scene.add(this.light);
  }
}

Что мы делаем:

  • Настраиваем камеру для ортографической проекции (подходит для игр с "вида сверху").

  • Добавляем освещение для создания визуального объема.

2. Создание блоков

Класс Block управляет отдельными блоками, их размерами, движением и размещением:

class Block {
  constructor(previousBlock) {
    this.dimension = { width: 10, height: 2, depth: 10 };
    this.position = { x: 0, y: ..., z: 0 };
    this.mesh = new THREE.Mesh(new THREE.BoxGeometry(...), new THREE.MeshToonMaterial(...));
  }

  tick() {
    // Управляет движением блока
    this.position[this.workingPlane] += this.direction;
  }

  place() {
    // Логика обрезки блока при несовпадении с предыдущим
  }
}

Что мы делаем:

  • Задаем размеры и начальные позиции блоков.

  • Реализуем движение блоков и их остановку при нажатии.

3. Управление игрой

Класс Game объединяет логику игры, управление состояниями, добавление новых блоков и подсчет очков:

class Game {
  constructor() {
    this.blocks = [];
    this.stage = new Stage();
    this.state = 'READY';
    this.score = 0;
  }

  addBlock() {
    // Добавляет новый блок на башню
  }

  placeBlock() {
    // Размещает текущий блок и проверяет на завершение игры
  }

  restartGame() {
    // Сбрасывает игру при завершении
  }
}

Что мы делаем:

  • Обрабатываем состояния игры: начало, игра, окончание, перезапуск.

  • Управляем добавлением новых блоков и обновлением сцены.

  • Считаем очки за успешно размещенные блоки.

4. Взаимодействие с игроком

Игра реагирует на действия пользователя: нажатие пробела или клик мышью для размещения блоков:

document.addEventListener('click', () => game.onAction());
document.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) game.onAction(); // Нажатие пробела
});

5. Анимации

С помощью библиотеки GSAP мы реализуем плавное перемещение камеры и анимации блоков:

TweenLite.to(this.camera.position, 0.3, { y: newY });
TweenLite.to(block.position, 1, { x: ... });

Что мы делаем:

  • Камера плавно поднимается вверх, следуя за блоками.

  • Блоки, которые не совпадают, отлетают в сторону и исчезают.

Где найти полный код?

Полный JavaScript-код доступен в приложении Кодик или на GitHub проекта. Вы сможете изучить его подробнее и при необходимости адаптировать под свои нужды.

Заключение

Создание игры Tower Blocks Game — это увлекательный процесс, который сочетает в себе работу с 3D-графикой, анимациями и игровыми механиками. Мы рассмотрели ключевые моменты разработки: настройку сцены, управление блоками, реализацию взаимодействий и стилизацию интерфейса.

Где поиграть и научиться создавать игру?

Поиграть в Tower Blocks Game и детально изучить код можно в приложении Кодик. Это отличная возможность не только насладиться игрой, но и научиться разрабатывать собственные проекты, изучая пример на практике. Также полный исходный код доступен на GitHub проекта, где вы можете скачать и адаптировать его под свои нужды.

Попробуйте создать игру сами, экспериментируйте с настройками и улучшайте её — в этом и заключается магия программирования! 🚀

Бесплатно
Кодик: Интерактивное обучение!
Изучай HTML, JavaScript, CSS, Python, PHP, SQL, Git
Проходи практические уроки!
Получи сертификат!
Google Play App Store
Вам может быть интересно

Не нашли нужной статьи?
Напишите нам и ее сделаем!

Бесплатно
Кодик: Интерактивное обучение!
Изучай HTML, JavaScript, CSS, Python, PHP, SQL, Git
Проходи практические уроки!
Получи сертификат!
Google Play App Store
Главная
Курсы
Блог
Меню