<!DOCTYPE html>
<html>
<head>
<title>Jeu Snake Multicolore</title>
<style>
/* Style the game board */
#board {
width: 400px;
height: 400px;
border: 10px solid black;
margin: 0 auto;
position: relative;
}
/* Style the snake */
.snake-unit {
width: 10px;
height: 10px;
position: absolute;
background-color: black;
}
/* Style the food */
.food-unit {
width: 10px;
height: 10px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<h1>Jeu Snake Multicolore</h1>
<div id="board"></div>
<script>
// Create the game board
var board = document.getElementById("board");
// Create the snake
var snake = [
{ x: 150, y: 150 },
{ x: 140, y: 150 },
{ x: 130, y: 150 },
{ x: 120, y: 150 },
{ x: 110, y: 150 }
];
// Create the food
var food = { x: 300, y: 300 };
// Create a variable to store the direction of the snake
var dx = 10;
var dy = 0;
// Create a variable to store the current score
var score = 0;
// Create a variable to store the current game state
var gameState = "running";
// Create a function to draw the snake on the game board
function drawSnake() {
// Loop through the snake array
for (var i = 0; i < snake.length; i++) {
// Create a new div element for each snake unit
var snakeUnit = document.createElement("div");
// Set the position of the snake unit
snakeUnit.style.left = snake[i].x + "px";
snakeUnit.style.top = snake[i].y + "px";
// Set the class of the snake unit
snakeUnit.className = "snake-unit";
// Add the snake unit to the game board
board.appendChild(snakeUnit);
}
}
// Create a function to draw the food on the game board
function drawFood() {
// Create a new div element for the food
var foodUnit = document.createElement("div");
// Set the position of the food
foodUnit.style.left = food.x + "px";
foodUnit.style.top = food.y + "px";
// Set the class of the food
foodUnit.className = "food-unit";
// Add the food to the game board
board.appendChild(foodUnit);
}
// Create a function to move the snake
function moveSnake() {
// Create the new head of the snake
var newHead = { x: snake[0].
x + dx, y: snake[0].y + dy };
// Add the new head to the front of the snake array
snake.unshift(newHead);
// Check if the snake has collided with the food
if (snake[0].x === food.x && snake[0].y === food.y) {
// Generate a new random position for the food
food = {
x: Math.floor(Math.random() * 40) * 10,
y: Math.floor(Math.random() * 40) * 10
};
// Increment the score
score++;
} else {
// Remove the last element of the snake array (the tail)
snake.pop();
}
}
// Create a function to check if the snake has collided with a wall or itself
function checkCollision() {
// Check if the snake has collided with a wall
if (
snake[0].x < 0 ||
snake[0].x >= 400 ||
snake[0].y < 0 ||
snake[0].y >= 400
) {
gameState = "over";
}
// Check if the snake has collided with itself
for (var i = 1; i < snake.length; i++) {
if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
gameState = "over";
}
}
}
// Create a function to update the game
function update() {
// Clear the game board
board.innerHTML = "";
// Draw the snake and the food on the game board
drawSnake();
drawFood();
// Move the snake
moveSnake();
// Check for collisions
checkCollision();
// Display the score
document.getElementById("score").innerHTML = score;
// Check if the game is over
if (gameState === "over") {
clearInterval(game);
alert("Game Over! Your score was " + score);
}
}
// Create a function to control the snake using the arrow keys
function changeDirection(event) {
if (event.keyCode === 37 && dx === 0) {
dx = -10;
dy = 0;
} else if (event.keyCode === 38 && dy === 0) {
dx = 0;
dy = -10;
} else if (event.keyCode === 39 && dx === 0) {
dx = 10;
dy = 0;
} else if (event.keyCode === 40 && dy === 0) {
dx = 0;
dy = 10;
}
}
// Add an event listener to the document to capture keyboard input
document.addEventListener("keydown", changeDirection);
// Create a variable to store the game interval
var game = setInterval(update, 100);
</script>
<h2>Score: <span id="score">0</span></h2>
</body>
</html>
