HTML स्नेक गेम कोड

447 wecodeit

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

30 June 2025

गुस्तावोसल्वाडोर212 द्वारा लिखित एक कोड

30 March 2025

ytr3d3 द्वारा एक कोड

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>

HTML स्नेक गेम कोड

अनुशंसित

मीटर का एक कोड

गुस्तावोसल्वाडोर212 द्वारा लिखित एक कोड

ytr3d3 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

मीटर का एक कोड

गुस्तावोसल्वाडोर212 द्वारा लिखित एक कोड

ytr3d3 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS