Разборы 2D-механик и среды создания J2DRU. Движок в разработке и публично пока не открыт.
Как устроить счёт в 2D-игре: базовые очки за действие, множитель серии с шагом и потолком, окно времени, за которое серия сгорает, мягкий и жёсткий сброс при промахе и таблица рекордов из 10 мест с подсказкой, сколько очков не хватило. Расчёт на 500 прогонах показывает, как потолок множителя меняет разрыв между новичком и опытным игроком. Код проверен в Node.js 24.
Как загружать картинки, звук и данные уровня в браузерной 2D-игре: манифест с размерами файлов, прогресс по байтам вместо числа файлов, не больше 4 запросов одновременно, полоса без откатов назад, экран загрузки только для долгих загрузок и подгрузка следующего уровня заранее без повторных запросов. Код проверен в Node.js 24.
Как собрать пинг-понг в браузере на JavaScript: управление для двоих на одной клавиатуре через KeyboardEvent.code, отскоки и ускорение мяча с потолком скорости, подача к проигравшему и компьютерный соперник, который предсказывает точку прилёта с отскоками, но реагирует с задержкой и ошибается. Три уровня сложности с измеренной долей отбитых мячей, код проверен в Node.js 24.
Как расставить контрольные точки (чекпойнты) в 2D-уровне по расчёту, а не на глаз: формула ожидаемых потерь времени от длины участка, шанса пройти его и времени возврата, жадная расстановка точек по бюджету потерь, что откатывать при гибели и пример на JavaScript, проверенный в Node.js 24.
Как сделать плавное движение в 2D-игре без физики: формула твина от прошедшего времени, функции плавности linear, ease-in, ease-out, ease-in-out и с перелётом, их аналоги в CSS cubic-bezier, платформа по маршруту с постоянной скоростью и перенос стоящего на ней игрока. Код проверен в Node.js 24.
Как создавать и удалять снаряды, монеты и частицы в 2D-игре без ошибок и лишней нагрузки: формула «одновременно на экране = время жизни ÷ интервал создания», почему нельзя удалять объект из массива во время обхода, отложенное удаление с флагом и swap-and-pop, пул объектов со списком свободных и проверенный в Node.js код на JavaScript.
История жанра «разбей блоки»: правила Breakout 1976 года (8 рядов, очки 1/3/5/7, четыре ступени ускорения мяча, ракетка вдвое короче, максимум 896 очков), прототип Возняка на 44 микросхемах, Super Breakout с несколькими мячами и Arkanoid от Taito (июль 1986) с прочными и неразрушимыми блоками, капсулами-бонусами и боссом DOH. Плюс шаблон блоков и бонусов и код на JavaScript для своей игры.
Что такое вызов отрисовки и почему 1000 спрайтов стоит рисовать одним пакетом, как атлас текстур и порядок слоёв влияют на число пакетов, сколько байт уходит в видеокарту за кадр, чем WebGPU отличается от WebGL2, где он работает по данным caniuse на ноябрь 2026 года и как игре перейти на WebGL2, если WebGPU недоступен.
Три способа двигать героя в 2D-игре на JavaScript: шаг по клеткам по таймеру с плавной отрисовкой, свободное движение со скоростью v × dt и гибрид, как в Pac-Man, — плавные пиксели, решения по клетке центра, доворот до центра полосы, окно и буфер поворота, проверка обмена клетками. Пересчёт скорости из клеток в пиксели, код проверен в Node.js.
Как устроить звук браузерной 2D-игры на Web Audio API: шины master, музыка, эффекты и интерфейс на GainNode, запуск AudioContext после первого действия игрока по политике автозапуска, перевод между децибелами и линейной громкостью по формуле 20 × log10(g), лимит одновременных голосов, кулдаун и вытеснение по приоритету. Код на JavaScript проверен в Node.js.
Пошаговый поиск просадок кадра в браузерной 2D-игре: бюджет 16,67 мс и около 10 мс на свою работу по модели RAIL, замер performance.now() с перцентилями вместо среднего, запись в панели Performance Chrome DevTools с замедлением процессора, дорожка Frames, долгие задачи от 50 мс, Minor GC и график памяти. Код замера на JavaScript проверен в Node.js.
Где хранить прогресс браузерной 2D-игры: ограничения localStorage (только строки, около 5 МиБ, QuotaExceededError), когда переходить на IndexedDB, как версионировать формат сохранения и писать миграции, когда сохранять (visibilitychange), почему браузер может удалить данные и что дают navigator.storage.persist() и estimate().
Как генерировать уровни 2D-игры и рогалика: сетка комнат Rogue, разбиение пространства BSP-деревом с комнатами и коридорами, пещеры клеточным автоматом по правилу 4-5, заливка для проверки связности, воспроизводимое зерно генератора и игровые проверки готового уровня.
Как работает поиск пути A* в 2D-игре на тайловой карте: чем он отличается от поиска в ширину, Дейкстры и жадного поиска, какую эвристику брать для 4 и 8 направлений, как задать стоимость клеток, разбить ничьи, не обходить всю карту, когда пути нет, и уложиться в бюджет кадра.
Как описать поведение героя 2D-платформера конечным автоматом: почему булевы флаги дают баги, таблица переходов для состояний стоит, бежит, прыжок, падение, присед, реализация через switch и через объекты-состояния с enter и exit, параллельные и иерархические автоматы, стек состояний для получения урона.
Почему пиксель-арт размывается в браузерной игре и как это исправить: imageSmoothingEnabled в Canvas2D, CSS image-rendering pixelated и crisp-edges, формула целочисленного масштаба, учёт devicePixelRatio на экранах 125% и 150%, таблица масштабов для 320×180, 384×216, 480×270 и 640×360.
Как разделить логику 2D-игры на модули с зависимостями в одну сторону: слои модулей, поиск цикла обходом в глубину, порядок инициализации топологической сортировкой и шина событий вместо взаимных импортов. Что происходит с циклическим импортом ES-модулей и код, проверенный в Node.js 24.
Как сделать HUD браузерной 2D-игры, который не уезжает с экрана и не прячется под вырез телефона: экранные координаты против мировых, якоря и отступы, масштаб от опорного разрешения 1280×720, безопасные зоны env(safe-area-inset-*) и размер цели касания 24 и 44 CSS-пикселя по WCAG 2.2. Код проверен в Node.js 24.
Исторический и инженерный разбор эволюции камеры в 2D-играх: неподвижный экран Space Invaders (1978), радар и упреждение камеры в Defender (1981), регистр PPUSCROLL и запрет возврата влево в Super Mario Bros. (1985), комнаты 16×11 тайлов в The Legend of Zelda (1986) и проверенный код двух камер на JavaScript.
Как отделить логику браузерной 2D-игры от конкретных клавиш: карта действий, KeyboardEvent.code вместо символа, стандартная раскладка Gamepad API, радиальная мёртвая зона стика с перемасштабированием и переназначение клавиш. Код проверен в Node.js 24.
Пошаговая логика игры «Змейка» на JavaScript: таймер шага с накопителем, хвост как массив клеток, переход через край по остатку от деления, очередь поворотов без разворота на 180°, еда только в свободных клетках. Код с тестами, проверенный в Node.js 24.
Как спроектировать честных врагов и ловушки в 2D-игре: три фазы атаки с замахом 250–400 мс под время реакции человека, математика патрулирования с паузой на краю, прощающий хитбокс шипов на 20–30% меньше спрайта и проверенный код стража на JavaScript.
Как устроена покадровая 2D-анимация в браузерной игре: расчёт прямоугольника кадра в атласе с полями и зазорами, опорная точка при развороте, своя частота клипа 8–24 к/с при экране 60 или 144 Гц и события на кадрах. Код на JavaScript, проверенный в Node.js 24.
Сравнение двух способов визуальной логики в 2D-движках: лист событий (Construct, GDevelop) и граф узлов (Unreal Blueprints), плюс блоки Scratch. Одна механика в двух записях, таблица выбора и код на JavaScript, проверенный в Node.js 24.
Формулы плавной 2D-камеры, мёртвой зоны и упреждения, коэффициенты параллакса слоёв, сжатие и растяжение с сохранением площади, тряска камеры через trauma и проверенный код камеры и отклика на JavaScript.
Как устроен игровой цикл 2D-игры: бюджет кадра 16,67 мс, deltaTime, фиксированный шаг физики с аккумулятором, проверка пересечения AABB, выталкивание по осям, различие коллайдера и триггера и проверенный код приземления на JavaScript.
Исторический и инженерный разбор базовых механик 2D-игр с 1972 года до наших дней: угол отскока в Pong, растущий хвост в Blockade и «Змейке», состояния врагов в Pac-Man и проверенный код угла отскока и целей привидений на JavaScript.
Разбор физики и таймингов прыжка в 2D-платформере: формулы скорости и гравитации по высоте и времени, окна Coyote Time (80–120 мс) и Jump Buffering и проверенный код прыжка на JavaScript.
Как устроены тайловые сетки в 2D-играх: расчёт экономии памяти, слои сцены, битовые маски автотайлинга на 16 и 47 клеток, отсечение невидимых клеток камеры и проверенный код поиска клетки и автотайлинга на JavaScript.
