Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake and Apple Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        canvas {
            border: 1px solid black;
            background-color: #eee;
        }

        .score {
            position: absolute;
            top: 200px;
            left: 200px;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="score">Score: <span id="score">0</span></div>
    </div>

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

        const blockSize = 20;
        const canvasSize = canvas.width / blockSize;
        let snake = [{ x: 5, y: 5 }];
        let apple = { x: 5, y: 5 };
        let dx = 0;
        let dy = 0;
        let score = 0;

        function drawSnake() {
            snake.forEach(segment => {
                ctx.fillStyle = "green";
                ctx.fillRect(segment.x * blockSize, segment.y * blockSize, blockSize, blockSize);
            });
        }

        function drawApple() {
            ctx.fillStyle = "red";
            ctx.fillRect(apple.x * blockSize, apple.y * blockSize, blockSize, blockSize);
        }

        function moveSnake() {
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
            snake.unshift(head);
            if (head.x === apple.x && head.y === apple.y) {
                score += 10;
                document.getElementById("score").textContent = score;
                createApple();
            } else {
                snake.pop();
            }
        }

        function createApple() {
            apple.x = Math.floor(Math.random() * canvasSize);
            apple.y = Math.floor(Math.random() * canvasSize);
        }

        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        function draw() {
            clearCanvas();
            drawSnake();
            drawApple();
        }

        function update() {
            moveSnake();
            draw();
        }

        function main() {
            setInterval(update, 100);
        }

        main();

        document.addEventListener("keydown", event => {
            switch (event.key) {
                case "ArrowUp":
                    if (dy === 0) {
                        dx = 0;
                        dy = -1;
                    }
                    break;
                case "ArrowDown":
                    if (dy === 0) {
                        dx = 0;
                        dy = 1;
                    }
                    break;
                case "ArrowLeft":
                    if (dx === 0) {
                        dx = -1;
                        dy = 0;
                    }
                    break;
                case "ArrowRight":
                    if (dx === 0) {
                        dx = 1;
                        dy = 0;
                    }
                    break;
            }
        });
    </script>
</body>
</html>
Editor is loading...