我直接让 Deepseek 帮我写个需求文档：

打算做个贪吃蛇网页游戏，静态网页离线玩，要求炫酷科技，有调控速度的功能，请帮我写个 claude 3.7 能理解的需求文档。

Deepseek:

# **需求文档：炫酷科技风贪吃蛇网页游戏**  
**版本**：1.0  
**目标**：开发一款离线可玩的静态网页贪吃蛇游戏，具有科技炫酷风格，并支持游戏速度调节。  

---

## **1. 项目概述**  
开发一款基于HTML5 Canvas/JavaScript的贪吃蛇游戏，无需后端支持，纯前端运行。核心需求包括：  
- **科技炫酷UI**：深色背景、霓虹光效、动态粒子特效等。  
- **速度调控**：允许玩家调整游戏速度（如慢速/正常/快速）。  
- **离线可用**：纯静态网页，无网络依赖。  
- **精简代码**：代码行数不要超过 500 行。  

---

## **2. 功能需求**  

### **2.1 游戏核心逻辑**  
- **蛇的移动**：  
  - 方向控制（键盘↑↓←→或WASD）。  
  - 蛇身随移动增长，碰到自身或边界游戏结束。  
- **食物生成**：  
  - 随机位置生成食物（科技风样式，如发光粒子）。  
  - 吃到食物后得分增加，蛇身变长。  

### **2.2 科技炫酷风格**  
- **视觉特效**：  
  - 深色背景（如星空/网格）。  
  - 蛇身和食物使用霓虹色（如青色/紫色）发光效果。  
  - 动态粒子轨迹（蛇移动时残留光点）。  
- **音效**（可选）：  
  - 吃食物音效（电子音）。  
  - 碰撞失败音效。  

### **2.3 速度调控功能**  
- 提供速度调节选项（如滑块或按钮），支持：  
  - **慢速**（适合新手）。  
  - **正常**（默认速度）。  
  - **快速**（挑战模式）。  

### **2.4 游戏状态管理**  
- **开始/暂停/重启**：按钮控制游戏流程。  
- **计分系统**：实时显示当前得分和历史最高分（本地存储）。  

---

## **3. 非功能需求**  

### **3.1 兼容性**  
- 支持现代浏览器（Chrome、Firefox、Edge、Safari）。  
- 响应式设计（适配PC和移动端，移动端需虚拟方向键）。  

### **3.2 性能**  
- 60FPS流畅运行，避免卡顿。  
- 使用`requestAnimationFrame`优化动画。  

### **3.3 离线支持**  
- 纯静态资源（HTML/CSS/JS），无后端依赖。  

---

## **4. 技术实现建议**  

### **4.1 技术栈**  
- **核心**：HTML5 Canvas + JavaScript（ES6+）。  
- **特效库**：可选`Particles.js`或自定义Shader。  
- **UI动画**：CSS3过渡/变换。  

### **4.2 关键实现细节**  
- **游戏循环**：  
  ```javascript
  function gameLoop() {
    updateSnakePosition();  
    checkCollision();  
    renderCanvas();  
    requestAnimationFrame(gameLoop);  
  }
  ```  
- **速度控制**：通过调整`setTimeout`或`requestAnimationFrame`的刷新间隔实现。  

---

## **5. 界面原型（草图）**  
1. **主界面**：  
   - 顶部：分数显示（霓虹字体）。  
   - 中央：游戏画布（黑色背景+发光元素）。  
   - 底部：控制按钮（开始/暂停/重启）+ 速度滑块。  
2. **游戏结束弹窗**：显示最终得分和“再来一局”按钮。  

---

## **6. 测试用例**  
| 测试项 | 预期结果 |  
|--------|----------|  
| 方向控制 | 蛇按按键方向移动 |  
| 吃到食物 | 蛇身增长，分数+1 |  
| 撞墙/自碰 | 游戏结束，弹窗提示 |  
| 速度调节 | 游戏速度随选项变化 |  
| 离线运行 | 无网络时正常游戏 |  

---

PS：我在第 12 行特意自行加了一句：代码不要超过 500 行，如果超过 Cladue token 有限会中断生成。

打开 Cursor 创建个 markdown 文件，将上述需求复制到文档里， Cursor 引用文件，告知 Cursor 按照文档要求编写代码。

生成后的效果演示：

我贴一下源码：

贪吃蛇.html

      
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷科技风贪吃蛇</title>
    <style>
        * {margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif;}
        body {
            background-color: #0a0a1a;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
        .game-container {
            position: relative;
            width: 90%;
            max-width: 500px;
            padding: 20px;
            border-radius: 10px;
            background: rgba(10, 10, 26, 0.7);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(0, 255, 255, 0.1);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .score, .high-score {
            font-size: 18px;
            text-shadow: 0 0 10px #0ff;
        }
        .title {
            font-size: 24px;
            text-align: center;
            margin: 0 0 15px 0;
            background: linear-gradient(to right, #0ff, #f0f);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: glow 2s ease-in-out infinite alternate;
        }
        @keyframes glow {
            0% {filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.7));}
            100% {filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.7));}
        }
        #game-canvas {
            background-color: rgba(10, 10, 26, 0.5);
            border-radius: 5px;
            border: 1px solid rgba(0, 255, 255, 0.3);
            display: block;
            margin: 0 auto;
        }
        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
        }
        .btn {
            background: linear-gradient(to right, #0ff, #08f);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .btn:hover {
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
        }
        .btn:disabled {
            background: #333;
            cursor: not-allowed;
        }
        .speed-control {
            display: flex;
            align-items: center;
        }
        .speed-control label {
            margin-right: 10px;
            font-size: 14px;
        }
        #speed-slider {
            -webkit-appearance: none;
            width: 100px;
            height: 5px;
            background: linear-gradient(to right, #0ff, #f0f);
            border-radius: 5px;
            outline: none;
        }
        #speed-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            background: #fff;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
        }
        .game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        .game-over.active {
            opacity: 1;
            pointer-events: all;
        }
        .game-over h2 {
            font-size: 28px;
            margin-bottom: 20px;
            text-shadow: 0 0 10px #f0f;
        }
        .game-over p {
            font-size: 20px;
            margin-bottom: 30px;
        }
        .mobile-controls {
            display: none;
            margin-top: 15px;
            width: 100%;
        }
        .mobile-controls .direction-row {
            display: flex;
            justify-content: center;
            margin: 5px 0;
        }
        .mobile-controls button {
            width: 50px;
            height: 50px;
            margin: 0 5px;
            background: rgba(0, 255, 255, 0.2);
            border: 1px solid rgba(0, 255, 255, 0.5);
            border-radius: 5px;
            color: #0ff;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .grid {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(16, 16, 40, 0.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(16, 16, 40, 0.15) 1px, transparent 1px);
            background-size: 20px 20px;
            z-index: -1;
            animation: gridMove 20s linear infinite;
        }
        @keyframes gridMove {
            0% {background-position: 0 0;}
            100% {background-position: 20px 20px;}
        }
        @media (max-width: 768px) {
            .mobile-controls {display: block;}
        }
    </style>
</head>
<body>
    <div class="grid"></div>
    <div class="game-container">
        <h1 class="title">炫酷科技风贪吃蛇</h1>
        <div class="header">
            <div class="score-container">
                <div class="score">分数: <span id="score">0</span></div>
                <div class="high-score">最高分: <span id="high-score">0</span></div>
            </div>
        </div>
        <canvas id="game-canvas"></canvas>
        <div class="controls">
            <div class="buttons">
                <button id="start-btn" class="btn">开始游戏</button>
                <button id="pause-btn" class="btn" disabled>暂停</button>
                <button id="restart-btn" class="btn">重新开始</button>
            </div>
            <div class="speed-control">
                <label for="speed-slider">速度:</label>
                <input type="range" id="speed-slider" min="1" max="3" step="1" value="2">
            </div>
        </div>
        <div class="mobile-controls">
            <div class="direction-row">
                <button class="up-btn">↑</button>
            </div>
            <div class="direction-row">
                <button class="left-btn">←</button>
                <button class="down-btn">↓</button>
                <button class="right-btn">→</button>
            </div>
        </div>
        <div class="game-over" id="game-over-screen">
            <h2>游戏结束</h2>
            <p>最终得分: <span id="final-score">0</span></p>
            <button id="restart-btn-over" class="btn">再来一局</button>
        </div>
    </div>

    <script>
        // 游戏变量
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const highScoreElement = document.getElementById('high-score');
        const finalScoreElement = document.getElementById('final-score');
        const gameOverScreen = document.getElementById('game-over-screen');
        const startBtn = document.getElementById('start-btn');
        const pauseBtn = document.getElementById('pause-btn');
        const restartBtn = document.getElementById('restart-btn');
        const restartBtnOver = document.getElementById('restart-btn-over');
        const speedSlider = document.getElementById('speed-slider');

        // 游戏配置
        const GRID_SIZE = 20;
        let CANVAS_SIZE = 400;
        let CELL_SIZE = CANVAS_SIZE / GRID_SIZE;
        let gameSpeed = 150; // 毫秒
        let gameRunning = false;
        let gamePaused = false;
        let score = 0;
        let highScore = 0;
        let snake = [];
        let food = {};
        let direction = 'right';
        let nextDirection = 'right';
        let particles = [];
        let lastRenderTime = 0;
        let gameInterval;

        // 初始化游戏
        function initGame() {
            // 设置画布大小
            CANVAS_SIZE = window.innerWidth < 500 ? Math.min(window.innerWidth - 40, 400) : 400;
            CELL_SIZE = CANVAS_SIZE / GRID_SIZE;
            canvas.width = CANVAS_SIZE;
            canvas.height = CANVAS_SIZE;
            
            // 初始化蛇
            snake = [
                {x: 5, y: 10},
                {x: 4, y: 10},
                {x: 3, y: 10}
            ];
            
            // 生成食物
            generateFood();
            
            // 重置游戏状态
            direction = 'right';
            nextDirection = 'right';
            score = 0;
            scoreElement.textContent = score;
            particles = [];
            
            // 隐藏游戏结束界面
            gameOverScreen.classList.remove('active');
            
            // 渲染游戏
            renderGame();
        }

        // 开始游戏
        function startGame() {
            if (!gameRunning) {
                gameRunning = true;
                gamePaused = false;
                startBtn.disabled = true;
                pauseBtn.disabled = false;
                gameLoop();
            }
        }

        // 暂停/继续游戏
        function togglePause() {
            if (gameRunning) {
                gamePaused = !gamePaused;
                pauseBtn.textContent = gamePaused ? '继续' : '暂停';
            }
        }

        // 重新开始游戏
        function restartGame() {
            gameRunning = false;
            initGame();
            startGame();
        }

        // 改变游戏速度
        function changeSpeed() {
            const speedValue = parseInt(speedSlider.value);
            switch(speedValue) {
                case 1: gameSpeed = 200; break; // 慢速
                case 2: gameSpeed = 150; break; // 正常
                case 3: gameSpeed = 100; break; // 快速
            }
        }

        // 生成食物
        function generateFood() {
            let newFood;
            do {
                newFood = {
                    x: Math.floor(Math.random() * GRID_SIZE),
                    y: Math.floor(Math.random() * GRID_SIZE)
                };
            } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));
            
            food = newFood;
            
            // 生成食物周围的粒子
            for (let i = 0; i < 5; i++) {
                particles.push({
                    x: (food.x + 0.5) * CELL_SIZE + (Math.random() * 20 - 10),
                    y: (food.y + 0.5) * CELL_SIZE + (Math.random() * 20 - 10),
                    radius: Math.random() * 2 + 1,
                    color: `hsl(${Math.random() * 60 + 280}, 100%, 70%)`,
                    vx: Math.random() * 2 - 1,
                    vy: Math.random() * 2 - 1,
                    life: 100,
                    maxLife: 100
                });
            }
        }

        // 更新蛇的位置
        function updateSnake() {
            if (gamePaused) 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 (checkCollision(head)) {
                gameOver();
                return;
            }
            
            // 添加新头部
            snake.unshift(head);
            
            // 检查是否吃到食物
            if (head.x === food.x && head.y === food.y) {
                // 增加分数
                score++;
                scoreElement.textContent = score;
                
                // 更新最高分
                if (score > highScore) {
                    highScore = score;
                    highScoreElement.textContent = highScore;
                    localStorage.setItem('snakeHighScore', highScore);
                }
                
                // 生成新食物
                generateFood();
                
                // 生成粒子效果
                createEatParticles(head);
                
                // 播放音效
                playEatSound();
            } else {
                // 如果没吃到食物，移除尾部
                snake.pop();
            }
            
            // 添加移动轨迹粒子
            if (Math.random() > 0.7) {
                particles.push({
                    x: (head.x + 0.5) * CELL_SIZE,
                    y: (head.y + 0.5) * CELL_SIZE,
                    radius: Math.random() * 2 + 1,
                    color: `hsl(${Math.random() * 40 + 180}, 100%, 70%)`,
                    life: 30,
                    maxLife: 30
                });
            }
        }

        // 检查碰撞
        function checkCollision(head) {
            // 检查墙壁碰撞
            if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
                return true;
            }
            
            // 检查自身碰撞
            return snake.some((segment, index) => {
                if (index === 0) return false; // 跳过头部
                return segment.x === head.x && segment.y === head.y;
            });
        }

        // 创建吃食物的粒子效果
        function createEatParticles(position) {
            for (let i = 0; i < 15; i++) {
                particles.push({
                    x: (position.x + 0.5) * CELL_SIZE,
                    y: (position.y + 0.5) * CELL_SIZE,
                    radius: Math.random() * 3 + 2,
                    color: `hsl(${Math.random() * 60 + 280}, 100%, 70%)`,
                    vx: Math.random() * 6 - 3,
                    vy: Math.random() * 6 - 3,
                    life: 40,
                    maxLife: 40
                });
            }
        }

        // 更新粒子
        function updateParticles() {
            particles.forEach((particle, index) => {
                if (particle.life !== undefined) {
                    particle.life--;
                    if (particle.life <= 0) {
                        particles.splice(index, 1);
                        return;
                    }
                }
                
                if (particle.vx !== undefined) {
                    particle.x += particle.vx;
                    particle.y += particle.vy;
                    particle.vx *= 0.95;
                    particle.vy *= 0.95;
                }
            });
            
            // 更新食物周围的粒子
            if (Math.random() > 0.8) {
                particles.push({
                    x: (food.x + 0.5) * CELL_SIZE + (Math.random() * 20 - 10),
                    y: (food.y + 0.5) * CELL_SIZE + (Math.random() * 20 - 10),
                    radius: Math.random() * 2 + 1,
                    color: `hsl(${Math.random() * 60 + 280}, 100%, 70%)`,
                    life: 30,
                    maxLife: 30
                });
            }
        }

        // 游戏循环
        function gameLoop(timestamp) {
            if (!gameRunning) return;
            
            const deltaTime = timestamp - lastRenderTime;
            
            if (deltaTime >= gameSpeed) {
                lastRenderTime = timestamp;
                updateSnake();
                updateParticles();
                renderGame();
            }
            
            requestAnimationFrame(gameLoop);
        }

        // 渲染游戏
        function renderGame() {
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制食物
            ctx.beginPath();
            ctx.arc((food.x + 0.5) * CELL_SIZE, (food.y + 0.5) * CELL_SIZE, CELL_SIZE / 2.5, 0, Math.PI * 2);
            ctx.fillStyle = "#f0f";
            ctx.fill();
            
            ctx.beginPath();
            ctx.arc((food.x + 0.5) * CELL_SIZE, (food.y + 0.5) * CELL_SIZE, CELL_SIZE / 1.8, 0, Math.PI * 2);
            ctx.fillStyle = "rgba(255, 0, 255, 0.3)";
            ctx.fill();
            
            // 绘制蛇
            snake.forEach((segment, index) => {
                const isHead = index === 0;
                const segmentSize = isHead ? CELL_SIZE / 1.8 : CELL_SIZE / 2;
                
                // 绘制蛇身光晕
                ctx.beginPath();
                ctx.arc((segment.x + 0.5) * CELL_SIZE, (segment.y + 0.5) * CELL_SIZE, segmentSize * 1.3, 0, Math.PI * 2);
                ctx.fillStyle = isHead ? "rgba(0, 255, 255, 0.3)" : "rgba(0, 255, 255, 0.15)";
                ctx.fill();
                
                // 绘制蛇身
                ctx.beginPath();
                ctx.arc((segment.x + 0.5) * CELL_SIZE, (segment.y + 0.5) * CELL_SIZE, segmentSize, 0, Math.PI * 2);
                ctx.fillStyle = isHead ? "#0ff" : `rgba(0, 255, 255, ${0.9 - index * 0.02})`;
                ctx.fill();
                
                // 蛇头眼睛
                if (isHead) {
                    let eyeX1, eyeY1, eyeX2, eyeY2;
                    
                    switch (direction) {
                        case "up":
                            eyeX1 = (segment.x + 0.35) * CELL_SIZE;
                            eyeY1 = (segment.y + 0.35) * CELL_SIZE;
                            eyeX2 = (segment.x + 0.65) * CELL_SIZE;
                            eyeY2 = (segment.y + 0.35) * CELL_SIZE;
                            break;
                        case "down":
                            eyeX1 = (segment.x + 0.35) * CELL_SIZE;
                            eyeY1 = (segment.y + 0.65) * CELL_SIZE;
                            eyeX2 = (segment.x + 0.65) * CELL_SIZE;
                            eyeY2 = (segment.y + 0.65) * CELL_SIZE;
                            break;
                        case "left":
                            eyeX1 = (segment.x + 0.35) * CELL_SIZE;
                            eyeY1 = (segment.y + 0.35) * CELL_SIZE;
                            eyeX2 = (segment.x + 0.35) * CELL_SIZE;
                            eyeY2 = (segment.y + 0.65) * CELL_SIZE;
                            break;
                        case "right":
                            eyeX1 = (segment.x + 0.65) * CELL_SIZE;
                            eyeY1 = (segment.y + 0.35) * CELL_SIZE;
                            eyeX2 = (segment.x + 0.65) * CELL_SIZE;
                            eyeY2 = (segment.y + 0.65) * CELL_SIZE;
                            break;
                    }
                    
                    ctx.beginPath();
                    ctx.arc(eyeX1, eyeY1, CELL_SIZE / 10, 0, Math.PI * 2);
                    ctx.fillStyle = "#000";
                    ctx.fill();
                    
                    ctx.beginPath();
                    ctx.arc(eyeX2, eyeY2, CELL_SIZE / 10, 0, Math.PI * 2);
                    ctx.fillStyle = "#000";
                    ctx.fill();
                }
            });
            
            // 绘制粒子
            particles.forEach(particle => {
                ctx.beginPath();
                ctx.arc(particle.x, particle.y, particle.radius * (particle.life / particle.maxLife), 0, Math.PI * 2);
                
                if (particle.life !== undefined) {
                    const opacity = particle.life / particle.maxLife;
                    ctx.fillStyle = particle.color.replace('hsl', 'hsla').replace(')', `, ${opacity})`);
                } else {
                    ctx.fillStyle = particle.color;
                }
                
                ctx.fill();
            });
        }

        // 游戏结束
        function gameOver() {
            gameRunning = false;
            finalScoreElement.textContent = score;
            gameOverScreen.classList.add("active");
            startBtn.disabled = false;
            pauseBtn.disabled = true;
            playGameOverSound();
        }

        // 播放吃食物音效
        function playEatSound() {
            try {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                oscillator.type = "sine";
                oscillator.frequency.setValueAtTime(880, audioContext.currentTime);
                oscillator.frequency.exponentialRampToValueAtTime(440, audioContext.currentTime + 0.1);
                
                gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2);
                
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                oscillator.start();
                oscillator.stop(audioContext.currentTime + 0.2);
            } catch (e) {
                console.log("音频API不可用");
            }
        }

        // 播放游戏结束音效
        function playGameOverSound() {
            try {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();
                
                oscillator.type = "sawtooth";
                oscillator.frequency.setValueAtTime(220, audioContext.currentTime);
                oscillator.frequency.exponentialRampToValueAtTime(110, audioContext.currentTime + 0.5);
                
                gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
                
                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);
                
                oscillator.start();
                oscillator.stop(audioContext.currentTime + 0.5);
            } catch (e) {
                console.log("音频API不可用");
            }
        }

        // 键盘控制
        function handleKeyDown(e) {
            switch(e.key) {
                case 'ArrowUp':
                case 'w':
                case 'W':
                    if (direction !== 'down') nextDirection = 'up';
                    break;
                case 'ArrowDown':
                case 's':
                case 'S':
                    if (direction !== 'up') nextDirection = 'down';
                    break;
                case 'ArrowLeft':
                case 'a':
                case 'A':
                    if (direction !== 'right') nextDirection = 'left';
                    break;
                case 'ArrowRight':
                case 'd':
                case 'D':
                    if (direction !== 'left') nextDirection = 'right';
                    break;
                case ' ':
                    if (gameRunning) togglePause();
                    break;
            }
        }

        // 事件监听
        document.addEventListener('keydown', handleKeyDown);
        startBtn.addEventListener('click', startGame);
        pauseBtn.addEventListener('click', togglePause);
        restartBtn.addEventListener('click', restartGame);
        restartBtnOver.addEventListener('click', restartGame);
        speedSlider.addEventListener('input', changeSpeed);
        window.addEventListener('resize', () => {
            CANVAS_SIZE = window.innerWidth < 500 ? Math.min(window.innerWidth - 40, 400) : 400;
            CELL_SIZE = CANVAS_SIZE / GRID_SIZE;
            canvas.width = CANVAS_SIZE;
            canvas.height = CANVAS_SIZE;
            renderGame();
            
            // 显示/隐藏移动控制
            document.querySelector('.mobile-controls').style.display = 
                window.innerWidth < 768 ? 'block' : 'none';
        });

        // 移动端控制
        document.querySelector('.up-btn').addEventListener('click', () => {
            if (direction !== 'down') nextDirection = 'up';
        });
        document.querySelector('.down-btn').addEventListener('click', () => {
            if (direction !== 'up') nextDirection = 'down';
        });
        document.querySelector('.left-btn').addEventListener('click', () => {
            if (direction !== 'right') nextDirection = 'left';
        });
        document.querySelector('.right-btn').addEventListener('click', () => {
            if (direction !== 'left') nextDirection = 'right';
        });

        // 加载最高分
        highScore = localStorage.getItem('snakeHighScore') || 0;
        highScoreElement.textContent = highScore;

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