Création d’un Mini Jeu avec HTML Canvas : Code, Apprends et Amuse-toi ! 🎮✨

Salut mon chou ! 💖
Aujourd’hui, je vais te montrer comment créer un mini jeu rétro. Mais attends, ce ne sera pas un de ces tutoriels techniques ennuyeux. 😎
Dans ce guide, tu vas :

• Apprendre exactement comment utiliser Canvas
• Explorer la logique de mouvement et de collision avec JS
• Contrôler la vitesse du jeu, le score et les ennemis
• Développer ton propre jeu immédiatement avec des exemples de code et des astuces 💻🎉

Allons-y, parce que la scène est à toi, bébé ! 💃🕺

1️⃣ Qu’est-ce que le Canvas et Pourquoi l’Utiliser ? 🖼️✨

Canvas est une surface de dessin basée sur les pixels en HTML. Pense-le comme un tableau à dessin :

• Tu peux dessiner des lignes, formes, images, animations avec JS
• Créer des jeux dynamiques et interactifs sous les yeux de l’utilisateur

Exemple : Configuration simple du Canvas

<canvas id="gameCanvas" width="600" height="400" style="border:2px solid #000;"></canvas>

💡 Astuce, chéri :

• Utilise l’id pour accéder au Canvas en JS
• Ajuste width et height pour ton espace de jeu
• Utilise style pour ajouter des bordures et définir visuellement la zone de jeu

2️⃣ Concevoir le Jeu 🎯

Notre mini jeu :

• Un petit carré (joueur) peut se déplacer
• Des ennemis apparaissent aléatoirement à l’écran
• La collision termine le jeu avec “Game Over !”
• Un compteur de score suit la survie, et le jeu devient progressivement plus difficile

💡 Astuce pratique : Dessine ton design sur papier d’abord, planifie les éléments et leurs mouvements. Cela rend le codage beaucoup plus facile.

3️⃣ Déplacer le Joueur avec JS 🕹️

On peut contrôler le joueur avec des événements clavier :

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

let player = { x: 50, y: 180, width: 40, height: 40, speed: 5 };

document.addEventListener("keydown", movePlayer);

function movePlayer(e) {
  if(e.key === "ArrowUp" && player.y > 0) player.y -= player.speed;
  if(e.key === "ArrowDown" && player.y < canvas.height - player.height) player.y += player.speed;
  if(e.key === "ArrowLeft" && player.x > 0) player.x -= player.speed;
  if(e.key === "ArrowRight" && player.x < canvas.width - player.width) player.x += player.speed;
}

Explication du code, mon amour 💖 :

• keydown se déclenche à chaque pression d’une touche
• Les touches fléchées contrôlent la direction
• player.speed détermine le nombre de pixels que le joueur parcourt par pression
• Les vérifications de limites empêchent le joueur de sortir du canvas

💡 Astuce pratique : Ajuste la vitesse selon le niveau du joueur. Augmenter player.speed au fil du jeu le rend plus difficile.

4️⃣ Dessiner le Joueur 🎨

function drawPlayer() {
  ctx.fillStyle = "blue";      
  ctx.fillRect(player.x, player.y, player.width, player.height); 
}

Explication :

• fillRect(x, y, width, height) dessine un rectangle
• fillStyle définit la couleur
• Sans nettoyer le canvas, les frames précédentes restent visibles, donc nous utiliserons ctx.clearRect() dans la boucle du jeu

💡 Astuce : Plus tard, tu peux remplacer le rectangle par un sprite pour un personnage rétro en pixels !

5️⃣ Ajouter des Ennemis 🛸

Les ennemis se déplacent aléatoirement et disparaissent hors écran :

let enemies = [];

function createEnemy() {
  let y = Math.random() * (canvas.height - 30);
  enemies.push({ x: canvas.width, y: y, width: 30, height: 30, speed: 3 });
}

function drawEnemies() {
  ctx.fillStyle = "red";
  enemies.forEach(e => ctx.fillRect(e.x, e.y, e.width, e.height));
}

function moveEnemies() {
  enemies.forEach(e => e.x -= e.speed);
  enemies = enemies.filter(e => e.x + e.width > 0); 
}

Explication 💖 :

• Math.random() positionne les ennemis aléatoirement sur l’axe Y
• filter supprime les ennemis sortis de l’écran
• speed contrôle la vitesse des ennemis

💡 Astuce pratique : Augmente la vitesse ou la taille des ennemis pour rendre le jeu plus difficile.

6️⃣ Logique de Collision 🛑

Lorsqu’une collision se produit, le jeu se termine :

function checkCollision(player, enemy) {
  return player.x < enemy.x + enemy.width &&
         player.x + player.width > enemy.x &&
         player.y < enemy.y + enemy.height &&
         player.y + player.height > enemy.y;
}

function gameOver() {
  alert("Game Over! 😱");
  document.location.reload();
}

Explication :

• Collision de rectangles basique (AABB)
• Appelle gameOver() si la condition est remplie

💡 Astuce : Pour des jeux plus avancés, implémente la collision avec des sprites ou des formes irrégulières.

7️⃣ Boucle de Jeu et Animation 🔄

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); 

  drawPlayer();
  drawEnemies();
  moveEnemies();

  enemies.forEach(enemy => {
    if(checkCollision(player, enemy)) gameOver();
  });

  requestAnimationFrame(gameLoop); 
}

setInterval(createEnemy, 2000); // Nouvel ennemi toutes les 2 secondes

gameLoop();

Explication :

• requestAnimationFrame = animation fluide
• clearRect = efface la frame précédente
• setInterval = génère les ennemis à intervalles réguliers

💡 Astuce : Accélère le jeu en réduisant l’intervalle de génération des ennemis ou en augmentant leur nombre.

8️⃣ Système de Score ✨

let score = 0;

function drawScore() {
  ctx.fillStyle = "black";
  ctx.font = "20px Arial";
  ctx.fillText("Score: " + score, 10, 20);
}

// Dans la boucle de jeu
score++;
drawScore();

💡 Astuce :

• Le joueur gagne des points pour le temps de survie
• Sauvegarde le score avant une collision
• Ajoute des effets colorés ou du son pour rendre le jeu plus fun

9️⃣ Bonus : Astuces Avancées 😎

• Différents types d’ennemis : rapides, lents, grands ou petits
• Utiliser des sprites : remplacer les carrés par des images ou animations
• Système de niveaux : augmenter la vitesse et le nombre d’ennemis avec le temps
• Effets sonores : ajouter de l’audio pour collisions, points et montées de niveau

💡 Mon chou : De petits ajustements rendent ton jeu infiniment plus amusant ! 🎉

🔟 Résumé et Conclusion

Mon amour, maintenant tu as :

• Canvas = scène
• JS = pinceau magique
• Joueur et ennemis = personnages du jeu
• requestAnimationFrame = mouvement fluide
• Collision = difficulté du jeu

Ton mini jeu rétro est prêt ! 💻🎮✨

💡 Astuce finale : Change les couleurs, augmente la vitesse des ennemis, ajoute des power-ups… rends ton jeu à la fois amusant et éducatif ! 😎💖