#1. Создаем игру на JavaScript для НАЧИНАЮЩИХ (Создаем игровое поле)

DZEN · 01.12.2025 08:56

Ключевые темы и таймкоды

Обзор игры

0:00
  • Игра представляет собой гоночную трассу с препятствиями, монетками и знаками объезда.
  • Игра была создана для олимпиады, но автор решил поделиться ею с аудиторией.

Верстка игры

2:54
  • Верстка игры начинается с создания игрового поля, на котором будут расположены деревья, монетки и знаки объезда.
  • Деревья движутся вниз, монетки появляются в разных местах, а знаки объезда остаются на месте.
  • Машинка управляется игроком, который может наезжать на препятствия.

Стилизация игры

7:12
  • Автор выбирает цвета для игры, используя палитру.
  • Создается дорога, задается ее ширина и фон.
  • Машинка размещается в центре экрана, задается ее размер и позиция.
  • Деревья создаются и размещаются на экране, им задаются разные размеры и позиции.
  • Все элементы стилизуются с использованием CSS.

Размещение деревьев

12:32
  • В видео автор объясняет, как разместить деревья в игре, используя свойства трансформ и транслейт.
  • Он также объясняет, как использовать виш для размещения деревьев в игровой зоне.

Элементы управления

16:12
  • Автор создает кнопку "пауза" и "плей" с использованием тэга "тэк батон" и тэга "им джи".
  • Он также стилизует кнопку, уменьшая ее размер и добавляя анимацию при наведении курсора.

Отрисовка элементов

19:38
  • Автор добавляет в игру монетку, знак опасности и стрелку, используя соответствующие картинки.
  • Он также устанавливает правильные размеры для этих элементов.

Запрет скрола

21:18
  • В конце видео автор запрещает пользователю использовать скрол, чтобы предотвратить неправильное отображение игры.