Serpent

344 Lspath940

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 March 2026

Tutoriel JavaScript Canvas pour le jeu du serpent

17 May 2025

jeu du serpent

21 May 2024

Jeu de serpent

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake.io Clone</title>
<style>
    body {
        margin: 0;
        background: #111;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        color: white;
        font-family: Arial, sans-serif;
    }
    canvas {
        background: #222;
        border: 2px solid #555;
    }
    #score {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 20px;
    }
</style>
</head>
<body>
<div id="score">Score: 0</div>
<canvas id="gameCanvas" width="600" height="400"></canvas>

const gridSize = 20; // size of each cell
    let snake = [{ x: 10, y: 10 }];
    let direction = { x: 1, y: 0 };
    let food = spawnFood();
    let score = 0;
    let speed = 150; // ms per frame
    let lastTime = 0;

// Spawn food at random position
    function spawnFood() {
        return {
            x: Math.floor(Math.random() * (canvas.width / gridSize)),
            y: Math.floor(Math.random() * (canvas.height / gridSize))
        };
    }

// Game loop
    function gameLoop(timestamp) {
        if (timestamp - lastTime > speed) {
            update();
            draw();
            lastTime = timestamp;
        }
        requestAnimationFrame(gameLoop);
    }

// Update snake position
    function update() {
        const head = {
            x: snake[0].x + direction.x,
            y: snake[0].y + direction.y
        };

// Wrap around edges (Snake.io style)
        if (head.x < 0) head.x = canvas.width / gridSize - 1;
        if (head.x >= canvas.width / gridSize) head.x = 0;
        if (head.y < 0) head.y = canvas.height / gridSize - 1;
        if (head.y >= canvas.height / gridSize) head.y = 0;

// Check collision with self
        for (let segment of snake) {
            if (segment.x === head.x && segment.y === head.y) {
                resetGame();
                return;
            }
        }

snake.unshift(head);

// Check if food eaten
        if (head.x === food.x && head.y === food.y) {
            score++;
            scoreEl.textContent = "Score: " + score;
            food = spawnFood();
            // Increase speed slightly
            if (speed > 50) speed -= 5;
        } else {
            snake.pop();
        }
    }

// Draw snake and food
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw food
        ctx.fillStyle = "red";
        ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

// Draw snake
        ctx.fillStyle = "lime";
        for (let segment of snake) {
            ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
        }
    }

// Reset game
    function resetGame() {
        snake = [{ x: 10, y: 10 }];
        direction = { x: 1, y: 0 };
        score = 0;
        speed = 150;
        scoreEl.textContent = "Score: 0";
        food = spawnFood();
    }

// Handle keyboard input
    window.addEventListener("keydown", e => {
        switch (e.key) {
            case "ArrowUp":
                if (direction.y === 0) direction = { x: 0, y: -1 };
                break;
            case "ArrowDown":
                if (direction.y === 0) direction = { x: 0, y: 1 };
                break;
            case "ArrowLeft":
                if (direction.x === 0) direction = { x: -1, y: 0 };
                break;
            case "ArrowRight":
                if (direction.x === 0) direction = { x: 1, y: 0 };
                break;
        }
    });

requestAnimationFrame(gameLoop);
})();
</script>
</body>
</html>

CSS