Code HTML du jeu Snake

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

23 November 2024

Un code par hunganh

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é

Animation du survol

Un code par alqsdeus

Un code par hunganh

HTML

CSS

JS

Recommandé

Animation du survol

Un code par alqsdeus

Un code par hunganh

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS