贪吃蛇小游戏

by MagicPilot19
146 lines4.1 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇小游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        #gameCanvas {
            border: 2px solid #333;
            background: #fff;
        }
        #score {
            font-size: 20px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="score">得分: 0</div>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        
        const gridSize = 20;
        const tileCount = canvas.width / gridSize;
        
        let snake = [{x: 10, y: 10}];
        let dx = 0;
        let dy = 0;
        let foodX = 15;
        let foodY = 15;
        let score = 0;
        let gameOver = false;

        document.addEventListener('keydown', changeDirection);

        function changeDirection(e) {
            if (gameOver) {
                if (e.key === ' ') restartGame();
                return;
            }
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;

            const goingUp = dy === -1;
            const goingDown = dy === 1;
            const goingRight = dx === 1;
            const goingLeft = dx === -1;

            if (e.keyCode === LEFT_KEY && !goingRight) {
                dx = -1;
                dy = 0;
            }
            if (e.keyCode === UP_KEY && !goingDown) {
                dx = 0;
                dy = -1;
            }
            if (e.keyCode === RIGHT_KEY && !goingLeft) {
                dx = 1;
                dy = 0;
            }
            if (e.keyCode === DOWN_KEY && !goingUp) {
                dx = 0;
                dy = 1;
            }
        }

        function drawGame() {
            if (gameOver) {
                ctx.fillStyle = 'black';
                ctx.font = '30px Arial';
                ctx.fillText('游戏结束', 120, 200);
                ctx.font = '16px Arial';
                ctx.fillText('按空格键重新开始', 130, 230);
                return;
            }

            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = 'red';
            ctx.fillRect(foodX * gridSize, foodY * gridSize, gridSize - 2, gridSize - 2);

            ctx.fillStyle = 'green';
            for (let segment of snake) {
                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
            }

            const head = {x: snake[0].x + dx, y: snake[0].y + dy};

            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
                gameOver = true;
            }

            for (let i = 0; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    gameOver = true;
                }
            }

            snake.unshift(head);

            if (head.x === foodX && head.y === foodY) {
                score += 10;
                scoreElement.textContent = '得分: ' + score;
                generateFood();
            } else {
                snake.pop();
            }
        }

        function generateFood() {
            foodX = Math.floor(Math.random() * tileCount);
            foodY = Math.floor(Math.random() * tileCount);
            for (let segment of snake) {
                if (segment.x === foodX && segment.y === foodY) {
                    generateFood();
                }
            }
        }

        function restartGame() {
            snake = [{x: 10, y: 10}];
            dx = 0;
            dy = 0;
            score = 0;
            gameOver = false;
            scoreElement.textContent = '得分: ' + score;
            generateFood();
        }

        setInterval(drawGame, 100);
    </script>
</body>
</html>
Game Source: 贪吃蛇小游戏

Creator: MagicPilot19
Libraries: none
Complexity: moderate (146 lines, 4.1 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-magicpilot19" to link back to the original. Then publish at arcadelab.ai/publish.