Игровая механика

Содержание и основные понятия

Надёжная механика разделяет данные и изображение. Координата игрока, скорость, стены и собранные предметы существуют в модели; Canvas лишь показывает их текущее состояние.
алгоритм
координаты
Canvas-оболочка
01
Почему нужен delta time
Частота кадров меняется: один браузер может нарисовать 60 кадров в секунду, другой меньше. Поэтому перемещение вычисляют не «на 3 пикселя за кадр», а по формуле
new_x = x + speed × delta
, где
delta
- прошедшее время в секундах.
скорость = 150 пикселей/сек
delta = 0.016 сек
смещение ≈ 2.4 пикселя
input
какие клавиши удерживаются
update
новые координаты и проверки
draw
текущее состояние на Canvas
02
Столкновение без магии
Игрок - круг
Для игрока достаточно центра
(x, y)
и радиуса
r
. Это удобно для свободного движения по плоскости.
Стена - прямоугольник
Для стены сохраняют левый верхний угол, ширину и высоту. Host находит ближайшую к центру игрока точку стены и сравнивает расстояние с радиусом.
Порядок важен
Сначала вычисли предполагаемую позицию, затем проверь стены, и только при отсутствии пересечения прими новые координаты. Так игрок не оказывается внутри препятствия.
03
Такт игры
Старт и один такт дают разный способ наблюдать один и тот же алгоритм.
↻
Скорость и кадры
04
Игра и её исходный код
Демонстрация ниже не прячет алгоритм. Измени скорость, границы, расположение кристаллов или правила победы, нажми «Запустить», затем управляй стрелками или WASD прямо в Canvas.
init()
создаёт состояние,
update()
вычисляет смещение через
dt
и проверяет стены,
draw()
строит кадр. Попробуй заменить скорость
240
пикселей в секунду на
360
, добавить стену или изменить радиус столкновения.
Редактор кода загружается…