Chargement de ta page…
TON PARCOURS
Des exercices courts, des indices progressifs et des explications pour avancer à ton rythme.
Crée un compte gratuit pour accéder aux leçons et sauvegarder ta progression. L’apprentissage gratuit utilise des cœurs quotidiens.
Créer mon compteDéjà un compte ? Me connecterCréez les bases d’un jeu 2D avec JavaScript et Canvas. Reliez le dessin, les déplacements et les collisions dans une boucle de jeu.
Avant de commencer : Connaître les fonctions JavaScript et les coordonnées x et y. Le parcours Front-End aide à comprendre l’élément canvas.
<canvas id="game" width="200" height="120"></canvas>
<script>
const ctx = document.getElementById("game").getContext("2d");
ctx.fillStyle = "#00a0c0";
ctx.fillRect(20, 30, 40, 40);
</script>Le contexte 2D fournit les outils de dessin. fillRect crée un rectangle à la position (20, 30), large de 40 et haut de 40 pixels.
À vous de jouer : Changez les deux premières valeurs de fillRect pour déplacer le rectangle sans modifier sa taille.
Tu veux savoir ce que chaque formule inclut ? Comparer les formules
HTML5 Canvas et JavaScript permettent de dessiner des sprites, gérer la boucle de jeu (requestAnimationFrame) et détecter des collisions AABB directement dans le navigateur.