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