Jouer à Snake en quelques lignes de codes
Pour jouer à Snake : https://nlion.fr/jeux/snake/snake.html
Code source disponible en html, css et javascript.
Le serpent se déplace continuellement.
Le joueur change la direction du serpent avec les touches directionnelles.
Manger un objet fait grandir le serpent et augmente le score.
Le jeu se termine si le serpent heurte un mur ou son propre corps.
Description: « Snake » est un jeu vidéo classique où le joueur contrôle un serpent qui doit manger des objets pour grandir tout en évitant de heurter les murs et son propre corps.
le jeu Snake est libre de droits et est souvent utilisé comme exemple pour l’apprentissage de la programmation.
Historique:
- Années 1970: Le concept naît avec « Blockade » en 1976.
- Années 1980: « Nibbler » popularise le jeu sur les ordinateurs et consoles.
- Années 1990: Snake devient mondialement célèbre sur les téléphones Nokia, à partir du Nokia 6110 en 1997.
- Années 2000 et Au-delà: De nombreuses versions et variantes apparaissent sur smartphones avec des graphismes améliorés.
Impact Culturel: Snake est un exemple de jeu simple et addictif, souvent le premier contact avec les jeux vidéo mobiles pour beaucoup de joueurs, et reste une icône historique des jeux vidéo.
Le jeu Snake, avec sa simplicité et son gameplay engageant, a traversé les décennies et demeure un passe-temps populaire et nostalgique pour de nombreux joueurs.
Pour jouer : https://nlion.fr/jeux/snake/snake.html
Code source
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/*
* Nicolas Lion
* Langage de programmation : HTML, CSS, JavaScript (jQuery)
*
*/
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeu de Serpent</title>
<style>
/* Styles pour le corps */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
margin: 0;
font-family: 'Arial', sans-serif;
}
/* Styles pour le titre */
h1 {
color: #fff;
margin-bottom: 20px;
}
/* Styles pour le canvas */
canvas {
border: 2px solid #fff;
background-color: #000;
width: 100%;
max-width: 400px;
height: auto;
}
/* Styles pour le score */
#score {
color: #fff;
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
}
/* Styles pour le bouton de démarrage */
#startButton {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
/* Styles pour la bulle d'information */
#infoBubble {
position: absolute;
bottom: 20px;
background-color: #fff;
padding: 10px;
border-radius: 5px;
color: #000;
font-size: 16px;
animation: fadeInOut 3s infinite;
}
/* Animation pour la bulle d'information */
@keyframes fadeInOut {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
/* Styles pour le lien vers le site */
#siteLink {
color: #fff;
margin-top: 20px;
text-decoration: none;
font-size: 18px;
cursor: pointer;
}
#siteLink:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Titre de la page -->
<h1>Snake</h1>
<!-- Affichage du score -->
<div id="score">Score: 0</div>
<!-- Canvas pour le jeu -->
<canvas id="gameCanvas" width="400" height="400"></canvas>
<!-- Bouton pour démarrer le jeu -->
<button id="startButton">Démarrer le Jeu</button>
<!-- Bulle d'information -->
<div id="infoBubble">Utilisez les flèches pour jouer</div>
<!-- Lien vers le site -->
<a id="siteLink" href="https://nlion.fr" target="_blank">Visitez mon site</a>
<!-- Inclusion de la librairie jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const canvas = $('#gameCanvas')[0];
const context = canvas.getContext('2d');
const box = 20; // Taille d'un carré de la grille
let score = 0; // Score initial
let snake = []; // Tableau représentant le serpent
let food; // Position de la nourriture
let direction; // Direction du serpent
let game; // Intervalle de jeu
// Variables pour gérer les gestes tactiles
let touchStartX = 0;
let touchStartY = 0;
let touchEndX = 0;
let touchEndY = 0;
// Fonction pour initialiser le jeu
function initGame() {
score = 0;
$('#score').text('Score: ' + score);
snake = [];
snake[0] = { x: 9 * box, y: 10 * box }; // Position initiale du serpent
direction = null;
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
}
// Démarrage du jeu au clic du bouton
$('#startButton').click(function() {
$(this).hide();
$('#infoBubble').hide();
initGame();
game = setInterval(draw, 100); // Appel de la fonction draw toutes les 100 ms
});
// Gestion des touches de direction
$(document).keydown(function(e) {
if (e.which === 37 && direction !== "RIGHT") {
direction = "LEFT";
} else if (e.which === 38 && direction !== "DOWN") {
direction = "UP";
} else if (e.which === 39 && direction !== "LEFT") {
direction = "RIGHT";
} else if (e.which === 40 && direction !== "UP") {
direction = "DOWN";
}
});
// Gestion des gestes tactiles
canvas.addEventListener('touchstart', function(e) {
touchStartX = e.changedTouches[0].screenX;
touchStartY = e.changedTouches[0].screenY;
});
canvas.addEventListener('touchend', function(e) {
touchEndX = e.changedTouches[0].screenX;
touchEndY = e.changedTouches[0].screenY;
handleGesture();
});
function handleGesture() {
let deltaX = touchEndX - touchStartX;
let deltaY = touchEndY - touchStartY;
if (Math.abs(deltaX) > Math.abs(deltaY)) {
if (deltaX > 0 && direction !== "LEFT") {
direction = "RIGHT";
} else if (deltaX < 0 && direction !== "RIGHT") {
direction = "LEFT";
}
} else {
if (deltaY > 0 && direction !== "UP") {
direction = "DOWN";
} else if (deltaY < 0 && direction !== "DOWN") {
direction = "UP";
}
}
}
// Fonction pour vérifier les collisions
function collision(newHead, array) {
for (let i = 0; i < array.length; i++) {
if (newHead.x === array[i].x && newHead.y === array[i].y) {
return true;
}
}
return false;
}
// Fonction pour dessiner le jeu
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height); // Effacer le canvas
// Dessiner le serpent
for (let i = 0; i < snake.length; i++) {
context.fillStyle = (i === 0) ? "#1E90FF" : "#4682B4";
context.fillRect(snake[i].x, snake[i].y, box, box);
context.strokeStyle = "#000";
context.strokeRect(snake[i].x, snake[i].y, box, box);
}
// Dessiner la nourriture
context.fillStyle = "#FF4500";
context.fillRect(food.x, food.y, box, box);
// Position actuelle de la tête du serpent
let snakeX = snake[0].x;
let snakeY = snake[0].y;
// Déterminer la nouvelle position de la tête du serpent
if (direction === "LEFT") snakeX -= box;
if (direction === "UP") snakeY -= box;
if (direction === "RIGHT") snakeX += box;
if (direction === "DOWN") snakeY += box;
// Si le serpent mange la nourriture
if (snakeX === food.x && snakeY === food.y) {
score++;
$('#score').text('Score: ' + score);
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} else {
snake.pop(); // Enlever la dernière cellule du serpent
}
// Nouvelle position de la tête du serpent
let newHead = { x: snakeX, y: snakeY };
// Vérifier les collisions avec les murs ou le propre corps du serpent
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(game); // Arrêter le jeu
alert("Game Over! Votre score est: " + score);
$('#startButton').show(); // Afficher le bouton de démarrage
}
snake.unshift(newHead); // Ajouter la nouvelle tête au début du serpent
}
});
</script>
</body>
</html>
Explication du Code
HTML
Le HTML définit la structure de la page avec les éléments suivants :
- Un titre de page.
- Un conteneur pour afficher le score.
- Un élément
canvaspour le jeu. - Un bouton pour démarrer le jeu.
- Une bulle d’information.
- Un lien vers un site web externe.
- Une inclusion de la librairie jQuery.
CSS
Le CSS applique des styles à divers éléments pour les rendre visuellement attrayants :
- Le corps (
body) est centré avec une couleur de fond sombre et une police sans-serif. - Le titre (
h1) est stylé avec une couleur blanche et un espace en bas. - Le
canvasa une bordure blanche et une couleur de fond noire. - Le score (
#score) est positionné en haut à gauche de l’écran avec une taille de police plus grande. - Le bouton de démarrage (
#startButton) est stylé pour être cliquable. - La bulle d’information (
#infoBubble) a une animation pour apparaître et disparaître.
JavaScript
Le JavaScript utilise jQuery pour gérer le jeu Snake :
$(document).ready(...)initialise le jeu lorsque le document est prêt.- Variables définies pour le canevas, le contexte, la taille de la grille, le score, le serpent, la nourriture, la direction, et l’intervalle de jeu.
- Fonction
initGame()pour initialiser les variables du jeu. - Événement
clicksur le bouton de démarrage pour démarrer le jeu et masquer les éléments initiaux. - Événement
keydownpour gérer les touches de direction et changer la direction du serpent. - Gestion des gestes tactiles pour permettre le contrôle du serpent sur les appareils mobiles.
- Fonction
collision()pour vérifier les collisions entre la tête du serpent et son corps. - Fonction
draw()pour dessiner le serpent, la nourriture et mettre à jour la position du serpent, vérifier les collisions et mettre à jour le score.
Ce code crée un jeu de serpent simple où le joueur peut utiliser les touches fléchées ou les gestes tactiles pour contrôler le serpent, manger de la nourriture pour gagner des points, et éviter les collisions avec les murs ou le propre corps du serpent.