События и спрайты

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

Нажатие клавиши не двигает картинку напрямую. Оно создаёт событие; обработчик изменяет координаты в состоянии; затем сцена рисуется заново. Такое разделение делает игру проверяемой.
события
координаты
состояние
01
Путь одного события
1 · ввод
Нажата ArrowRight
2 · событие
{key: "right"}
3 · update
x = x + speed
4 · проверка
край и стены
5 · draw
новый кадр
Если обработчик только рисует новый круг, но не меняет x в состоянии, следующий кадр вернёт старую позицию.
02
Система координат сцены
Ось x
Растёт слева направо. Изменение x управляет горизонтальным движением.
Ось y
В Canvas растёт сверху вниз. Чтобы поднять спрайт, y уменьшают.
Клавиша
Изменение
Проверка
←
x -= speed
x ≥ radius
→
x += speed
x ≤ width-radius
↑
y -= speed
y ≥ radius
↓
y += speed
y ≤ height-radius
03
Спрайт и состояние
Геометрия
x
,
y
, размер и направление нужны для движения и столкновений.
Правила
Скорость, жизни, очки и режим определяют допустимые изменения.
Внешность
Цвет и образ отображают состояние, но не должны быть единственным местом хранения данных.
state = {
"x": 70, "y": 200,
"speed": 24,
"score": 0,
"stars": [[180, 100], [350, 185]]
}
04
Несколько сценариев
В Scratch-подобной среде два сценария могут быть активны одновременно: один двигает фон, другой проверяет таймер, третий слушает клавиши. Ошибка гонки появляется, если сценарии меняют одну переменную без понятного правила.
Флаг
Создаёт начальное состояние и запускает основной цикл.
Клавиша
Изменяет движение только после конкретного пользовательского ввода.
Сообщение
Связывает спрайты без прямого изменения чужих внутренних данных.
Клон
Создаёт новый экземпляр с собственными координатами и состоянием.
05
Отладка событий
1.
Проверь, происходит ли событие и тот ли обработчик запущен.
2.
Покажи на сцене текущие x, y, скорость и режим.
3.
Выполни одно событие и сравни состояние до и после.
4.
Проверь границы и столкновение отдельно от движения.
5.
Повтори тест после рестарта: начальные данные должны восстановиться.