Как создать игру на JavaScript?

Разработка — одна из первых сфер, куда внедрился искусственный интеллект. Сейчас технология помогает писать код, искать ошибки, оптимизировать программы и разрабатывать их логику. В статье GigaChat расскажем, как использовать нейросети для разработки игр на JavaScript, а также разберем ограничения ИИ в этой области.

Основы JavaScript для игровой разработки

JavaScript — это язык программирования, который используют в том числе для разработки игр. Он поддерживает события, работает прямо в браузере и интегрируется с библиотеками, а код на JavaScript можно написать с помощью ИИ.

Разберем базовые концепции языка:

• Переменные (хранят состояния). Например, количество жизней или очков персонажа. Ключевое слово для создания переменной — let (или const для констант):

let score = 0;
let playerHealth = 100;

В игровой разработке наиболее актуальны такие типы данных, как Number, String, Boolean, Object, Array.

• Функции (описывают логику игры). Например, движения и другие действия персонажа, подсчет очков, столкновения игроков, активация анимаций. Ключевое слово — function:

function movePlayer(dx, dy) {  // простая функция для изменения координат игрока
  playerX += dx;
  playerY += dy;
}

• Условные конструкции (нужны для реализации правил игры). Например, условия победы или поражения, перехода на новый уровень. Используются конструкции if/else и switch:

if (playerHealth <= 0) {
  gameOver();  // если здоровье меньше или равно 0, будет вызвана функция gameOver()
  }

• Объекты и классы (нужны для создания игровых сущностей). Например, персонажей или предметов. Ключевое слово — class:

class Player {
  constructor(x, y) {
  this.x = x;
  this.y = y;
  this.health = 100;
  }    // шаблон игрока нужен, чтобы не описывать все переменные по отдельности
 
 
  move(dx, dy) {  // аналог movePlayer(), который теперь «живет» в объекте
  this.x += dx;
  this.y += dy;
  }
  }

• Циклы (нужны для обновления игры, управления множеством персонажей). Иногда разработчики используют операторы for и while, но наиболее распространены такие варианты:

function gameLoop() {
  update();  //допустим, функция проверяет, нажаты ли клавиши и живы ли враги
  render();  // отвечает за визуализацию результата работы update()
  requestAnimationFrame(gameLoop);  // вызывает gameloop(), когда браузер готов обновить экран
  }

• События (реагируют на действия пользователя). Например, нажатие клавиш в меню или передвижения персонажа:

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowRight") movePlayer(5, 0);
  });  // если пользователь нажал на стрелку вправо, будет вызвана movePlayer() с параметрами 5, 0

Также в играх часто нужно выполнять код отсрочено — для этого есть функции setTimeout (выполняет функцию однократно) и setInterval (выполняет функцию многократно с заданным интервалом). Пример использования:

setTimeout(() => {
  spawnEnemy();
  }, 2000); // указываем время в миллисекундах (1000 миллисекунд = 1 секунда)

Для рисования графики в большинстве случаев используют элемент <canvas> HTML5. Создать холст можно так:

<canvas id="game" width="800" height="600"></canvas>

Пример рисования:

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");


ctx.fillRect(playerX, playerY, 50, 50);

Структура проекта и настройка окружения

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

Структура простого проекта игры на JavaScript может выглядеть так:

• index.html — HTML-страница игры;
• style.css — стили интерфейса;
• game.js (main.js) — игровой код;
• assets/ (images/) — медиафайлы (аудио, картинки, шрифты и прочее);
• README.md — документация проекта.

Чем сложнее проект, тем более разветвленную структуру он имеет. Это создает порядок и дает удобный доступ к программе для каждого участника команды.

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

• Текстовый редактор или IDE. Самый популярный сервис — Visual Studio Code — отлично подойдет и для игровой разработки. Если привыкли пользоваться другим редактором, скорее всего, в нем также не возникнет проблем.
• Браузер для тестирования игры. Можно использовать любой современный браузер.
• Настройка Node.js, npm git для управления проектом, ускорения разработки и совместной работы.
• Локальный сервер (в некоторых случаях). Например, расширение VS Code Live Server.
• ИИ-ассистенты (если нужно). Они быстро исправляют ошибки, предлагают готовые фрагменты программы и генерируют блоки кода по запросу пользователя. В зависимости от редактора способ интеграции ИИ-помощника может отличаться, поэтому лучше уточнить это в документации инструмента.
• Инструменты тестирования. Например, Jest или Mocha.

Генерация кода игры с помощью ГигаЧата

Создание персонажей, объектов и врагов

Для генерации этого блока сформулируем такой запрос: «Напиши модуль для браузерной игры на JavaScript с использованием HTML5 Canvas. Реализуй классы Player, Enemy и GameObject. Каждый объект должен иметь свойства position, velocity, health и методы update() и draw(ctx). Приведи пример создания массива врагов и их рендера в игровом цикле. Добавь комментарии, чтобы код был понятен». Теперь разберем этот промпт:

• Важно указывать, что нужен именно модуль, а не «фрагмент», «часть» или «кусок» кода. Иначе нейросеть может выдать результат, который придется дорабатывать, чтобы вставить в проект.
• Классы Player и Enemy — это шаблоны, с помощью которых можно создать много игроков и врагов.
• Свойства position, velocity и health отвечают за координаты, скорость и здоровье соответственно.
• Функция update() обновляет игру, а draw() рисует объекты на экране.

Результат работы ГигаЧата:

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

Обработка действий игрока и игровая логика

Теперь попросим ГигаЧат усложнить игру и придать ей смысл. Сформулируем такой промпт: «Добавь игровую логику: столкновения игрока с врагами, уменьшение здоровья, проверку условия проигрыша и вывод сообщения на экран („Game Over“). Реализуй основной игровой цикл с requestAnimationFrame».

Результат:

Анимация, очки и уровни

Здесь тоже лучше генерировать код по частям: сначала добавим систему уровней и очков, а затем анимацию. Теперь будем использовать такой запрос: «Добавь систему очков, они должны увеличиваться при уничтожении врагов. Отобрази очки в верхней части Canvas. Реализуй систему уровней сложности: чем выше уровень, тем больше врагов и тем быстрее они двигаются. Добавь переменную level и функцию перехода на следующий уровень. Комментируй важные фрагменты кода».

Результат:

Для создания анимации подойдет промпт «Сгенерируй код анимации персонажа в Canvas с использованием спрайт‑листа или изменения кадров. Реализуй простую анимацию движения с помощью setInterval или requestAnimationFrame».

Результат:

Тестирование, отладка и исправление ошибок с помощью ГигаЧата

Тестирование и отладка — это обязательные этапы разработки любого ПО, включая игры. Они нужны, чтобы найти логические ошибки, оценить производительность и корректность обработки пользовательского ввода. Как правило, в играх ошибки проявляются неправильным движением персонажей, подсчетом очков, проблемами с анимацией, зависаниями и так далее.

Иногда ошибки получается найти самостоятельно, но на это уходит много времени. Нейросети умеют быстро анализировать код и четко указывать на ошибки, предлагая при этом варианты исправления. Лучше выстроить процесс так:

1. Создание запроса — опишите назначение кода и ошибку, которая возникает при запуске игры. Если явных ошибок нет, просто попросите ГигаЧат провести анализ программы. Конечно, к промпту нужно приложить и сам код.
2. Анализ рекомендаций и исправление кода.
3. Тестирование программы в браузере.

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

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

let playerHealth = 100;

function takeDamage(damage) {
  if (playerHealth > 0) {
    playerHealth = playerHealth - damage;
  }

  if (playerHealth == 0) {
    console.log("Game Over");
  }
}

Теперь отправим этот фрагмент ГигаЧату с таким запросом:

«Проанализируй мой код игры на JavaScript, найди синтаксические и логические ошибки, если они есть. Предложи исправленный вариант и объясни, почему он правильный».

Результат:

Заключение и следующие шаги

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

• улучшить графику, создать меню и таблицу с рекордами пользователей, реализовать функцию паузы;
• добавить звуки шагов, столкновений или фоновую музыку (кстати, через ИИ можно сгенерировать и звуки);
• развить игровую логику: добавить другие типы врагов, систему достижений, новые предметы для персонажей, диалоги или сюжетные линии;
• улучшить производительность — нейросеть не может решить эту задачу идеально, поэтому ручная оптимизация остается наиболее ценной;
• опубликовать игру (хотя это можно сделать и с простым проектом).

Создавая игру на JavaScript с помощью ИИ, человек получает удовольствие и учится одновременно: решает творческие и технические задачи, получает навык анализа кода, интеграции модулей, разработки структуры проекта. Впоследствии простой проект может стать основой для более сложного и занять место в портфолио разработчика.

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

Частые вопросы и ответы