Le guide ultime pour créer un jeu Snake en JavaScript

Si vous êtes complètement novice en programmation et que vous souhaitez créer quelque chose d'amusant, construire un jeu Snake en JavaScript est le projet parfait. JavaScript est un langage de programmation qui fonctionne dans votre navigateur, et Snake est un jeu classique et simple que vous pouvez créer tout en apprenant quelques techniques de base. Même les plus grands programmeurs du monde, comme Markus Persson de Minecraft et Sid Meier de la série Civilization, ont commencé par créer des jeux simples. Vous pouvez également devenir un tel programmeur en suivant ce guide et en créant vos propres versions de jeux classiques ! Voulez-vous déjà voir le résultat de ce que nous allons apprendre dans ce blog ? Voici le jeu que nous allons créer ensemble :

Dans le jeu, vous contrôlez le serpent vert avec les touches fléchées, et celui-ci grandit en mangeant de la nourriture (les blocs rouges). Vous recevrez un message de « Game Over » si vous heurtez un mur ou votre propre corps, ou s'il y a un bug, ce qui arrive souvent lors du test d'un nouveau jeu. La correction des bugs est l'une des tâches les plus importantes d'un programmeur, car qui voudrait jouer à un jeu plein d'erreurs ? Mais comme mentionné, nous allons d'abord créer une version très simple de Snake dans ce guide.

Ce dont tu as besoin

Étape 1 : Configuration du HTML

Nous allons commencer par créer la structure de base de notre page web. Le HTML est une langue qui dit au navigateur comment afficher le contenu d'une page.

1. Crée un nouveau fichier et appelle-le index.html.

2. Ouvre-le dans ton éditeur de texte favori.

Colle le code suivant dans le fichier :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jeu Snake Simple</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      border: 2px solid black;
      background-color: #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script src="snake.js"></script>
</body>
</html>

Qu’est-ce que cela fait ?

Étape 2 : Écrire notre JavaScript

Nous allons maintenant créer le jeu. JavaScript est un langage qui permet de manipuler les éléments d’une page web. Ici, nous allons l'utiliser pour déplacer le serpent, placer de la nourriture et détecter les collisions.

1. Crée un nouveau fichier et appelle-le snake.js.

2. Ouvre-le dans ton éditeur de texte.

Colle le code suivant dans le fichier :

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

// Paramètres du grille et du canvas
const gridSize = 20;  // Chaque carré fait 20x20 pixels
const canvasSize = canvas.width / gridSize;  // Nombre de cases sur le canvas

let snake = [{ x: 10, y: 10 }];
let direction = { x: 0, y: 0 };  // Initialisation du serpent
let food = { x: Math.floor(Math.random() * canvasSize), y: Math.floor(Math.random() * canvasSize) };

let gameOver = false;

// Dessiner un carré sur le canvas
function drawSquare(x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
}

// Dessiner le serpent et la nourriture
function drawGame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  snake.forEach(segment => drawSquare(segment.x, segment.y, 'lime'));

  drawSquare(food.x, food.y, 'red');
}

// Mettre à jour la position du serpent
function updateSnake() {
  const newHead = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

  // Si le serpent mange la nourriture
  if (newHead.x === food.x && newHead.y === food.y) {
    food = { x: Math.floor(Math.random() * canvasSize), y: Math.floor(Math.random() * canvasSize) };
  } else {
    snake.pop();  // Retirer le dernier segment si pas de nourriture mangée
  }

  snake.unshift(newHead);
}

// Vérifier les collisions
function checkCollision() {
  const head = snake[0];

  // Collision avec le mur
  if (head.x < 0 || head.x >= canvasSize || head.y < 0 || head.y >= canvasSize) {
    gameOver = true;
  }

  // Collision avec le corps
  for (let i = 1; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
      gameOver = true;
    }
  }

  if (gameOver) {
    alert("Fin de partie!");
    snake = [{ x: 10, y: 10 }];
    direction = { x: 0, y: 0 };
    food = { x: Math.floor(Math.random() * canvasSize), y: Math.floor(Math.random() * canvasSize) };
    gameOver = false;
  }
}

// Écouter les touches du clavier
document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowUp':
      if (direction.y === 0) direction = { x: 0, y: -1 };
      break;
    case 'ArrowDown':
      if (direction.y === 0) direction = { x: 0, y: 1 };
      break;
    case 'ArrowLeft':
      if (direction.x === 0) direction = { x: -1, y: 0 };
      break;
    case 'ArrowRight':
      if (direction.x === 0) direction = { x: 1, y: 0 };
      break;
  }
});

// Boucle principale du jeu
function gameLoop() {
  if (!gameOver) {
    updateSnake();
    checkCollision();
    drawGame();
  }
}

// Exécuter la boucle toutes les 100 ms
setInterval(gameLoop, 100);

Que fait ce code JavaScript ?

Étape 3 : Lancer ton Jeu Snake

Maintenant que tu as créé les fichiers index.html et snake.js, c’est le moment de voir le jeu en action !

Que faire ensuite ?

Maintenant que tu as construit un jeu Snake simple, voici quelques idées pour l'améliorer ou l'étendre :

Conclusion

Félicitations ! Tu as créé un jeu Snake simple en JavaScript. Ce projet est une excellente façon de pratiquer la programmation et de comprendre comment les mécaniques de jeu fonctionnent. Le meilleur dans tout ça ? Tu peux toujours l'améliorer et l’adapter comme tu le souhaites. Ajoute de nouvelles fonctionnalités, expérimente avec différents designs et, surtout, amuse-toi en codant !

Le développement de jeux est un moyen passionnant et créatif de développer tes compétences en programmation, alors continue à expérimenter et à apprendre. Amuse-toi bien avec la programmation !