Código HTML do Jogo da Cobra

450 wecodeit

Abrir no Editor Publique Seu Código

Recomendado

26 December 2024

Um código por securefunction317

10 June 2025

Um Código por alejandrokundrah

2 June 2025

Um Código por gustavosalvador212

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>

Código HTML do Jogo da Cobra

Recomendado

Um código por securefunction317

Um Código por alejandrokundrah

Um Código por gustavosalvador212

HTML

CSS

JS

Recomendado

Um código por securefunction317

Um Código por alejandrokundrah

Um Código por gustavosalvador212

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS