Кодик
Начать бесплатно

«Змейка» на JavaScript: ваш первый игровой проект в браузере

Запускаем каркас «Змейки» на <canvas>, разбираем ключевые термины (игровой цикл, сетка, столкновения, состояние) и намечаем шаги JavaScript-логики. Подходит новичкам.

РазработкаОсновыПрофессия

6 мин

Стартовый экран и разметка интерфейса

Вот минимальный HTML, который создаёт три состояния: старт, игра и «игра окончена», плюс счёт и игровое поле.


<div id="startScreen">
  <h1>🐍 Змейка</h1>
  <button onclick="startGame()">Начать игру</button>
</div>

<div id="gameOverScreen" style="display:none">
  <h1>💀 Игра окончена!</h1>
  <p id="finalScore"></p>
  <button onclick="location.reload()">Играть снова</button>
</div>

<h1 id="score">Очки: 0</h1>
<canvas id="game" width="320" height="320"></canvas>

Что здесь происходит:

  • #startScreen — приветственный экран. Кнопка вызывает функцию startGame().

  • #gameOverScreen — появляется после столкновения змейки с собой или границей.

  • #score — отображает текущие очки.

  • <canvas> — игровое поле, на котором рисуется змея и еда.

Быстрый словарик терминов 👇

  • Canvas — HTML-элемент для 2D-рисования. Через JavaScript можно вручную рисовать квадраты, линии и фигуры.

  • Сетка (grid) — поле делится на равные квадраты (например, 16×16 пикселей). Все координаты змейки и еды выражаются через клетки.

  • Цикл игры (game loop) — функция, которая регулярно обновляет состояние игры и перерисовывает поле.

  • Столкновения (collisions) — проверки, не врезалась ли змея в себя или границу, и не съела ли она еду.

  • Состояние (state) — набор переменных: координаты, направление движения, счёт, статус (игра идёт или окончена).

Как оживить игру: логика на JavaScript?

Добавьте скрипт, который будет управлять движением змейки, проверять столкновения и отрисовывать каждый кадр:

  1. Инициализация: создайте canvas и контекст 2d, определите размер клетки и массива сегментов змейки.

  2. Управление: отслеживайте нажатия клавиш ArrowUp, ArrowDown, ArrowLeft, ArrowRight.

  3. Цикл игры: каждые 150 мс перемещайте змею, проверяйте столкновения, обновляйте счёт.

  4. Отрисовка: очищайте поле и рисуйте еду и сегменты змейки заново.

💡 Совет: используйте requestAnimationFrame для плавности, а частоту движения регулируйте через накопленный таймер.

Идеи для улучшений.

  • Добавьте ускорение — игра будет сложнее с каждым уровнем.

  • Сделайте «телепорты» по краям поля, чтобы змея выходила с другой стороны.

  • Храните рекорды в localStorage.

  • Добавьте светлую и тёмную темы.

  • Реализуйте паузу на клавишу P или Esc.

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

Проект «Змейка» — часть обучающих мини-проектов из приложения Кодик, созданных специально для новичков. Он помогает разобраться с основами JavaScript, понять, как работает логика игр и увидеть, как твой код оживает прямо в браузере.

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

А ещё у нас есть уютное сообщество в Telegram, где мы помогаем друг другу, делимся идеями и просто общаемся о программировании. Присоединяйся — будет классно! 🚀

👉 Наше комьюнити: https://t.me/coursme

Комментарии