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 ce jeu dans un navigateur Web en utilisant HTML, CSS et JavaScript.
Dans ce jeu, vous contrôlez un serpent qui se déplace sur un plateau. La taille du serpent augmente au fur et à mesure que vous collectez de la nourriture. Le jeu s’arrête si vous entrez en collision avec votre propre queue ou l’un des murs.
Comment créer l’interface utilisateur pour le Canvas ?
Détails du contenu :
afficher
Utilisez HTML et CSS pour ajouter la toile sur laquelle le serpent peut se déplacer. Il existe de nombreux autres projets HTML et CSS sur lesquels vous pouvez vous entraîner, si vous avez besoin de réviser des concepts de base.
Vous pouvez consulter le dépôt GitHub de ce projet pour obtenir le code source complet.
- Créez un nouveau fichier appelé « index.html ».
- Ouvrez le fichier en utilisant un éditeur de texte tel que Visual Code ou Atom. Ajoutez la structure de base du code HTML :
<!doctype html>
<html lang="en-US">
<head>
<title>Snake Game</title>
</head>
<body>
</body>
</html> - A l’intérieur de la balise body, ajoutez un canvas pour représenter le plateau de jeu du serpent.
<h2>Snake Game</h2>
<div id="game">
<canvas id="snake"></canvas>
</div> - Dans le même dossier que votre fichier HTML, créez un nouveau fichier appelé « styles.css ».
- À l’intérieur, ajoutez quelques CSS pour l’ensemble de la page Web. Vous pouvez également donner du style à votre site Web en utilisant d’autres conseils et astuces CSS essentiels.
#game {
width:400px;
height:400px;
margin:0 auto;
background-color:#eee;
}
h2 {
text-align:center;
font-family:Arial;
font-size:36px;
} - Dans votre fichier HTML, ajoutez un lien vers le CSS dans la balise head :
<link rel="stylesheet" type="text/css" href="styles.css"> - Pour visualiser 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 :
De multiples carrés ou « segments » composent le serpent. Au fur et à 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.
- Dans votre fichier HTML, créez un lien vers un nouveau fichier JavaScript au bas de la balise body :
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - Créez script.js et commencez par récupérer l’élément DOM du canevas :
var canvas = document.getElementById("snake"); - Définissez le contexte de l’élément HTML du canevas. Dans ce cas, vous voulez que le jeu rende une toile 2d. Cela vous permettra de dessiner plusieurs formes ou images sur l’élément HTML.
var canvas2d = canvas.getContext("2d"); - Définissez d’autres variables dans le jeu, comme la fin de la partie, la hauteur et la largeur de la toile :
var gameEnded = false;
canvas.width = 400;
canvas.height = 400; - Déclarez une variable appelée « snakeSegments ». Elle contiendra le nombre de « carrés » que le serpent occupera. Vous pouvez également créer une variable pour garder la trace de la longueur du serpent :
var snakeSegments = [];
var snakeLength = 1; - Déclarez la position initiale X et Y du serpent :
var snakeX = 0;
var snakeY = 0; - Créez une nouvelle fonction. A l’intérieur, ajoutez le morceau de serpent de départ au tableau snakeSegments, avec ses coordonnées X et Y de départ :
function moveSnake() {
snakeSegments.unshift({ x: snakeX, y: snakeY });
} - Créez une nouvelle fonction. À l’intérieur, définissez le style de remplissage sur noir. C’est la couleur qui sera utilisée pour dessiner le serpent :
function drawSnake() {
canvas2d.fillStyle = "black";
} - Pour chaque segment qui compose la taille du serpent, dessinez un carré d’une largeur et d’une hauteur de 10 pixels :
for (var i = 0; i < snakeSegments.length; i++) {
canvas2d.fillRect(snakeSegments[i].x, snakeSegments[i].y, 10, 10);
} - Créez une boucle de jeu qui s’exécutera toutes les 100 millisecondes. Cela permettra au jeu de dessiner constamment le serpent dans sa nouvelle position, ce qui sera très important lorsque le serpent commencera à bouger :
function gameLoop() {
moveSnake();
drawSnake(); - 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.
- Au début du fichier, déclarez la direction initiale du serpent :
var directionX = 10;
var directionY = 0; - Ajoutez un gestionnaire d’événement qui se déclenche lorsque le joueur appuie sur une touche :
document.onkeydown = function(event) {
}; - Dans le gestionnaire d’événement, changez la direction dans laquelle le serpent se déplace, en fonction de la touche pressée :
switch (event.keyCode) {
case 37: // Left arrow
directionX = -10;
directionY = 0;
break;
case 38: // Up arrow
directionX = 0;
directionY = -10;
break;
case 39: // Right arrow
directionX = 10;
directionY = 0;
break;
case 40: // Down arrow
directionX = 0;
directionY = 10;
break;
} - 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 les coordonnées X pour enlever 10 pixels pour chaque image du jeu :
function moveSnake() {
snakeSegments.unshift({ x: snakeX, y: snakeY });
snakeX += directionX;
snakeY += directionY;
} - Actuellement, le jeu ne supprime pas les segments précédents pendant que le serpent se déplace. Le serpent ressemblera alors à ceci :
-
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); - Vous devrez également supprimer le dernier élément du tableau snakeSegments, dans la fonction moveSnake() :
while (snakeSegments.length > snakeLength) {
snakeSegments.pop();
} - 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 des pièces de nourriture pour le serpent.
- Déclarez une nouvelle variable au début du fichier pour stocker un tableau de morceaux de nourriture :
var dots = []; - 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 présents sur le tableau à tout moment :
function spawnDots() {
if(dots.length < 10) {
var dotX = Math.floor(Math.random() * canvas.width);
var dotY = Math.floor(Math.random() * canvas.height);
dots.push({ x: dotX, y: dotY });
}
} - Après avoir généré les coordonnées X et Y pour la nourriture, dessinez-les sur le canevas en utilisant une couleur rouge :
for (var i = 0; i < dots.length; i++) {
canvas2d.fillStyle = "red";
canvas2d.fillRect(dots[i].x, dots[i].y, 10, 10);
} - Appelez la nouvelle fonction spawnDots() dans la boucle du jeu :
function gameLoop() {
moveSnake();
drawSnake();
spawnDots();
if(!gameEnded) {
setTimeout(gameLoop, 100);
}
} - 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 incrémentant sa longueur lorsqu’il entre en collision avec un point de nourriture.
- Crée une nouvelle fonction. A l’intérieur de celle-ci, bouclez sur chaque élément du tableau des points :
function checkCollision() {
for (var i = 0; i < dots.length; i++) {
}
} - Si la position du serpent correspond aux coordonnées d’un point, incrémentez la longueur du serpent et supprimez le point :
if (snakeX < dots[i].x + 10 &&
snakeX + 10 > dots[i].x &&
snakeY < dots[i].y + 10 &&
snakeY + 10 > dots[i].y) {
snakeLength++;
dots.splice(i, 1);
} - Appelez la nouvelle fonction checkCollision() dans la boucle du jeu :
function gameLoop() {
moveSnake();
drawSnake();
spawnDots();
checkCollision();
if(!gameEnded) {
setTimeout(gameLoop, 100);
}
} - 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 avec l’un des murs.
- Créez une nouvelle fonction pour imprimer une alerte « Game Over ».
function gameOver() {
setTimeout(function() {
alert("Game over!");
}, 500);
gameEnded = true
} - Dans la fonction checkCollision(), vérifiez si le serpent a touché un des murs de la toile. Si c’est le cas, appelez la fonction gameOver() :
if (snakeX < -10 ||
snakeY < -10 ||
snakeX > canvas.width+10 ||
snakeY > canvas.height+10) {
gameOver();
} - Pour vérifier si la tête du serpent est entrée en collision avec l’un des segments de la queue, bouclez sur chaque morceau du serpent :
for (var i = 1; i < snakeSegments.length; i++) {
} - À 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 :
if (snakeX === snakeSegments[i].x && snakeY === snakeSegments[i].y) {
gameOver();
} - Ouvrez le fichier « index.html » dans un navigateur web. Essayez de frapper un mur ou votre propre queue pour terminer le jeu.
Apprendre les concepts du JavaScript par le jeu
La création de jeux peut être un excellent moyen de rendre votre expérience d’apprentissage plus agréable. Continuez à créer d’autres jeux pour continuer à améliorer vos connaissances de JavaScript.