input
какие клавиши удерживаются
Надёжная механика разделяет данные и изображение. Координата игрока, скорость, стены и собранные предметы существуют в модели; Canvas лишь показывает их текущее состояние.
алгоритмкоординатыCanvas host
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
Такт игры
Старт и один такт дают разный способ наблюдать один и тот же алгоритм.
Скорость и кадры