Events and Sprays

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

The key does not move the image directly. It creates an event; the processor changes the coordinates in condition; then the scene is repainted. This separation makes the game verifiable.
Developments
coordinates
Status
01
The Path of One Event
1 · Introduction
ArrowRight Pressure
2 · Event
{key: "right"}
3 · update
x = x + speed
4 · verification
Threshold and walls
5 · draw
New shot
If the processor only draws a new circle but does not change x in condition, the next frame will return the old position.
02
Scene coordinate system
Axle x
It grows from left to right. Change x controls horizontal motion.
Axle y
In Canvas, it grows from top to bottom. To pick up the sprite, y is reduced.
Key
Change
Verification
←
x -= speed
x ≥ radius
→
x += speed
x ≤ width-radius
↑
y -= speed
y ≥ radius
↓
y += speed
y ≤ height-radius
03
Sprite and state
Geometry
x
,
y
size and direction are required for motion and collision.
Rules
Speed, life, glasses, and regime determine permissible changes.
Looks
The color and image show the state, but not the only storage area.
state = {
"x": 70, "y": 200,
"speed": 24,
"score": 0,
"stars": [[180, 100], [350, 185]]
}
04
Several scenarios
In Scratch-like environments, two scenarios can be active at the same time: one moves the background, the other checks the timer, the third listens to the keys. The race error occurs if the scenarios change one variable without a clear rule.
Flag
Creates the initial state and starts the main cycle.
Key
Changes movement only after a specific user input.
Communication
Connects sprits without directly changing other people's internal data.
Clone
Creates a new copy with its own coordinates and status.
05
Debrief
1.
See if the event and the processor are on.
2.
Show the current x, y, speed and mode on the stage.
3.
Do one thing and compare the state before and after.
4.
Check the boundaries and the collision separately from the traffic.
5.
Repeat the test after restart: Initial data must be restored.