使用html写一个贪吃蛇的游戏

jdfklaakjsdf

已于 2025-02-20 22:08:50 修改

阅读量437

点赞数 3

文章标签： html 游戏前端

于 2025-02-20 22:06:59 首次发布

本文链接：https://blog.youkuaiyun.com/jdfklaakjsdf/article/details/145764503

版权

以下是一个完整的贪吃蛇游戏网页版代码，保存为index.html即可直接运行：

使用方式：

1、本地新建一个“index.txt”文件

2、将以下代码赋值黏贴到index.txt文件中，保存之后重命名为“index.html”

3、使用浏览器打开index.html文件即可：

<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇小游戏</title>
    <style>
        canvas {
            border: 2px solid #333;
            background: #111;
        }
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #444;
            color: white;
            font-family: Arial;
        }
        #score {
            font-size: 24px;
            margin: 10px;
        }
        .tips {
            color: #999;
            font-size: 14px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="score">得分：0</div>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div class="tips">使用方向键控制移动</div>
    <div class="tips">贪吃蛇游戏</div>

    <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 food = { x: 5, y: 5 };
        let dx = 0;
        let dy = 0;
        let score = 0;
        let gameSpeed = 200;
        let gameLoop;

        document.addEventListener('keydown', changeDirection);

        function changeDirection(event) {
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;
            
            const keyPressed = event.keyCode;
            const goingUp = dy === -1;
            const goingDown = dy === 1;
            const goingRight = dx === 1;
            const goingLeft = dx === -1;

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

        function drawGame() {
            // 移动蛇
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
            snake.unshift(head);

            // 检测是否吃到食物
            if (head.x === food.x && head.y === food.y) {
                score += 10;
                scoreElement.innerHTML = `得分：${score}`;
                generateFood();
                gameSpeed = Math.max(50, gameSpeed - 2);
            } else {
                snake.pop();
            }

            // 清空画布
            ctx.fillStyle = '#111';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 绘制蛇
            ctx.fillStyle = '#4CAF50';
            snake.forEach((segment, index) => {
                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, 
                           gridSize - 2, gridSize - 2);
            });

            // 绘制食物
            ctx.fillStyle = '#ff0000';
            ctx.fillRect(food.x * gridSize, food.y * gridSize, 
                        gridSize - 2, gridSize - 2);

            // 碰撞检测
            if (isCollision()) {
                gameOver();
            }
        }

        function generateFood() {
            food = {
                x: Math.floor(Math.random() * tileCount),
                y: Math.floor(Math.random() * tileCount)
            };
            // 确保食物不生成在蛇身上
            snake.forEach(segment => {
                if (segment.x === food.x && segment.y === food.y) {
                    generateFood();
                }
            });
        }

        function isCollision() {
            const head = snake[0];
            return (
                head.x < 0 || 
                head.x >= tileCount || 
                head.y < 0 || 
                head.y >= tileCount ||
                snake.slice(1).some(segment => 
                    segment.x === head.x && segment.y === head.y)
            );
        }

        function gameOver() {
            clearInterval(gameLoop);
            alert(`游戏结束！得分：${score}\期待再次为您服务`);
            document.location.reload();
        }

        function startGame() {
            if (gameLoop) clearInterval(gameLoop);
            gameLoop = setInterval(drawGame, gameSpeed);
        }

        // 初始化游戏
        generateFood();
        startGame();
    </script>
</body>
</html>

游戏特色：