AI 生成的经典贪吃蛇小游戏-CSDN博客

🎮 AI 生成的经典贪吃蛇小游戏

欢迎体验这个由人工智能自动生成的经典贪吃蛇网页游戏！我运用先进的AI技术，根据贪吃蛇游戏的核心规则和经典元素，一键生成了这个完整可玩的游戏代码。

这个AI辅助开发过程展示了现代技术在游戏创作领域的强大能力 - 从游戏逻辑设计、碰撞检测算法到用户界面布局，AI能够理解游戏机制并生成可直接运行的代码。您现在看到的这个贪吃蛇游戏包含了所有经典元素：蛇的移动控制、食物生成系统、碰撞检测以及得分机制。

虽然这是由AI生成的，但游戏体验完全真实可玩。您可以:

使用键盘方向键控制蛇的移动
吃取红色食物增加得分和长度
避免撞墙或咬到自己
挑战随着分数增加而提高的游戏速度

这个示例不仅是一个有趣的小游戏，也展示了AI在创意编程领域的应用潜力。您可以基于此进一步修改和扩展，添加新功能或改变游戏风格!

游戏界面

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html>
<head>
    <title>经典贪吃蛇游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 2px solid #333;
            background-color: #fff;
        }
        .game-info {
            margin-top: 20px;
            font-size: 24px;
        }
        .game-over {
            position: absolute;
            color: red;
            font-size: 48px;
            display: none;
        }
        button {
            margin-top: 10px;
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="game-over" id="gameOver">游戏结束!</div>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <div class="game-info">得分: <span id="score">0</span></div>
    <button id="restartBtn">重新开始</button>

    <script>
        // 获取画布和上下文
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const gameOverElement = document.getElementById('gameOver');
        const restartBtn = document.getElementById('restartBtn');

        // 游戏参数
        const gridSize = 20;
        const gridWidth = canvas.width / gridSize;
        const gridHeight = canvas.height / gridSize;
        let score = 0;
        let gameSpeed = 100; // 毫秒
        let gameLoop;

        // 蛇的初始状态
        let snake = [
            {x: 10, y: 10},
            {x: 9, y: 10},
            {x: 8, y: 10}
        ];
        
        // 初始方向
        let direction = 'right';
        let nextDirection = 'right';
        
        // 食物位置
        let food = generateFood();

        // 游戏状态
        let gameRunning = true;

        // 生成食物
        function generateFood() {
            let newFood;
            let foodOnSnake;
            
            do {
                foodOnSnake = false;
                newFood = {
                    x: Math.floor(Math.random() * gridWidth),
                    y: Math.floor(Math.random() * gridHeight)
                };
                
                // 检查食物是否在蛇身上
                for (let segment of snake) {
                    if (segment.x === newFood.x && segment.y === newFood.y) {
                        foodOnSnake = true;
                        break;
                    }
                }
            } while (foodOnSnake);
            
            return newFood;
        }

        // 绘制游戏
        function draw() {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制蛇
            for (let i = 0; i < snake.length; i++) {
                ctx.fillStyle = i === 0 ? '#4CAF50' : '#8BC34A'; // 头部颜色不同
                ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize, gridSize);
                ctx.strokeStyle = '#fff';
                ctx.strokeRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize, gridSize);
            }
            
            // 绘制食物
            ctx.fillStyle = '#FF5722';
            ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
        }

        // 更新游戏状态
        function update() {
            if (!gameRunning) return;
            
            // 更新方向
            direction = nextDirection;
            
            // 计算蛇头的新位置
            const head = {x: snake[0].x, y: snake[0].y};
            
            switch (direction) {
                case 'up':
                    head.y--;
                    break;
                case 'down':
                    head.y++;
                    break;
                case 'left':
                    head.x--;
                    break;
                case 'right':
                    head.x++;
                    break;
            }
            
            // 检查碰撞
            if (
                head.x < 0 || 
                head.x >= gridWidth || 
                head.y < 0 || 
                head.y >= gridHeight ||
                checkCollision(head)
            ) {
                gameOver();
                return;
            }
            
            // 将新头部添加到蛇身
            snake.unshift(head);
            
            // 检查是否吃到食物
            if (head.x === food.x && head.y === food.y) {
                // 增加分数
                score += 10;
                scoreElement.textContent = score;
                
                // 生成新食物
                food = generateFood();
                
                // 增加游戏速度
                if (gameSpeed > 50) {
                    gameSpeed -= 2;
                    clearInterval(gameLoop);
                    gameLoop = setInterval(gameStep, gameSpeed);
                }
            } else {
                // 如果没有吃到食物，移除尾部
                snake.pop();
            }
        }

        // 检查蛇是否与自身碰撞
        function checkCollision(head) {
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    return true;
                }
            }
            return false;
        }

        // 游戏结束
        function gameOver() {
            gameRunning = false;
            clearInterval(gameLoop);
            gameOverElement.style.display = 'block';
        }

        // 游戏步骤
        function gameStep() {
            update();
            draw();
        }

        // 键盘控制
        document.addEventListener('keydown', function(event) {
            switch (event.key) {
                case 'ArrowUp':
                    if (direction !== 'down') nextDirection = 'up';
                    break;
                case 'ArrowDown':
                    if (direction !== 'up') nextDirection = 'down';
                    break;
                case 'ArrowLeft':
                    if (direction !== 'right') nextDirection = 'left';
                    break;
                case 'ArrowRight':
                    if (direction !== 'left') nextDirection = 'right';
                    break;
            }
        });

        // 重新开始游戏
        function restartGame() {
            snake = [
                {x: 10, y: 10},
                {x: 9, y: 10},
                {x: 8, y: 10}
            ];
            direction = 'right';
            nextDirection = 'right';
            food = generateFood();
            score = 0;
            scoreElement.textContent = score;
            gameSpeed = 100;
            gameRunning = true;
            gameOverElement.style.display = 'none';
            
            clearInterval(gameLoop);
            gameLoop = setInterval(gameStep, gameSpeed);
        }

        restartBtn.addEventListener('click', restartGame);

        // 开始游戏
        gameLoop = setInterval(gameStep, gameSpeed);
    </script>
</body>
</html>

游戏说明

游戏控制：
- 使用键盘方向键(↑↓←→)控制蛇的移动方向
- 点击"重新开始"按钮可以重置游戏
游戏规则：
- 吃到食物(红色方块)可以增加得分和蛇的长度
- 撞到墙壁或自己的身体会导致游戏结束
- 随着得分增加，游戏速度会逐渐加快
游戏特点：
- 蛇头和身体使用不同颜色区分
- 实时显示得分
- 游戏结束时显示提示信息

将上面的代码复制到一个HTML文件中，用浏览器打开即可开始游戏！

推荐更多阅读内容
普通职场人如何理解AI安全？从五个关键问题说起
 浏览器存储机制对比（cookie、localStorage、sessionStorage）
Cookie的HttpOnly属性：作用、配置与前后端分工
 从威胁检测需求看两类安全监测平台差异
 深入理解JavaScript数组过滤操作（提升代码优雅性）
JavaScript 数组合并与去重（解析 […value, …ids] 技巧）
如何让 Linux 主机“隐身”：禁用 Ping 响应
 深入理解 CSS 高度塌陷问题及解决方案