Écrivez votre premier jeu : Snake en JavaScript en 10 minutes 🐍

🐍 Serpent en HTML pur + JS : étape par étape et avec des mèmes !

Avez-vous déjà rêvé d'écrire votre propre jeu ? Et que diriez-vous de ce classique : Serpents? 😎 Aujourd'hui, nous allons créer un vrai jeu rétro directement dans le navigateur, étape par étape. Pas de bibliothèques, pas de frameworks, seulement du HTML, du CSS et du JavaScript.

⚠️ Spoiler : vous ne lancerez pas seulement le serpent, vous comprendrez comment ça marche.

Et si soudain il vous semble que c'est difficile — calme, seulement calme, nous vous expliquerons tout avec des mèmes et des exemples. Allons-y ! 🚀

✨ Démo du projet | 📂 Télécharger le code source sur GitHub

🤖 Dans l'application Code vous pouvez apprendre le HTML, le CSS et le JavaScript, ainsi que de nombreux autres cours pour commencer votre parcours dans le développement Web ! 🌱

📦 Étape 1 : HTML — créer la base du jeu

HTML est un squelette. Nous y plaçons :

• canvas — notre toile sur laquelle nous allons dessiner un serpent et de la nourriture ;

• div avec des boutons pour le début et la fin du jeu ;

• compteur de points.

<canvas id="game" width="320" height="320"></canvas>

🎨 Étape 2 : CSS — le style sans lequel ce serait ennuyeux

Un peu de magie des styles :

• fond noir

• canevas avec cadre et bords arrondis

• adaptation aux appareils mobiles (touch-action)

Les boutons, les titres, les écrans de démarrage et de fin sont également stylisés pour que le jeu soit agréable.

🧠 Étape 3 : JavaScript est le cerveau de tout le serpent 🧬

Maintenant, nous allons analyser en détail l'ensemble du code du jeu.

1. Initialisation des éléments :

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

canvas — nous accédons à l'élément canvas. ctx — c'est ce que nous allons utiliser pour dessiner.

Nous déclarons également les variables : taille de la cellule, direction du serpent, points, vitesse et état du jeu.

const scale = 20;
const rows = canvas.height / scale;
const columns = canvas.width / scale;
let direction = { x: 1, y: 0 };
let nextDirection = { x: 1, y: 0 };
let speed = 250;
let score = 0;

2. Classe Snake — le serpent lui-même :

class Snake {
  constructor() {
    this.body = [
      { x: 5, y: 5 },
      { x: 4, y: 5 },
    ];
  }

  update() {
    const head = { ...this.body[0] };
    head.x += direction.x;
    head.y += direction.y;
    this.body.unshift(head);

    if (head.x === fruit.x && head.y === fruit.y) {
      score++;
      if (speed > 80) speed -= 5;
      placeFruit();
    } else {
      this.body.pop();
    }
  }

  draw() {
    this.body.forEach((segment, i) => {
      ctx.fillStyle = i === 0 ? "#58a6ff" : "#3fb950";
      ctx.beginPath();
      ctx.roundRect(
        segment.x * scale + 2,
        segment.y * scale + 2,
        scale - 4,
        scale - 4,
        6
      );
      ctx.fill();
    });
  }

  checkCollision() {
    const [head, ...body] = this.body;
    return (
      head.x < 0 ||
      head.x >= columns ||
      head.y < 0 ||
      head.y >= rows ||
      body.some((s) => s.x === head.x && s.y === head.y)
    );
  }
}

Explication :

• update() — on déplace le serpent et on vérifie s'il a mangé le fruit ;

• draw() — on dessine chaque segment ;

• checkCollision() — vérification des collisions avec les limites ou avec elle-même.

3. Nourriture (fruit) :

function placeFruit() {
  fruit = {
    x: Math.floor(Math.random() * columns),
    y: Math.floor(Math.random() * rows),
  };

  if (snake.body.some((s) => s.x === fruit.x && s.y === fruit.y)) {
    placeFruit();
  }
}

La nourriture est placée au hasard. Si elle tombe sur un serpent, nous la générons à nouveau.

4. Cycle de jeu :

function gameLoop(time = 0) {
  if (!playing) return;
  const delta = time - lastTime;
  if (delta > speed) {
    direction = nextDirection;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    snake.update();
    if (snake.checkCollision()) {
      endGame();
      return;
    }
    drawFruit();
    snake.draw();
    lastTime = time;
  }
  requestAnimationFrame(gameLoop);
}

Chaque « cadre » :

• nettoyons la toile

• déplacer le serpent

• vérifier la mort

• dessiner de la nourriture et un serpent

5. Gestion :

Clavier :

window.addEventListener("keydown", (e) => {
  if (e.key === "ArrowUp" && direction.y !== 1) nextDirection = { x: 0, y: -1 };
  if (e.key === "ArrowDown" && direction.y !== -1) nextDirection = { x: 0, y: 1 };
  if (e.key === "ArrowLeft" && direction.x !== 1) nextDirection = { x: -1, y: 0 };
  if (e.key === "ArrowRight" && direction.x !== -1) nextDirection = { x: 1, y: 0 };
});

Swipes :

canvas.addEventListener("touchstart", (e) => { ... });
canvas.addEventListener("touchend", (e) => { ... });

💀 Fin du jeu :

function endGame() {
  playing = false;
  canvas.style.display = "none";
  scoreDisplay.style.display = "none";
  gameOverScreen.style.display = "flex";
  finalScore.textContent = `You scored ${score} points`;
}

✅ Conclusion : vous êtes devenu un maître serpent 🐍

Tu n'as pas seulement écrit le code, tu as compris comment fonctionne la logique du jeu. C'est un grand pas !

Vous voulez en savoir plus ? Venez à Code - il y a beaucoup d'exercices, d'explications dans un langage simple et des tâches amusantes.