Решён
Мне интересно, как создаются игры на сайте (браузерные)?

Feature Веб-разработка
2k
5

Видел крутые игры прямо в браузере, без скачивания. Например io-игры типа agar.io или slither.io.

На чем они пишутся? Можно ли самому научиться делать такие игры? С чего начать если я вообще никогда не программировал?

Решение
84
Эксперт • 2 ответа

Браузерные игры пишутся на JavaScript с использованием HTML5 Canvas (для 2D графики) или WebGL (для 3D).

Твой путь если ты с нуля:

Этап 1: Основы (2-3 месяца)

  • HTML/CSS - базовая верстка
  • JavaScript - синтаксис, переменные, функции, циклы, массивы
  • Учебники: learn.javascript.ru, freecodecamp

Этап 2: Canvas API (1 месяц)

  • Как рисовать фигуры, линии, картинки на Canvas
  • Анимация через requestAnimationFrame
  • Обработка событий клавиатуры и мыши

Этап 3: Первая простая игра (1 месяц)

  • Сделай Snake или Pong
  • Разберись с игровым циклом (game loop)
  • Научись детектить столкновения объектов

Этап 4: Многопользовательская игра (3-6 месяцев)

  • WebSocket для реалтайм связи
  • Node.js для серверной части
  • Синхронизация состояния игры между клиентами

Для io-игр типа agar.io нужен еще сервер который обрабатывает логику и рассылает состояние всем игрокам.

Фреймворки которые упростят жизнь:

  • Phaser.js (2D игры, много примеров)
  • Three.js (3D графика)
  • Babylon.js (3D игры)

Можно и без фреймворков на чистом Canvas, но будет дольше.

Аватар Feature

Спасибо! Значит мне сначала нужно выучить JavaScript. Попробую начать с learn.javascript.ru

8
Участник • 2 ответа

JavaScript + Canvas API. Для многопользовательских игр нужен сервер на Node.js + WebSocket.

Туториалы погугли, их тысячи.

50
Участник • 5 ответов

Я делал свою браузерную игру на Phaser. Это фреймворк который берет на себя всю рутину - физику, столкновения, спрайты, звуки.

Первую простую игру типа Flappy Bird сделал за неделю после изучения туториалов. Phaser офигенно документирован, куча примеров на сайте.

Советую начать именно с Phaser, а не с голого Canvas. Быстрее увидишь результат и не забросишь.

22
Участник • 2 ответа

Есть конструкторы игр без кода - GDevelop, Construct 3. Там визуальное программирование, просто перетаскиваешь блоки.

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

63
Участник • 2 ответа

Если хочешь делать крутые io-игры как agar - готовься потратить год минимум на обучение.

Проблема не в том чтобы нарисовать кружочки на экране. Проблема в оптимизации - когда у тебя 1000 игроков онлайн на одном сервере и нужно каждые 16мс пересчитывать позиции всех объектов и рассылать апдейты.

Там нужна математика (векторы, физика), алгоритмы (квадродерево для оптимизации коллизий), сетевое программирование (компенсация лагов).

Начни с простого - сделай одиночную игру типа Snake. Потом усложняй.

Написать ответ

Премодерация гостей

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

Будьте вежливы и соблюдайте правила платформы.