Как написать игру на JS: простая игра в браузере без библиот

Самый простой путь написать игру на JS — сделать HTML-страницу, добавить <canvas> и обновлять состояние игры через requestAnimationFrame. Для первого проекта не нужны движки и сборщики: достаточно одного файла index.html, чтобы понять игровой цикл, управление и проверку столкновения

Ниже пример мини-игры: синий квадрат двигается стрелками, зеленая цель стоит на поле, счет растет при касании

Содержание

Минимальный файл index.html
Из каких частей состоит игра
Как проверить, что все работает
Частые ошибки новичков
Пытаться писать игру без игрового цикла
Перерисовывать без очистки canvas
Сразу брать сложный движок
Мини-задание
Что почитать дальше по JavaScript

Минимальный файл index.html

Создайте файл index.html и вставьте код:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Игра на JS</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 24px;
    }

    canvas {
      border: 2px solid #222;
      background: #f5f7fb;
    }
  </style>
</head>
<body>
  <h1>Мини-игра на JavaScript</h1>
  <p>Счет: <span id="score">0</span></p>
  <canvas id="game" width="480" height="300"></canvas>

  <script>
    const canvas = document.querySelector("#game");
    const ctx = canvas.getContext("2d");
    const scoreElement = document.querySelector("#score");

    const player = { x: 40, y: 40, size: 28, speed: 4 };
    const target = { x: 260, y: 150, size: 24 };
    const keys = {};
    let score = 0;

    document.addEventListener("keydown", (event) => {
      keys[event.key] = true;
    });

    document.addEventListener("keyup", (event) => {
      keys[event.key] = false;
    });

    function movePlayer() {
      if (keys.ArrowLeft) player.x -= player.speed;
      if (keys.ArrowRight) player.x += player.speed;
      if (keys.ArrowUp) player.y -= player.speed;
      if (keys.ArrowDown) player.y += player.speed;

      player.x = Math.max(0, Math.min(canvas.width - player.size, player.x));
      player.y = Math.max(0, Math.min(canvas.height - player.size, player.y));
    }

    function isTouching(a, b) {
      return (
        a.x < b.x + b.size &&
        a.x + a.size > b.x &&
        a.y < b.y + b.size &&
        a.y + a.size > b.y
      );
    }

    function moveTarget() {
      target.x = Math.random() * (canvas.width - target.size);
      target.y = Math.random() * (canvas.height - target.size);
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.fillStyle = "#2563eb";
      ctx.fillRect(player.x, player.y, player.size, player.size);

      ctx.fillStyle = "#16a34a";
      ctx.fillRect(target.x, target.y, target.size, target.size);
    }

    function gameLoop() {
      movePlayer();

      if (isTouching(player, target)) {
        score++;
        scoreElement.textContent = score;
        moveTarget();
      }

      draw();
      requestAnimationFrame(gameLoop);
    }

    gameLoop();
  </script>
</body>
</html>

Откройте файл в браузере. Нажимайте стрелки: квадрат должен двигаться, а при касании цели счет должен увеличиваться

Из каких частей состоит игра

В любой простой браузерной игре есть три базовые части

Первая — состояние игры: координаты игрока, цель, счет, нажатые клавиши

const player = { x: 40, y: 40, size: 28, speed: 4 };
let score = 0;

Вторая — ввод. Мы запоминаем, какие клавиши нажаты:

document.addEventListener("keydown", (event) => {
  keys[event.key] = true;
});

Третья — игровой цикл. Он обновляет координаты, проверяет столкновение и перерисовывает экран:

function gameLoop() {
  movePlayer();
  draw();
  requestAnimationFrame(gameLoop);
}

requestAnimationFrame удобен для анимации: браузер вызывает функцию перед следующей перерисовкой страницы

Как проверить, что все работает

Проверка простая:

страница открывается без ошибок в Console;
поле canvas видно на странице;
стрелки двигают квадрат;
квадрат не выходит за границы поля;
при касании цели счет увеличивается;
цель появляется в новой точке.

Если ничего не двигается, откройте DevTools и посмотрите Console. Часто ошибка оказывается в одной букве: querySelector("#game") не совпал с id="game", или код запустился до появления canvas

Частые ошибки новичков

Пытаться писать игру без игрового цикла

Один обработчик клика не делает игру. Игре нужен цикл: обновить состояние, нарисовать кадр, повторить

Перерисовывать без очистки canvas

Если не вызвать ctx.clearRect, старые кадры останутся на поле, и картинка быстро превратится в следы

Сразу брать сложный движок

Для первой игры движок только добавит новых терминов. Сначала разберитесь с canvas, координатами, циклами и событиями

Мини-задание

Добавьте таймер на 30 секунд или сделайте цель меньше после каждого попадания. Если справились, следующий шаг — экран старта, экран проигрыша и кнопка «Начать заново»