Javascript

Parcours JavaScript : jeux 2D, physique et WebGL

Pour les élèves qui aiment le web, les jeux vidéo et les expériences interactives 🎮 Niveau : de débutant (premier jeu) à avancé (WebGL et 3D légère).

---

1. C’est quoi JavaScript ?

JavaScript est le langage qui permet de rendre une page web vivante :

• faire bouger une balle dans un canvas ;
• créer un jeu de casse-briques ;
• simuler des oiseaux qui volent en groupe (boids) ;
• contrôler la gravité, la vitesse, les collisions ;
• et même parler à la carte graphique avec WebGL pour faire de la pseudo 3D.

Dans ce module, on va utiliser JavaScript pour coder des jeux, jouer avec la physique, puis faire un premier pas vers le rendu 3D.

---

2. Les activités proposées

1. Activité 1 – Jeu de casse-briques en JavaScript
   Tu crées un jeu classique : une barre en bas, une balle qui rebondit, des briques à détruire. Tu découvres :
   • le <canvas> HTML pour dessiner ;
   • comment détecter les collisions ;
   • comment déplacer la barre avec le clavier.
   👉 Jeu de casse-briques en JavaScript
2. Activité 2 – Les boids (simulation d’oiseaux)
   Tu découvres un algorithme célèbre : les boids. Ce sont des “oiseaux virtuels” qui suivent trois règles simples (se rapprocher du groupe, éviter les collisions, suivre la direction).
   • tu vois comment des règles simples créent un comportement complexe ;
   • tu manipules des vecteurs de position et de vitesse ;
   • tu joues avec des paramètres pour changer le comportement.
   👉 JavaScript – les boids
3. Activité 3 – Balle avec gravité
   Tu fais tomber et rebondir une balle comme dans la vraie vie :
   • gravité (la balle tombe de plus en plus vite) ;
   • rebonds sur le sol et les murs ;
   • perte d’énergie (la balle rebondit de moins en moins haut).
   👉 Balle avec gravité
4. Activité 4 – JavaScript : commandes de base
   Une fiche pour bien maîtriser les bases :
   • variables, conditions, boucles ;
   • fonctions ;
   • interaction avec la page (DOM, événements…).
   👉 JavaScript – commandes de base
5. Activité 5 – WebGL + JavaScript
   Premier pas vers la 3D dans le navigateur :
   • on initialise un contexte WebGL ;
   • on dessine des formes simples ;
   • on prépare le terrain pour les shaders et la 3D.
   👉 WebGL + JavaScript – code complet

---

3. Exemple : gérer le clavier dans un jeu

Dans le jeu de casse-briques, on a besoin de savoir si le joueur appuie sur la flèche gauche ou la flèche droite pour déplacer la barre.

Voici un exemple de gestion du clavier en JavaScript :

// Variables qui indiquent si une touche est enfoncée
let rightPressed = false;
let leftPressed  = false;

// Quand on appuie sur une touche
function keyDownHandler(event) {
  if (event.key === "Right" || event.key === "ArrowRight") {
    rightPressed = true;
  }
  if (event.key === "Left" || event.key === "ArrowLeft") {
    leftPressed = true;
  }
}

// Quand on relâche une touche
function keyUpHandler(event) {
  if (event.key === "Right" || event.key === "ArrowRight") {
    rightPressed = false;
  }
  if (event.key === "Left" || event.key === "ArrowLeft") {
    leftPressed = false;
  }
}

// On écoute les événements clavier sur la page
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);

// Dans ta boucle de jeu, tu peux faire :
function updatePaddlePosition() {
  if (rightPressed) {
    paddleX += 5; // déplacement vers la droite
  }
  if (leftPressed) {
    paddleX -= 5; // déplacement vers la gauche
  }
}

  

Idée pour les plus jeunes (6–10 ans) : comprendre que « quand j’appuie sur la flèche, une variable passe à vrai », et que la barre bouge. Idée pour les plus grands (collège/lycée) : comprendre la logique événementielle et la boucle de jeu.

---

4. QCM interactif : es-tu prêt pour coder des jeux en JavaScript ?

Coche une réponse par question, puis clique sur « Vérifier mes réponses ».

1. À quoi sert principalement JavaScript dans une page web ?
   a) À écrire le texte des articles.
   b) À mettre des couleurs et choisir les polices uniquement.
   c) À rendre la page interactive (jeux, animations, réactions aux clics/clavier…).
2. Dans un jeu de casse-briques, quel élément JavaScript contrôle la barre qui se déplace à gauche et à droite ?
   a) Le CSS uniquement.
   b) Du code JavaScript qui lit le clavier et qui modifie la position de la barre.
   c) Un fichier texte que le navigateur lit tout seul.
3. Les “boids”, dans l’activité 2, représentent…
   a) Des blocs de texte sur une page web.
   b) Des oiseaux virtuels qui suivent des règles simples de déplacement en groupe.
   c) Un nouveau type de boucle JavaScript.
4. Quand on parle de “balle avec gravité” dans un canvas JavaScript, on veut dire que…
   a) La balle reste toujours au même endroit.
   b) La balle se déplace uniquement quand on clique dessus.
   c) La balle tombe vers le bas et rebondit comme dans la réalité.
5. WebGL permet principalement de…
   a) Écrire des e-mails automatiquement.
   b) Dessiner des graphismes accélérés par la carte graphique dans le navigateur (2D avancée / 3D).
   c) Modifier directement le système d’exploitation.

Voir le corrigé détaillé

1 → c) JavaScript rend la page interactive.
2 → b) C’est le code JavaScript qui lit les touches et déplace la barre.
3 → b) Les boids sont des oiseaux virtuels qui suivent des règles simples.
4 → c) La gravité fait tomber et rebondir la balle comme dans la réalité.
5 → b) WebGL utilise la carte graphique pour des graphismes avancés dans le navigateur.