Code HTML du jeu Snake

1,112 wecodeit

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 December 2023

Jeu de pile JavaScript

25 November 2025

Chargeur de jeu HTML5 avec intégration du SDK Yandex

6 April 2026

Exemple de bouton HTML basique

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Snake Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            background-color: #222;
            font-family: sans-serif;
            color: #fff;
        }

#game-board {
            display: grid;
            grid-template-columns: repeat(20, 1fr);
            grid-template-rows: repeat(20, 1fr);
            width: 400px; /* 20 cells * 20px per cell */
            height: 400px;
            border: 5px solid #000;
            background-color: #444;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
        }

.cell {
            /* Base cell style (optional, for visibility) */
            box-sizing: border-box;
        }

.snake {
            background-color: limegreen;
            border: 1px solid darkgreen;
            border-radius: 2px;
        }

.food {
            background-color: red;
            border-radius: 50%;
            border: 1px solid darkred;
        }

#score {
            margin-top: 20px;
            font-size: 1.5em;
            color: #0f0;
        }

#message {
            margin-bottom: 10px;
            color: yellow;
            font-size: 1.2em;
        }
    </style>
</head>
<body>

<div id="message">Press Arrow Keys to Start!</div>
    <div id="game-board"></div>
    <div id="score">Score: 0</div>

// --- Initialization ---

function setupBoard() {
            gameBoard.innerHTML = '';
            for (let i = 0; i < BOARD_SIZE * BOARD_SIZE; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                gameBoard.appendChild(cell);
            }
        }

function getCellIndex(x, y) {
            return y * BOARD_SIZE + x;
        }

// --- Game Logic ---

function updateGame() {
            if (!isRunning) return;

isChangingDirection = false;

// 1. Calculate new head position
            const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

// 2. Check for collisions (Walls or Self)
            if (head.x < 0 || head.x >= BOARD_SIZE ||
                head.y < 0 || head.y >= BOARD_SIZE ||
                snake.some(segment => segment.x === head.x && segment.y === head.y)) {
                
                gameOver();
                return;
            }

// 3. Move snake
            snake.unshift(head);

// 4. Check for food
            if (head.x === food.x && head.y === food.y) {
                score++;
                scoreDisplay.textContent = `Score: ${score}`;
                generateFood();
                // Speed up slightly (optional)
                clearInterval(gameLoopInterval);
                const newSpeed = INITIAL_SPEED - (score * 5);
                gameLoopInterval = setInterval(updateGame, Math.max(50, newSpeed));
            } else {
                // If no food, remove tail
                snake.pop();
            }

// 5. Redraw
            drawGame();
        }

function drawGame() {
            const cells = gameBoard.children;

// Clear board
            for (let i = 0; i < cells.length; i++) {
                cells[i].className = 'cell';
            }

// Draw snake
            snake.forEach(segment => {
                const index = getCellIndex(segment.x, segment.y);
                if (index >= 0 && index < cells.length) {
                    cells[index].classList.add('snake');
                }
            });

// Draw food
            const foodIndex = getCellIndex(food.x, food.y);
            if (foodIndex >= 0 && foodIndex < cells.length) {
                cells[foodIndex].classList.add('food');
            }
        }

// --- Input Handling ---

document.addEventListener('keydown', (e) => {
            if (isChangingDirection) return;

let newDir = { x: direction.x, y: direction.y };

switch (e.key) {
                case 'ArrowUp':
                    if (direction.y !== 1) newDir = { x: 0, y: -1 };
                    break;
                case 'ArrowDown':
                    if (direction.y !== -1) newDir = { x: 0, y: 1 };
                    break;
                case 'ArrowLeft':
                    if (direction.x !== 1) newDir = { x: -1, y: 0 };
                    break;
                case 'ArrowRight':
                    if (direction.x !== -1) newDir = { x: 1, y: 0 };
                    break;
                case 'r':
                case 'R':
                    if (!isRunning) location.reload(); // Simple restart
                    return;
                default:
                    return;
            }
            
            // Start the game immediately upon first directional input
            if (!isRunning && (newDir.x !== 0 || newDir.y !== 0)) {
                direction = newDir;
                startGame();
            } else if (isRunning) {
                direction = newDir;
                isChangingDirection = true;
            }
            e.preventDefault(); // Prevent scrolling
        });

// --- Initial Setup Call ---
        setupBoard();
        generateFood();
        drawGame(); // Draw initial snake/food before movement starts

</script>

</body>
</html>

CSS