cours n°7 · Découverte

Bouger un sprite

Un sprite, c'est un rectangle : x, y, vitesse, boucle. Tout un jeu tient dans ces quatre mots.

~11 min7 stations
▶ vidéo🧩 exercices📄 cheat sheet

42 secondes · sous-titres Français inclus · 8.4 Mo

Les 7 trucs que tu vas savoir faire

Leçon 7 : Bouger un 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.

La position, deux nombres

Pose la position de départ : `x = 10` et `y = 20`. Ton sprite n'existe pas encore — il est juste quelque part.

Bouger, c'est additionner

Écris `avancer(x, vitesse)` qui renvoie la nouvelle position en x. Flèche droite = vitesse positive, flèche gauche = négative.

Les deux 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 fois par seconde

É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.

La touche choisit un signe

É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.

Leçon 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.

Partage la leçon

← tous les cours

📄 La feuille de chute

imprime-la, colle-la à ton écran, fais semblant que c'est ton idée

📄 Cheat sheet — Bouger un sprite (x, y dans l'espace)

Un sprite est un rectangle. Bouger, c'est faire des maths sur deux nombres. Voilà, t'es game dev.

Les 4 mots du métier

Mot Ce que c'est Exemple
position où il est, 2 nombres x = 10, y = 20
vitesse de combien il bouge vitesse = 5
delta le changement de cette frame dx = vitesse
boucle on recommence, 60×/s regarde → déplace → redessine

Bouger = additionner

x = 10
x += 5     # droite   (x = 15)
x -= 5     # gauche   (x = 10)

def avancer(x, vitesse)
  x + vitesse   # la vitesse NÉGATIVE va à gauche — c'est tout
end

Les deux axes, en une passe

def deplace(x, y, dx, dy)
  [x + dx, y + dy]     # diagonale = les deux bougent
end

deplace(0, 0, 3, 4)   # => [3, 4]

Rappel de l'écran : x → gauche/droite (souvent inversé aux joysticks 😉), y → haut/bas. En haut de l'écran, y diminue : l'origine (0,0) est en haut-gauche dans la plupart des moteurs.

La boucle qui fait tout le jeu

def anime(x, tours, vitesse)
  tours.times { x += vitesse }   # 60 frames = 1 seconde de jeu
  x
end

anime(0, 60, 1)   # => 60

Le jeu ne bouge pas : il se répète. C'est la seule chose qui se passe pendant que tu joues.

Les touches choisissent un signe

case fleche
when "droite" then x + vitesse
when "gauche" then x - vitesse
else x              # touche inconnue : rien ne bouge
end

Ta touche ne pousse rien : elle choisit un + ou un −.

Le piège du bord d'écran

(x + dx).clamp(0, largeur)   # jamais en dessous de 0, jamais au-delà de la largeur

Sans clamp, ton rectangle part visiter le vide — et le joueur te le fait payer.

À ne plus jamais dire

  • "le sprite avance" → tes coordonnées avancent, le rectangle reste un rectangle
  • "un moteur de jeu" → pour bouger un carré, tu n'as pas besoin d'un moteur. Juste d'un +.

SlopCourse Microduck — du slop au code propre.