Code HTML du jeu Snake

648 wecodeit

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

1 November 2024

Site Web de portfolio HTML avec menu latéral

2 June 2025

Boutique de fiches produits

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>

Code HTML du jeu Snake

Recommandé

Site Web de portfolio HTML avec menu latéral

EXEMPLE D'EMPLOIE DU TEMPS

Boutique de fiches produits

HTML

CSS

JS

Recommandé

Site Web de portfolio HTML avec menu latéral

EXEMPLE D'EMPLOIE DU TEMPS

Boutique de fiches produits

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS