JavaScript

TP 15 : Dessin et animation avec Canvas

Dessin et animation avec Canvas. Dans cette leçon du cours JavaScript, vous apprendrez à : dessiner une scène complète avec l'API Canvas ; construire une boucle d'animation avec un temps écoulé dt ; g...

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

À propos de ce cours

Chapitre 15 — Animations et graphismes avec Canvas · 15.5 TP 15 : Dessin et animation avec Canvas

🎯 Objectifs de la leçon
• dessiner une scène complète avec l'API Canvas ;
• construire une boucle d'animation avec un temps écoulé dt;
• gérer clavier, souris et collisions ;
• organiser un petit jeu en objets et en états.

Présentation

Vous allez programmer un casse-briques: une balle rebondit sur les murs et sur une raquette pilotée par le joueur, et casse des briques. Le jeu mobilise tout le chapitre : dessin (15.2), animation (15.3), interaction et collisions (15.4). Vous pourrez aussi réutiliser les classes du chapitre 16.

Voici le résultat attendu. Les questions de chaque partie vous guident ; aucune solution n'est donnée.

Le casse-briques en cours de partie
Figure 1 — Le jeu à obtenir (en cours de partie).

Fichiers de départ

⬇ Télécharger les fichiers de départ du TP (tp15-depart.zip)

index.html (à ne pas modifier)

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Casse-briques</title>
  <style>
    body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #0f172a; color: #e2e8f0; font-family: system-ui, sans-serif; }
    canvas { background: #111827; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: 95vw; }
    p { text-align: center; color: #94a3b8; }
  </style>
</head>
<body>
  <main>
    <canvas id="jeu" width="640" height="420"></canvas>
    <p>← → ou souris : déplacer · Espace : lancer · P : pause</p>
  </main>
  <script src="jeu.js"></script>
</body>
</html>

jeu.js (à compléter)

// =====================================================================
//  TP 15 — Casse-briques : fichier de départ
//  Complétez ce fichier en suivant les parties du TP.
// =====================================================================

const canvas = document.querySelector("#jeu");
const ctx = canvas.getContext("2d");

// ---- Réglages du jeu (vous pouvez les modifier) ----
const CONFIG = {
  raquette: { largeur: 100, hauteur: 14, vitesse: 480, marge: 30 },     // vitesse en px/s
  balle: { rayon: 8, vitesse: 320 },                                    // px/s
  briques: { lignes: 5, colonnes: 10, largeur: 56, hauteur: 20, espace: 6, haut: 50 },
  couleurs: ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6"],    // une par ligne
  points: [50, 40, 30, 20, 10],                                          // une par ligne
  vies: 3,
};

// PARTIE 2 — Dessiner la scène


// PARTIE 3 — La boucle d'animation


// PARTIE 4 — Les commandes (clavier et souris)


// PARTIE 5 — Les collisions


// PARTIE 6 — Score, vies et états du jeu

Calcul de la grille de briques et rebond sur la raquette
Figure 2 — Deux calculs à préparer sur papier.