« Serpent » en JavaScript : votre premier projet de jeu dans le navigateur

Écran de démarrage et balisage de l'interface

Voici le code HTML minimal qui crée trois états : démarrage, jeu et « jeu terminé », plus le score et le terrain de jeu.

<div id="startScreen">
  <h1>🐍 Змейка</h1>
  <button onclick="startGame()">Начать игру</button>
</div>

<div id="gameOverScreen" style="display:none">
  <h1>💀 Игра окончена!</h1>
  <p id="finalScore"></p>
  <button onclick="location.reload()">Играть снова</button>
</div>

<h1 id="score">Очки: 0</h1>
<canvas id="game" width="320" height="320"></canvas>
    

Que se passe-t-il ici :

• #startScreen — écran d'accueil. Le bouton appelle la fonction startGame().

• #gameOverScreen — apparaît après la collision du serpent avec lui-même ou avec la bordure.

• #score - affiche les points actuels.

• <canvas> — le terrain de jeu sur lequel le serpent et la nourriture sont dessinés.

  

Petit dictionnaire rapide des termes 👇

• Canvas — Élément HTML pour le dessin 2D. Grâce à JavaScript, vous pouvez dessiner manuellement des carrés, des lignes et des formes.

• Grille (grid) — le champ est divisé en carrés égaux (par exemple, 16×16 pixels). Toutes les coordonnées du serpent et de la nourriture sont exprimées à travers les cellules.

• Cycle de jeu (game loop) - une fonction qui met régulièrement à jour l'état du jeu et redessine le champ.

• Collisions - vérifie si le serpent ne s'est pas écrasé sur lui-même ou sur la bordure, et s'il n'a pas mangé la nourriture.

• État (state) - ensemble de variables : coordonnées, direction du mouvement, compte, statut (le jeu est en cours ou terminé).

Comment animer le jeu : logique en JavaScript ?

Ajoutez un script qui contrôlera le mouvement du serpent, vérifiera les collisions et dessinera chaque image :

1. Initialisation : créez canvas et le contexte 2d, définissez la taille de la cellule et du tableau des segments du serpent.

2. Contrôle : suivre les frappes de touches ArrowUp, ArrowDown, ArrowLeft, ArrowRight.

3. Cycle du jeu : tous les 150 ms, déplacer le serpent, vérifier les collisions, mettre à jour le score.

4. Rendu : nettoyez le champ et dessinez à nouveau la nourriture et les segments du serpent.

💡 Conseil : utilisez requestAnimationFrame pour la fluidité, et réglez la fréquence du mouvement via la minuterie accumulée.

Idées d'amélioration.

• Ajoutez de l'accélération - le jeu sera plus difficile à chaque niveau.

• Faites des « téléporteurs » sur les bords du champ pour que le serpent sorte de l'autre côté.

• Conservez les enregistrements dans localStorage.

• Ajoutez des thèmes clairs et sombres.

• Mettez en pause avec la touche P ou Esc.

Créer un jeu « Snake » est une excellente première étape pour apprendre JavaScript. Vous apprendrez non seulement à travailler avec canvas et les boucles, mais vous comprendrez également les bases de la logique du jeu : mouvement, collisions, état et mise à jour de l'interface.

Projet « Serpent » — une partie des mini-projets de formation de l'application Code, créés spécialement pour les débutants. Il vous aide à comprendre les bases de JavaScript, à comprendre le fonctionnement de la logique du jeu et à voir comment votre code prend vie directement dans le navigateur.

Dans Codique Des dizaines de projets similaires vous attendent, des jeux simples aux petites applications avec interface et logique. Chacun d'eux est un pas en avant pour apprendre à écrire du code avec confiance et intérêt.

Et nous avons aussi un confortable communauté Telegram, où nous nous entraidons, partageons des idées et discutons simplement de programmation. Rejoignez-nous, ce sera génial ! 🚀

👉 Notre communauté : https://t.me/coursme