Moving a sprite
A sprite is a rectangle: x, y, speed, loop. A whole game lives in those four words.
42 seconds · English captions included · 8.3 Mo
The 7 things you'll know how to do
Lesson 7: Moving a sprite
Regarde la leçon (42 s) : tout jeu vidéo se résume à faire bouger les coordonnées d'un rectangle. Spoiler : c'est fait.
Position, two numbers
Pose la position de départ : `x = 10` et `y = 20`. Ton sprite n'existe pas encore — il est juste quelque part.
Moving is adding
Écris `avancer(x, vitesse)` qui renvoie la nouvelle position en x. Flèche droite = vitesse positive, flèche gauche = négative.
The two axes
Écris `deplace(x, y, dx, dy)` qui renvoie la nouvelle position sous forme de tableau `[nouveau_x, nouveau_y]` — les deux axes en une seule passe.
60 times per second
Écris `anime(x, tours, vitesse)` : à chaque tour, on avance de `vitesse`. Après 60 tours à vitesse 1 depuis 0, x vaut 60 — sans écrire 60 lignes.
The key picks a sign
Écris `touche(fleche, x, vitesse)` : "droite" → x + vitesse · "gauche" → x − vitesse · toute autre touche → x inchangé. Ta touche ne pousse rien, elle choisit un signe.
Lesson 7: OK
Sans aide : `bouge(x, dx, largeur = 100)` — avance de dx, mais reste DANS l'écran : la position finale reste toujours entre 0 et `largeur` inclus.
📄 The cheat sheet
print it, stick it on your monitor, pretend it was your idea📄 Cheat sheet — Moving a sprite (x, y in space)
A sprite is a rectangle. Moving is arithmetic on two numbers. There — you're a game dev.
The 4 words of the trade
| Word | What it is | Example |
|---|---|---|
| position | where it is, 2 numbers | x = 10, y = 20 |
| speed | how much it moves | vitesse = 5 |
| delta | this frame's change | dx = vitesse |
| loop | we start over, 60×/s | regarde → déplace → redessine |
Moving = adding
x = 10
x += 5 # right (x = 15)
x -= 5 # left (x = 10)
def avancer(x, vitesse)
x + vitesse # NEGATIVE speed goes left — that's all
end
The two axes, in one pass
def deplace(x, y, dx, dy)
[x + dx, y + dy] # diagonal = both move
end
deplace(0, 0, 3, 4) # => [3, 4]
Screen reminder: x → left/right (often inverted on joysticks 😉), y → up/down.
At the top of the screen, y decreases: the origin (0,0) is top-left in most engines.
The loop that runs the whole game
def anime(x, tours, vitesse)
tours.times { x += vitesse } # 60 frames = 1 second of game
x
end
anime(0, 60, 1) # => 60
The game doesn't move: it repeats. That's the only thing happening while you play.
The keys pick a sign
case fleche
when "droite" then x + vitesse
when "gauche" then x - vitesse
else x # unknown key: nothing moves
end
Your key pushes nothing: it picks a + or a −.
The screen-edge trap
(x + dx).clamp(0, largeur) # never below 0, never past the width
Without clamp, your rectangle goes visit the void — and the player will make you pay.
Never say again
"the sprite advances"→ your coordinates advance, the rectangle stays a rectangle"a game engine"→ to move a square, you don't need an engine. Just a+.
SlopCourse 
— from slop to clean code.