Итак, про мини игры на js

Даже если игра одноразовая, без грамотной архитектуры можно получить большое количество проблем на свою голову (проверено лично). Поэтому делюсь тем, как обычно структурируют игры, чтобы можно было легко добавить новый уровень, поменять визуал, переиспользовать логику или просто минимизировать баги.


✨ MVC ✨

Это архитектурный подход из далёких 80-х, придуманный ещё для первых интерфейсов.
Его суть в чётком разделении ответственности:

M — Model → логика
V — View → отображение
C — Controller → обработка действий пользователя и связующее звено


Я люблю объяснять MVC через аналогию с обычным компьютером:

⚫️ Model — внутренняя работа системы
⚫️ View — то, что отображается на мониторе
⚫️ Controller — обработка действий пользователя

У этого подхода много вариаций, но общий принцип сохраняется.


Как это связано с игрой:

⚫️ Логика игры — правила, состояния, расчёты → выносим в отдельный модуль Model

⚫️ Отображение — HTML, canvas → это View, отдельный модуль

⚫️ И связка между ними → Controller. Этот модуль самый непостоянный: в зависимости от игры контроллер может отслеживать события пользователя, запускать тик игры, запрашивать обновления состояния игры и отрисовку.


При такой архитектуре модули независимы. Можно, например, один раз написать модель, а потом поменять графику: сначала сделать игру на HTML, а затем, без переписывания логики, перевести её на canvas или добавить WebGL.

Реализация вторична, тут главное понять принцип — разделяй и властвуй 😏