Comment créer un jeu de serpent en utilisant HTML, CSS et JavaScript

Un jeu de serpent est un exercice de programmation classique que vous pouvez utiliser pour améliorer vos compétences en programmation et en résolution de problèmes. Vous pouvez créer le jeu dans un navigateur Web en utilisant HTML, CSS et JavaScript.

Dans le jeu, vous contrôlez un serpent qui se déplace autour d'un plateau. Le serpent grossit au fur et à mesure que vous ramassez de la nourriture. Le jeu se terminera si vous entrez en collision avec votre propre queue ou l'un des murs.

Comment créer l'interface utilisateur pour le canevas

Utilisez HTML et CSS pour ajouter le canevas sur lequel le serpent se déplacera. Il y a bien d'autres

Vous pouvez vous référer à ce projet Référentiel GitHub pour le code source complet.

1. Créez un nouveau fichier appelé "index.html".
2. Ouvrez le fichier à l'aide de n'importe quel éditeur de texte tel que Code visuel ou atome. Ajoutez la structure de code HTML de base:

   html>
   <htmllangue="en-US">
   <diriger>
   <titre>Jeu de serpenttitre>
   diriger>
   <corps>
   corps>
   html>

3. À l'intérieur de la balise body, ajoutez une toile pour représenter le plateau de jeu du serpent.

   <h2>Jeu de serpenth2>
   <dividentifiant="jeu">
   <toileidentifiant="serpent">toile>
   div>

4. Dans le même dossier que votre fichier HTML, créez un nouveau fichier appelé "styles.css".
5. À l'intérieur, ajoutez du CSS pour la page Web globale. Vous pouvez également styliser votre site Web en utilisant d'autres trucs et astuces CSS essentiels.

   #jeu {
   largeur:400px;
   hauteur:400px;
   marge:0auto;
   Couleur de l'arrière plan:#eee;
   }
   h2 {
   aligner le texte:centre;
   famille de polices:Arial;
   taille de police:36px;
   } 
   

6. Dans votre fichier HTML, ajoutez un lien vers le CSS dans la balise head:

   <lienrel="feuille de style"taper="texte/css"href="styles.css">

7. Pour afficher le canevas, ouvrez votre fichier "index.html" dans un navigateur Web.

Comment dessiner le serpent

Dans l'exemple ci-dessous, la ligne noire représente le serpent :

Plusieurs carrés ou "segments" composent le serpent. À mesure que le serpent grandit, le nombre de carrés augmente également. Au début du jeu, la longueur du serpent est d'une pièce.

1. Dans votre fichier HTML, créez un lien vers un nouveau fichier JavaScript au bas de la balise body:

   <corps>
    Votre code ici 
   <scénariosrc="script.js">scénario>
   corps>

2. Créez script.js et commencez par récupérer l'élément DOM du canevas:

   var toile = document.getElementById("serpent");

3. Définissez le contexte de l'élément HTML canvas. Dans ce cas, vous voulez que le jeu rende un canevas 2D. Cela vous permettra de dessiner plusieurs formes ou images sur l'élément HTML.

   var canvas2d = canvas.getContext("2d");

4. Définissez d'autres variables dans le jeu, telles que la fin du jeu, ainsi que la hauteur et la largeur du canevas:

   var gameEnded = FAUX;
   canvas.width = 400;
   toile.hauteur = 400;

5. Déclarez une variable appelée "snakeSegments". Cela contiendra le nombre de "carrés" que le serpent occupera. Vous pouvez également créer une variable pour suivre la longueur du serpent:

   var serpentSegments = [] ;
   var longueur_serpent = 1;
   

6. Déclarez la position initiale X et Y du serpent:

   var serpentX = 0;
   var serpentY = 0;

7. Créez une nouvelle fonction. À l'intérieur, ajoutez le morceau de serpent de départ au tableau snakeSegments, avec ses coordonnées X et Y de départ:

   fonctiondéplacerSerpent() {
    serpentSegments.unshift({ X: serpentX, y: serpentY });
   }

8. Créez une nouvelle fonction. À l'intérieur, définissez le style de remplissage sur noir. Voici la couleur qu'il utilisera pour dessiner le serpent:

   fonctiondessinerSerpent() {
    canvas2d.fillStyle = "noir"; 
   }

9. Pour chaque segment composant la taille du serpent, dessinez un carré d'une largeur et d'une hauteur de 10 pixels:

   pour (var je = 0; je < serpentSegments.longueur; je++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Créez une boucle de jeu qui s'exécutera toutes les 100 millisecondes. Cela amènera le jeu à dessiner constamment le serpent dans sa nouvelle position, ce qui sera très important lorsque le serpent commencera à bouger:

    fonctionjeuLoop() {
     déplacerSerpent();
     dessineSerpent();

11. Ouvrez le fichier "index.html" dans un navigateur Web pour voir le serpent à sa plus petite taille dans sa position de départ.

Comment faire bouger le serpent

Ajoutez un peu de logique pour déplacer le serpent dans différentes directions, en fonction du bouton sur lequel le joueur appuie sur le clavier.

1. En haut du fichier, déclarez la direction initiale du serpent:

   var directionX = 10;
   var directionY = 0;
   

2. Ajoutez un gestionnaire d'événements qui se déclenche lorsque le joueur appuie sur une touche:

   document.onkeydown = fonction(événement) {
   };

3. Dans le gestionnaire d'événements, modifiez la direction dans laquelle le serpent se déplace, en fonction de la touche enfoncée:

   changer (événement.keyCode) {
   cas37: // Flèche gauche
    directionX = -10;
    directionY = 0;
   casser;
   cas38: // Flèche vers le haut
    directionX = 0;
    directionY = -10;
   casser;
   cas39: // Flèche droite
    directionX = 10;
    directionY = 0;
   casser;
   cas40: // Flèche vers le bas
    directionX = 0;
    directionY = 10;
   casser;
   }

4. Dans la fonction moveSnake(), utilisez la direction pour mettre à jour les coordonnées X et Y du serpent. Par exemple, si le serpent doit se déplacer vers la gauche, la direction X sera "-10". Cela mettra à jour la coordonnée X pour supprimer 10 pixels pour chaque image du jeu:

   fonctiondéplacerSerpent() {
    serpentSegments.unshift({ X: serpentX, y: serpentY });
    serpentX += directionX ;
    serpentY += directionY ;
   }

5. Le jeu ne supprime actuellement pas les segments précédents pendant que le serpent se déplace. Cela fera ressembler le serpent à ceci:
6. Pour résoudre ce problème, effacez le canevas avant de dessiner le nouveau serpent dans chaque image, au début de la fonction drawSnake():

   canvas2d.clearRect(0, 0, canvas.width, canvas.height);

7. Vous devrez également supprimer le dernier élément du tableau snakeSegments, à l'intérieur de la fonction moveSnake():

   alors que (snakeSegments.length > snakeLength) {
    serpentSegments.pop();
   }

8. Ouvrez le fichier "index.html" et appuyez sur les touches gauche, droite, haut ou bas pour déplacer le serpent.

Comment ajouter de la nourriture sur la toile

Ajoutez des points au jeu de société pour représenter les morceaux de nourriture pour le serpent.

1. Déclarez une nouvelle variable en haut du fichier pour stocker un tableau de morceaux de nourriture:

   var points = [] ;

2. Créez une nouvelle fonction. À l'intérieur, générez des coordonnées X et Y aléatoires pour les points. Vous pouvez également vous assurer que seuls 10 points sont sur le tableau à tout moment:

   fonctionspawnDots() {
   si(points.longueur < 10) {
   var pointX = Mathématiques.sol(Mathématiques.random() * canvas.width);
   var pointY = Mathématiques.sol(Mathématiques.random() * canvas.height);
    points.push({ X: pointX, y: pointY });
    }
   }

3. Après avoir généré les coordonnées X et Y de la nourriture, dessinez-les sur la toile en utilisant une couleur rouge:

   pour (var je = 0; i < points.longueur; je++) {
    canvas2d.fillStyle = "rouge";
    canvas2d.fillRect (points[i].x, points[i].y, 10, 10);
   }

4. Appelez la nouvelle fonction spawnDots() dans la boucle du jeu:

   fonctionjeuLoop() {
    déplacerSerpent();
    dessineSerpent();
    spawnPoints();
   si(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Ouvrez le fichier "index.html" pour voir la nourriture sur le plateau de jeu.

Comment faire grandir le serpent

Vous pouvez faire grandir le serpent en augmentant sa longueur lorsqu'il entre en collision avec un point de nourriture.

1. Créez une nouvelle fonction. À l'intérieur, parcourez chaque élément du tableau de points:

   fonctioncheckCollision() {
   pour (var je = 0; i < points.longueur; je++) {
   
    }
   }

2. Si la position du serpent correspond aux coordonnées de n'importe quel point, incrémentez la longueur du serpent et supprimez le point:

   si (serpentX < points[i].x + 10 && 
    serpentX + 10 > points[i].x && 
    serpentY < points[i].y + 10 && 
    serpentY + 10 > points[i].y) {
    snakeLength++ ;
    points.splice (je, 1);
   }

3. Appelez la nouvelle fonction checkCollision() dans la boucle du jeu:

   fonctionjeuLoop() {
    déplacerSerpent();
    dessineSerpent();
    spawnPoints();
    checkCollision();
   si(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Ouvrez le fichier "index.html" dans un navigateur Web. Déplacez le serpent à l'aide du clavier pour collecter les morceaux de nourriture et faire grandir le serpent.

Comment terminer le jeu

Pour terminer le jeu, vérifiez si le serpent est entré en collision avec sa propre queue ou l'un des murs.

1. Créez une nouvelle fonction pour imprimer une alerte "Game Over".

   fonctionjeu terminé() {
    setTimeout(fonction() {
    alerte("Jeu terminé!");
    }, 500); 
    gameEnded = vrai
   }

2. Dans la fonction checkCollision(), vérifiez si le serpent a heurté l'un des murs de la toile. Si c'est le cas, appelez la fonction gameOver():

   si (serpentX < -10 || 
    serpentY < -10 || 
    serpentX > canvas.width+10 ||
    serpentY > canvas.height+10) {
    jeu terminé();
   }

3. Pour vérifier si la tête du serpent est entrée en collision avec l'un des segments de la queue, faites une boucle à travers chaque morceau du serpent:

   pour (var je = 1; je < serpentSegments.longueur; je++) {
   }

4. À l'intérieur de la boucle for, vérifiez si l'emplacement de la tête du serpent correspond à l'un des segments de la queue. Si c'est le cas, cela signifie que la tête est entrée en collision avec une queue, alors terminez le jeu:

   si (snakeX serpentSegments[i].x && serpentY serpentSegments[i].y) {
    jeu terminé();
   }

5. Ouvrez le fichier "index.html" dans un navigateur Web. Essayez de frapper un mur ou votre propre queue pour mettre fin à la partie.

Apprendre les concepts JavaScript à travers les jeux

La création de jeux peut être un excellent moyen de rendre votre expérience d'apprentissage plus agréable. Continuez à créer plus de jeux pour continuer à améliorer vos connaissances JavaScript.