从零到一：2026 年 AI 编程工具选型全攻略（只推荐 3 套：Claude Code / Cursor / OpenCode+GLM-4.7）

文章目录

• 🚀 从零到一：2026 年 AI 编程工具选型全攻略（只推荐 3 套：Claude Code / Cursor / OpenCode+GLM-4.7）
• • ✅ 1. 为什么我只推荐这 3 套？
  • 🧭 2. 3 套推荐方案：你属于哪一类？
  • • 方案 A：🛡️ Claude Code + 智谱 GLM-4.7（新手/稳/安全）
• 🧰 Claude Code + 智谱 GLM-4.7 安装与配置指南（可直接照做）
• • 🔗 官方文档（建议收藏）
  • ✅ 0. 前提条件（必须）
  • 1) 🧩 安装 Claude Code
  • • 1.1 📦 全局安装
    • 1.2 📁 创建/进入你的工作目录（示例：your-project）
    • 1.3 🚀 启动 Claude Code
  • 2) 🔑 配置 GLM-4.7（关键：环境变量 / settings.json）
  • • 方案 B：💻 Cursor（VSCode 党/最快上手/写改一体）
    • 方案 C：🔧 OpenCode + GLM-4.7（模型可控/预算敏感/国内更稳）
  • 🎯 3. 用一张表把“该选谁”说清楚
  • 🧩 4. 新手最容易踩的 5 个坑（提前避开）
  • • 坑 1：只问一句“帮我写”，不给上下文
    • 坑 2：让 AI 一次性改太多文件
    • 坑 3：不写测试，最后只能祈祷
    • 坑 4：把 AI 当“万能神”，不做 Review
    • 坑 5：选工具只看“谁最强”，不看“谁最适合你”
  • 🧠 5. 直接可抄：VibeCoding 的“Plan→Execute”角色提示词模板
  • • 5.1 6A工作模板（所有IDE都可以配置，开工先用，强烈推荐）
• 总结

🚀 从零到一：2026 年 AI 编程工具选型全攻略（只推荐 3 套：Claude Code / Cursor / OpenCode+GLM-4.7）

✅ 先给结论（30 秒选型）：

• 🧑‍🎓 新手/怕误操作/想要“更稳更可控” → Claude Code + 智谱 GLM-4.7（Plan 工作流更安全）
• 🧑‍💻 VSCode 老用户/想要“写改一体、上手最快” → Cursor（IDE 体验最顺）
• 🔧 预算敏感/想把“工具和模型解耦”、国内更可控 → OpenCode + GLM-4.7（同样做 Agent 工作流，但模型你说了算）

🎯 本文只讲“怎么选”和“为什么这样选”：不做全网横评，不堆一堆工具名。 你只要从这 3 套里选一套，就能覆盖 90% 的学习与实战场景。

✅ 1. 为什么我只推荐这 3 套？

AI 编程工具很多，但新手最容易踩坑的是：

• ❌ 工具太多越看越乱（最后啥也没开始）
• ❌ 订阅/额度/网络问题（用着用着卡住）
• ❌ AI 改代码太猛（一把梭把项目改崩）
• ❌ 没有工作流（只会“问一句生成一段”，提效有限）

所以我只推荐能满足下面 4 个“刚需”的组合：

✅ 工作流可控（Plan→执行→测试→复盘） ✅ 上手成本低（新手能在 1 小时内跑通） ✅ 可持续使用（成本与可用性不崩） ✅ 适配国内环境（能稳定用、能替换模型）

🧭 2. 3 套推荐方案：你属于哪一类？

你只需要回答一个问题：你更想要“稳”还是“快”还是“可控/省钱”？

方案 A：🛡️ Claude Code + 智谱 GLM-4.7（新手/稳/安全）

适合你如果：

• 你是新手，最怕 AI 乱改代码、改崩项目
• 你想要“先计划、再执行”的安全感
• 你想把 AI 当“老师+副驾驶”，一步一步跟着做

你会得到：

• ✅ Plan 风格的开发方式（先出计划/改动清单，你确认再动手）
• ✅ 更适合“从零到一”的学习路径（需求→拆解→落地）
• ✅ 更少翻车（特别是重构/多文件改动）

🧰 Claude Code + 智谱 GLM-4.7 安装与配置指南（可直接照做）

✅ 适用人群：新手入门 / 国内环境 / 想要“Plan → 执行 → 验证”的安全工作流 🎯 目标：安装 Claude Code，并接入 智谱 GLM-4.7（Coding Plan） 的 Anthropic 兼容接口

🔗 官方文档（建议收藏）

• 📘 Claude Code 官方文档（中文）： https://code.claude.com/docs/zh-CN/overview
• 📗 智谱 GLM-4.7 官方配置 Claude Code 指南： https://docs.bigmodel.cn/cn/coding-plan/quick-start

✅ 0. 前提条件（必须）

• 🟢 已安装 Node.js 18 或更新版本
• 🟢 已准备好你的 智谱 API Key（Coding Plan）
• 🟢 有一个项目目录（任意文件夹都行）

1) 🧩 安装 Claude Code

1.1 📦 全局安装

npm install -g @anthropic-ai/claude-code

1.2 📁 创建/进入你的工作目录（示例：your-project）

cd your-project

1.3 🚀 启动 Claude Code

claude

✅ 如果能进入交互界面，说明安装成功。

2) 🔑 配置 GLM-4.7（关键：环境变量 / settings.json）

在智谱后台申请API_KEY后复制 https://bigmodel.cn/usercenter/proj-mgmt/apikeys

使用cc switch https://github.com/farion1231/cc-switch cc switch.exehttps://download.csdn.net/download/weixin_44151887/92643394

打开claude,直接问你是什么模型

配置GLM4.7成功

贪吃蛇示例:

提示词:我想做一个贪吃蛇html游戏

贪吃蛇HTML游戏实现计划 │
│ │
│ 项目概述 │
│ │
│ 单HTML文件实现的贪吃蛇游戏，包含AI自动玩功能。 │
│ │
│ 技术栈 │
│ │
│ – HTML5 Canvas │
│ – 原生JavaScript │
│ – CSS（最小化样式） │
│ │
│ 核心功能 │
│ │
│ 1. 游戏基础 │
│ │
│ – Canvas渲染游戏画面 │
│ – 网格系统（20×20单元格） │
│ – 游戏循环（requestAnimationFrame） │
│ – 帧率控制（根据分数动态调整） │
│ │
│ 2. 蛇的实现 │
│ │
│ – 数据结构：数组存储身体坐标 [{x, y}, {x, y}, ...] │
│ – 移动逻辑：头部添加新坐标，尾部移除（吃到食物时不移除） │
│ – 方向控制：上下左右，防止反向移动 │
│ – 初始状态：3格长度，居中位置 │
│ │
│ 3. 食物系统 │
│ │
│ – 随机生成位置（避开蛇身） │
│ – 碰撞检测：蛇头坐标 === 食物坐标 │
│ – 吃到后：蛇身+1，分数+10，重新生成食物 │
│ │
│ 4. 碰撞检测 │
│ │
│ – 墙壁碰撞：x < 0 || x >= gridSize || y < 0 || y >= gridSize │
│ – 自身碰撞：头部坐标与身体任意部分重合 │
│ – 游戏结束处理 │
│ │
│ 5. 计分系统 │
│ │
│ – 当前分数显示 │
│ – 最高分记录（localStorage持久化） │
│ – 速度递增：每50分加速一次 │
│ │
│ 6. 游戏控制 │
│ │
│ – 键盘控制：方向键/WASD │
│ – 空格键：暂停/继续 │
│ – Enter键：重新开始 │
│ – AI开关按钮：切换自动/手动模式 │
│ │
│ 7. AI自动玩功能 │
│ │
│ 算法选择：简化A*寻路 │
│ – 目标：找到从蛇头到食物的最短安全路径 │
│ – 实现： │
│ – BFS广度优先搜索找路径 │
│ – 安全性检查：避开墙壁和蛇身 │
│ – 失败回退：找不到路径时随机选择安全方向 │
│ – 每帧执行一次路径计算 │
│ – 平滑移动（保持游戏速度） │
│ │
│ 文件结构 │
│ │
│ snake-game.html │
│ ├── <style> – 最小化CSS │
│ ├── <canvas> – 游戏画面 │
│ ├── <div> – 控制面板（分数、按钮） │
│ └── <script> – 游戏逻辑 │
│ ├── 常量定义 │
│ ├── 游戏状态 │
│ ├── 渲染函数 │
│ ├── 游戏逻辑函数 │
│ ├── AI寻路算法 │
│ ├── 事件监听 │
│ └── 游戏循环 │
│ │
│ 实现细节 │
│ │
│ 数据结构 │
│ │
│ const game = { │
│ snake: [{x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10}], │
│ direction: {x: 1, y: 0}, │
│ food: {x: 15, y: 15}, │
│ score: 0, │
│ highScore: 0, │
│ speed: 150, // ms per frame │
│ paused: false, │
│ gameOver: false, │
│ aiMode: false │
│ } │
│ │
│ AI寻路核心逻辑 │
│ │
│ function findPath(start, target, obstacles) { │
│ // BFS队列 │
│ // 记录访问过的节点 │
│ // 记录路径 │
│ // 返回下一步方向 │
│ } │
│ │
│ function getNextAIMove() { │
│ const path = findPath(snakeHead, food, snakeBody); │
│ if (path.length > 0) return path[0]; │
│ // 回退：找安全方向 │
│ return findSafeDirection(); │
│ } │
│ │
│ 速度递增规则 │
│ │
│ – 初始速度：150ms/帧 │
│ – 每50分：速度减少15ms │
│ – 最快速度：50ms/帧 │
│ │
│ UI布局 │
│ │
│ ┌─────────────────────────────┐ │
│ │ 贪吃蛇游戏 │ │
│ │ 分数: 120 最高: 350 │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ Canvas游戏区域 │ │ │
│ │ │ │ │ │
│ │ └─────────────────────┘ │ │
│ │ [暂停] [重新开始] [AI: 关] │ │
│ │ 提示: 方向键/WASD移动 │ │
│ └─────────────────────────────┘ │
│ │
│ 验证测试 │
│ │
│ 1. 手动模式测试 │
│ – 方向键控制移动 │
│ – 吃食物增长和计分 │
│ – 碰撞墙壁游戏结束 │
│ – 碰撞自身游戏结束 │
│ – 暂停/继续功能 │
│ – 重新开始功能 │
│ – 速度递增效果 │
│ 2. AI模式测试 │
│ – 切换AI开关 │
│ – AI自动寻路到食物 │
│ – AI避开墙壁和自身 │
│ – AI在困境中的回退策略 │
│ – 长时间运行稳定性 │
│ 3. 边界测试 │
│ – 食物不会生成在蛇身上 │
│ – 最高分正确保存和读取 │
│ – 速度上下限正确 │
│ │
│ 代码风格 │
│ │
│ – 函数短小单一职责 │
│ – 避免深层嵌套 │
│ – 清晰的变量命名 │
│ – 最小化代码量 │
│ – 中文注释关键逻辑

选第一个就行了

贪吃蛇代码如下

<!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; }
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1a1a;
font-family: 'Courier New', monospace;
color: #fff;
}
.container { text-align: center; }
h1 { margin-bottom: 10px; font-size: 24px; }
.info { margin-bottom: 10px; font-size: 16px; }
canvas {
border: 2px solid #4CAF50;
background: #000;
display: block;
margin: 0 auto 15px;
}
.controls { margin-bottom: 10px; }
button {
padding: 8px 16px;
margin: 0 5px;
font-size: 14px;
cursor: pointer;
background: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
}
button:hover { background: #45a049; }
.hint { font-size: 12px; color: #888; }
</style>
</head>
<body>
<div class="container">
<h1>贪吃蛇游戏</h1>
<div class="info">
<span>分数: <span id="score">0</span></span>
<span style="margin-left: 20px;">最高: <span id="highScore">0</span></span>
</div>
<canvas id="game" width="400" height="400"></canvas>
<div class="controls">
<button id="pauseBtn">暂停</button>
<button id="restartBtn">重新开始</button>
<button id="aiBtn">AI: 关</button>
</div>
<div class="hint">方向键/WASD移动 | 空格暂停 | Enter重新开始</div>
</div>

<script>
/**
* [INPUT]: Canvas API, localStorage, 键盘事件
* [OUTPUT]: 完整的贪吃蛇游戏,包含AI自动玩功能
* [POS]: 单文件游戏实现,核心逻辑包含游戏循环/碰撞检测/AI寻路
* [PROTOCOL]: 变更时更新此头部,然后检查 CLAUDE.md
*/

// ============ 常量定义 ============
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const GRID_SIZE = 20;
const CELL_SIZE = canvas.width / GRID_SIZE;
const INITIAL_SPEED = 150;
const MIN_SPEED = 50;
const SPEED_INCREMENT = 15;
const SCORE_THRESHOLD = 50;

// ============ 游戏状态 ============
let game = {
snake: [{x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10}],
direction: {x: 1, y: 0},
nextDirection: {x: 1, y: 0},
food: null,
score: 0,
highScore: parseInt(localStorage.getItem('snakeHighScore')) || 0,
speed: INITIAL_SPEED,
paused: false,
gameOver: false,
aiMode: false,
lastUpdate: 0
};

// ============ 初始化 ============
function init() {
game.snake = [{x: 10, y: 10}, {x: 9, y: 10}, {x: 8, y: 10}];
game.direction = {x: 1, y: 0};
game.nextDirection = {x: 1, y: 0};
game.score = 0;
game.speed = INITIAL_SPEED;
game.paused = false;
game.gameOver = false;
generateFood();
updateUI();
}

// ============ 食物生成 ============
function generateFood() {
do {
game.food = {
x: Math.floor(Math.random() * GRID_SIZE),
y: Math.floor(Math.random() * GRID_SIZE)
};
} while (game.snake.some(seg => seg.x === game.food.x && seg.y === game.food.y));
}

// ============ 渲染 ============
function render() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制蛇
game.snake.forEach((seg, i) => {
ctx.fillStyle = i === 0 ? '#4CAF50' : '#8BC34A';
ctx.fillRect(seg.x * CELL_SIZE, seg.y * CELL_SIZE, CELL_SIZE – 1, CELL_SIZE – 1);
});

// 绘制食物
ctx.fillStyle = '#FF5722';
ctx.fillRect(game.food.x * CELL_SIZE, game.food.y * CELL_SIZE, CELL_SIZE – 1, CELL_SIZE – 1);

// 游戏结束提示
if (game.gameOver) {
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.font = '30px Courier New';
ctx.textAlign = 'center';
ctx.fillText('游戏结束', canvas.width / 2, canvas.height / 2 – 20);
ctx.font = '16px Courier New';
ctx.fillText('按 Enter 重新开始', canvas.width / 2, canvas.height / 2 + 20);
}
}

// ============ 游戏逻辑 ============
function update() {
if (game.paused || game.gameOver) return;

game.direction = game.nextDirection;

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

// 碰撞检测
if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE ||
game.snake.some(seg => seg.x === head.x && seg.y === head.y)) {
game.gameOver = true;
return;
}

game.snake.unshift(head);

// 吃食物
if (head.x === game.food.x && head.y === game.food.y) {
game.score += 10;
if (game.score > game.highScore) {
game.highScore = game.score;
localStorage.setItem('snakeHighScore', game.highScore);
}
// 速度递增
if (game.score % SCORE_THRESHOLD === 0 && game.speed > MIN_SPEED) {
game.speed = Math.max(MIN_SPEED, game.speed – SPEED_INCREMENT);
}
generateFood();
updateUI();
} else {
game.snake.pop();
}
}

// ============ AI寻路 ============
function findPath(start, target) {
const queue = [[start]];
const visited = new Set([`${start.x},${start.y}`]);

while (queue.length > 0) {
const path = queue.shift();
const pos = path[path.length – 1];

if (pos.x === target.x && pos.y === target.y) {
return path.length > 1 ? path[1] : null;
}

const directions = [{x: 0, y: –1}, {x: 1, y: 0}, {x: 0, y: 1}, {x: –1, y: 0}];
for (const dir of directions) {
const next = {x: pos.x + dir.x, y: pos.y + dir.y};
const key = `${next.x},${next.y}`;

if (next.x >= 0 && next.x < GRID_SIZE && next.y >= 0 && next.y < GRID_SIZE &&
!visited.has(key) && !game.snake.some(seg => seg.x === next.x && seg.y === next.y)) {
visited.add(key);
queue.push([…path, next]);
}
}
}
return null;
}

function findSafeDirection() {
const directions = [
{x: 0, y: –1}, {x: 1, y: 0}, {x: 0, y: 1}, {x: –1, y: 0}
];

for (const dir of directions) {
const next = {
x: game.snake[0].x + dir.x,
y: game.snake[0].y + dir.y
};

if (next.x >= 0 && next.x < GRID_SIZE && next.y >= 0 && next.y < GRID_SIZE &&
!game.snake.some(seg => seg.x === next.x && seg.y === next.y)) {
return dir;
}
}
return {x: 1, y: 0};
}

function getAIMove() {
const nextPos = findPath(game.snake[0], game.food);
if (nextPos) {
return {
x: nextPos.x – game.snake[0].x,
y: nextPos.y – game.snake[0].y
};
}
return findSafeDirection();
}

// ============ 游戏循环 ============
function gameLoop(timestamp) {
if (timestamp – game.lastUpdate >= game.speed) {
if (game.aiMode && !game.paused && !game.gameOver) {
const aiDir = getAIMove();
// 防止反向移动
if (!(aiDir.x === –game.direction.x && aiDir.y === –game.direction.y)) {
game.nextDirection = aiDir;
}
}
update();
render();
game.lastUpdate = timestamp;
}
requestAnimationFrame(gameLoop);
}

// ============ UI更新 ============
function updateUI() {
document.getElementById('score').textContent = game.score;
document.getElementById('highScore').textContent = game.highScore;
document.getElementById('pauseBtn').textContent = game.paused ? '继续' : '暂停';
document.getElementById('aiBtn').textContent = game.aiMode ? 'AI: 开' : 'AI: 关';
}

// ============ 事件监听 ============
document.addEventListener('keydown', e => {
if (game.gameOver) {
if (e.key === 'Enter') {
init();
render();
}
return;
}

if (e.key === ' ') {
e.preventDefault();
game.paused = !game.paused;
updateUI();
return;
}

if (e.key === 'Enter') {
e.preventDefault();
init();
render();
return;
}

if (game.aiMode) return;

const keyMap = {
'ArrowUp': {x: 0, y: –1}, 'w': {x: 0, y: –1}, 'W': {x: 0, y: –1},
'ArrowRight': {x: 1, y: 0}, 'd': {x: 1, y: 0}, 'D': {x: 1, y: 0},
'ArrowDown': {x: 0, y: 1}, 's': {x: 0, y: 1}, 'S': {x: 0, y: 1},
'ArrowLeft': {x: –1, y: 0}, 'a': {x: –1, y: 0}, 'A': {x: –1, y: 0}
};

const newDir = keyMap[e.key];
if (newDir && !(newDir.x === –game.direction.x && newDir.y === –game.direction.y)) {
game.nextDirection = newDir;
e.preventDefault();
}
});

document.getElementById('pauseBtn').addEventListener('click', () => {
if (!game.gameOver) {
game.paused = !game.paused;
updateUI();
}
});

document.getElementById('restartBtn').addEventListener('click', () => {
init();
render();
});

document.getElementById('aiBtn').addEventListener('click', () => {
game.aiMode = !game.aiMode;
updateUI();
});

// ============ 启动游戏 ============
init();
render();
requestAnimationFrame(gameLoop);
</script>
</body>
</html>

方案 B：💻 Cursor（VSCode 党/最快上手/写改一体）

cursor官网https://cursor.com/cn?from=home cursor.exe安装包https://download.csdn.net/download/weixin_44151887/92643403 cursor支持ssh连接到服务器后一键部署github项目，自动安装所有环境并启动项目 缺点:20刀一个月，不耐用

✌️✌️✌️cursor就可以正常使用了

适合你如果：

• 你本来就重度使用 VSCode
• 你更在乎“写代码更快、改代码更快”
• 你做的是中小项目/快速迭代/原型开发

你会得到：

• ✅ IDE 体验最顺（几乎零学习成本）
• ✅ 写改一体效率极高（尤其是局部修改、批量重命名、生成组件）
• ✅ 更适合前端/全栈日常开发

一句话总结：最快把效率拉上来，你熟悉 VSCode 就闭眼上。

cursor制作贪吃蛇 提示词： 帮我做一个贪吃蛇游戏：

提示词： 你再设计一个自动路线规划吃豆豆，然后这个是在页面上显示开关，自动吃豆豆，自己计算避免撞墙

提示词： 为什么还会死？！优化我要他吃到最后一个

总结改项目到md文件（包含怎么实现，逻辑，原理），还有下次如何0-1搭建这个项目，给我对应的提示词

贪吃蛇代码:

<!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; }

:root {
–bg-deep: #0a0a1a;
–bg-surface: #12122a;
–bg-card: #1a1a3e;
–accent: #00f5d4;
–accent-glow: rgba(0, 245, 212, 0.4);
–accent-dim: rgba(0, 245, 212, 0.15);
–pink: #f72585;
–pink-glow: rgba(247, 37, 133, 0.4);
–purple: #7209b7;
–blue: #4361ee;
–gold: #ffd60a;
–text: #e8e8f0;
–text-dim: #8888aa;
–danger: #ff3366;
–radius: 16px;
}

body {
background: var(–bg-deep);
color: var(–text);
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}

/* ========================================
背景网格动画
======================================== */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(114, 9, 183, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0, 245, 212, 0.06) 0%, transparent 50%),
radial-gradient(circle at 50% 80%, rgba(247, 37, 133, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}

.grid-bg {
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}

/* ========================================
游戏容器
======================================== */
.game-wrapper {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}

.game-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 480px;
padding: 0 4px;
}

.game-title {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.5px;
background: linear-gradient(135deg, var(–accent), var(–blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.score-display {
display: flex;
align-items: center;
gap: 16px;
}

.score-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}

.score-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(–text-dim);
font-weight: 600;
}

.score-value {
font-size: 24px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(–accent);
text-shadow: 0 0 20px var(–accent-glow);
transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.score-value.bump {
transform: scale(1.3);
}

.best-value {
color: var(–gold);
text-shadow: 0 0 20px rgba(255, 214, 10, 0.4);
}

/* ========================================
游戏画布
======================================== */
.canvas-container {
position: relative;
border-radius: var(–radius);
overflow: hidden;
}

.canvas-container::before {
content: '';
position: absolute;
inset: -2px;
border-radius: calc(var(–radius) + 2px);
background: linear-gradient(135deg, var(–accent), var(–purple), var(–pink));
z-index: -1;
opacity: 0.6;
}

#game {
display: block;
background: var(–bg-surface);
border-radius: var(–radius);
}

/* ========================================
覆盖层 (开始/结束)
======================================== */
.overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
background: rgba(10, 10, 26, 0.85);
backdrop-filter: blur(8px);
border-radius: var(–radius);
z-index: 10;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.overlay.hidden {
opacity: 0;
pointer-events: none;
transform: scale(1.05);
}

.overlay-icon {
font-size: 56px;
animation: floatBounce 2s ease-in-out infinite;
}

@keyframes floatBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.overlay-title {
font-size: 32px;
font-weight: 800;
letter-spacing: -0.5px;
}

.overlay-title.game-over {
background: linear-gradient(135deg, var(–danger), var(–pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.overlay-subtitle {
color: var(–text-dim);
font-size: 14px;
max-width: 260px;
text-align: center;
line-height: 1.5;
}

.overlay-score {
font-size: 48px;
font-weight: 900;
color: var(–accent);
text-shadow: 0 0 30px var(–accent-glow);
}

/* ========================================
按钮
======================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 36px;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
outline: none;
position: relative;
overflow: hidden;
}

.btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50px;
opacity: 0;
transition: opacity 0.2s;
}

.btn:hover::before { opacity: 1; }
.btn:active { transform: scale(0.96); }

.btn-primary {
background: linear-gradient(135deg, var(–accent) 0%, #00c4a7 50%, #009d88 100%);
color: #0a0a1a;
box-shadow:
0 4px 16px var(–accent-glow),
inset 0 1px 0 rgba(255,255,255,0.25),
inset 0 -1px 0 rgba(0,0,0,0.1);
}

.btn-primary:hover {
box-shadow:
0 8px 32px var(–accent-glow),
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 0 rgba(0,0,0,0.15);
transform: translateY(-2px);
}

.btn-primary:active {
transform: translateY(0) scale(0.97);
}

.btn-ghost {
background: rgba(255,255,255,0.06);
color: var(–text);
border: 1px solid rgba(255,255,255,0.1);
}

.btn-ghost:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.2);
}

/* ========================================
操作提示
======================================== */
.controls-hint {
display: flex;
align-items: center;
gap: 6px;
color: var(–text-dim);
font-size: 12px;
margin-top: 4px;
}

.key {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
font-size: 14px;
color: var(–text-dim);
}

/* ========================================
粒子画布
======================================== */
#particles {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
}

/* ========================================
AI 自动模式开关
======================================== */
.ai-toggle-wrap {
display: flex;
align-items: center;
gap: 10px;
}

.ai-label {
font-size: 13px;
font-weight: 700;
color: var(–text-dim);
display: flex;
align-items: center;
gap: 5px;
transition: color 0.3s;
user-select: none;
}

.ai-label.active {
color: var(–accent);
text-shadow: 0 0 12px var(–accent-glow);
}

.ai-label .ai-icon {
font-size: 16px;
}

.toggle-switch {
position: relative;
width: 52px;
height: 28px;
cursor: pointer;
}

.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}

.toggle-track {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50px;
transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.toggle-track::after {
content: '';
position: absolute;
width: 22px;
height: 22px;
border-radius: 50%;
top: 2px;
left: 2px;
background: var(–text-dim);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.toggle-switch input:checked + .toggle-track {
background: linear-gradient(135deg, var(–accent), #00c4a7);
border-color: var(–accent);
box-shadow: 0 0 16px var(–accent-glow), inset 0 0 8px rgba(0,245,212,0.15);
}

.toggle-switch input:checked + .toggle-track::after {
left: 26px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,245,212,0.5);
}

.ai-status {
font-size: 11px;
color: var(–text-dim);
font-weight: 600;
letter-spacing: 0.5px;
min-width: 30px;
transition: color 0.3s;
}

.ai-status.active {
color: var(–accent);
}

/* AI 路径可视化指示器 */
.ai-indicator {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: rgba(0, 245, 212, 0.1);
border: 1px solid rgba(0, 245, 212, 0.25);
border-radius: 20px;
font-size: 11px;
font-weight: 700;
color: var(–accent);
opacity: 0;
transform: translateY(-5px);
transition: all 0.3s ease;
pointer-events: none;
z-index: 5;
}

.ai-indicator.visible {
opacity: 1;
transform: translateY(0);
}

.ai-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(–accent);
animation: aiPulse 1.2s ease-in-out infinite;
}

@keyframes aiPulse {
0%, 100% { opacity: 1; box-shadow: 0 0 4px var(–accent-glow); }
50% { opacity: 0.4; box-shadow: 0 0 8px var(–accent-glow); }
}

/* ========================================
响应式
======================================== */
@media (max-width: 520px) {
.game-title { font-size: 22px; }
.score-value { font-size: 20px; }
.overlay-title { font-size: 26px; }
.overlay-score { font-size: 40px; }
}
</style>
</head>
<body>
<div class="grid-bg"></div>
<canvas id="particles"></canvas>

<div class="game-wrapper">
<!– 顶部信息栏 –>
<div class="game-header">
<div class="game-title">🐍 SNAKE</div>
<div class="score-display">
<div class="score-item">
<span class="score-label">分数</span>
<span class="score-value" id="score">0</span>
</div>
<div class="score-item">
<span class="score-label">最高</span>
<span class="score-value best-value" id="best">0</span>
</div>
</div>
</div>

<!– 画布 –>
<div class="canvas-container">
<canvas id="game" width="480" height="480"></canvas>
<div class="ai-indicator" id="aiIndicator"><span class="ai-dot"></span>AI 哈密顿环 · 永不死亡</div>

<!– 开始覆盖层 –>
<div class="overlay" id="startOverlay">
<div class="overlay-icon">🐍</div>
<div class="overlay-title">贪吃蛇</div>
<div class="overlay-subtitle">用方向键控制蛇的移动，吃掉食物来得分</div>
<button class="btn btn-primary" id="startBtn">▶ 开始游戏</button>
</div>

<!– 结束覆盖层 –>
<div class="overlay hidden" id="endOverlay">
<div class="overlay-icon">💀</div>
<div class="overlay-title game-over">游戏结束</div>
<div class="overlay-score" id="finalScore">0</div>
<div class="overlay-subtitle" id="endMessage">再来一次，打破记录！</div>
<button class="btn btn-primary" id="restartBtn">🔄 再来一局</button>
</div>
</div>

<!– AI 控制栏 + 操作提示 –>
<div class="controls-hint">
<div class="ai-toggle-wrap">
<span class="ai-label" id="aiLabel"><span class="ai-icon">🤖</span> AI</span>
<label class="toggle-switch">
<input type="checkbox" id="aiToggle">
<span class="toggle-track"></span>
</label>
<span class="ai-status" id="aiStatus">OFF</span>
</div>
<span style="margin: 0 10px; color: rgba(255,255,255,0.1);">│</span>
<span class="key">↑</span>
<span class="key">↓</span>
<span class="key">←</span>
<span class="key">→</span>
<span>方向</span>
<span style="margin-left: 6px" class="key">P</span>
<span>暂停</span>
</div>
</div>

<script>
/* ========================================
贪吃蛇核心引擎
======================================== */

// —- 常量 —-
const GRID = 20;
const CELL = 24;
const SIZE = GRID * CELL; // 480
const FPS_BASE = 8;
const FPS_MAX = 16;

// —- DOM —-
const gameCanvas = document.getElementById('game');
const ctx = gameCanvas.getContext('2d');
const particleCanvas = document.getElementById('particles');
const pCtx = particleCanvas.getContext('2d');
const scoreEl = document.getElementById('score');
const bestEl = document.getElementById('best');
const finalScoreEl = document.getElementById('finalScore');
const endMessage = document.getElementById('endMessage');
const startOverlay = document.getElementById('startOverlay');
const endOverlay = document.getElementById('endOverlay');
const startBtn = document.getElementById('startBtn');
const restartBtn = document.getElementById('restartBtn');

// —- 粒子画布尺寸 —-
function resizeParticles() {
particleCanvas.width = window.innerWidth;
particleCanvas.height = window.innerHeight;
}
resizeParticles();
window.addEventListener('resize', resizeParticles);

// —- 游戏状态 —-
var snake, dir, nextDir, food, score, best, running, paused, gameLoop;
var trail = []; // 蛇的轨迹（用于拖尾特效）
var particles = []; // 粒子数组
var foodPulse = 0; // 食物脉冲动画
var shakeTime = 0; // 屏幕震动

best = parseInt(localStorage.getItem('snake_best') || '0');
bestEl.textContent = best;

// —- 初始化 —-
function init() {
const mid = Math.floor(GRID / 2);
snake = [
{ x: mid, y: mid },
{ x: mid – 1, y: mid },
{ x: mid – 2, y: mid },
];
dir = { x: 1, y: 0 };
nextDir = { x: 1, y: 0 };
score = 0;
running = true;
paused = false;
particles = [];
trail = [];
shakeTime = 0;
scoreEl.textContent = '0';
spawnFood();
}

// —- 食物生成（优化：收集空格列表避免死循环）—-
function spawnFood() {
const bodySet = new Set(snake.map(s => (s.x << 5) | s.y));
const empty = [];
for (let x = 0; x < GRID; x++) {
for (let y = 0; y < GRID; y++) {
if (!bodySet.has((x << 5) | y)) empty.push({x, y});
}
}
if (empty.length === 0) return false; // 棋盘已满
food = empty[Math.floor(Math.random() * empty.length)];
foodPulse = 0;
return true;
}

// —- 移动逻辑 —-
function step() {
if (!running || paused) return;

// AI 在每步之前做决策
aiDecide();

dir = { …nextDir };
const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };

// 撞墙检测
if (head.x < 0 || head.x >= GRID || head.y < 0 || head.y >= GRID) {
return gameOver();
}

// 撞自己检测
for (let i = 0; i < snake.length; i++) {
if (snake[i].x === head.x && snake[i].y === head.y) {
return gameOver();
}
}

// 存轨迹
trail.push({ x: snake[snake.length – 1].x, y: snake[snake.length – 1].y, life: 1 });
if (trail.length > 30) trail.shift();

snake.unshift(head);

// 吃食物
if (head.x === food.x && head.y === food.y) {
score++;
scoreEl.textContent = score;

// 分数弹跳动画
scoreEl.classList.add('bump');
setTimeout(() => scoreEl.classList.remove('bump'), 200);

// 爆炸粒子
spawnEatParticles(food.x * CELL + CELL / 2, food.y * CELL + CELL / 2);

// 检查是否填满棋盘（完美通关）
if (snake.length >= GRID * GRID) {
return victory();
}

spawnFood();

// 加速（AI 模式用更高帧率）
clearInterval(gameLoop);
const fps = autoMode ? 30 : Math.min(FPS_BASE + Math.floor(score / 5), FPS_MAX);
gameLoop = setInterval(step, 1000 / fps);
} else {
snake.pop();
}
}

// —- 完美通关 —-
function victory() {
running = false;
clearInterval(gameLoop);
aiIndicator.classList.remove('visible');
aiPath = [];

// 庆祝粒子风暴
for (let i = 0; i < 60; i++) {
setTimeout(() => {
spawnEatParticles(Math.random() * SIZE, Math.random() * SIZE);
}, i * 50);
}

best = score;
localStorage.setItem('snake_best', best);
bestEl.textContent = best;
endMessage.textContent = '🏆 完美通关！蛇王降临！填满了整个棋盘！';
finalScoreEl.textContent = score;
endOverlay.classList.remove('hidden');
}

// —- 游戏结束 —-
function gameOver() {
running = false;
clearInterval(gameLoop);
shakeTime = 12;
aiIndicator.classList.remove('visible');
aiPath = [];

// 死亡粒子
snake.forEach(s => {
spawnDeathParticles(s.x * CELL + CELL / 2, s.y * CELL + CELL / 2);
});

if (score > best) {
best = score;
localStorage.setItem('snake_best', best);
bestEl.textContent = best;
endMessage.textContent = '🎉 新纪录！太强了！';
} else {
endMessage.textContent = '再来一次，打破记录！';
}

finalScoreEl.textContent = score;

setTimeout(() => {
endOverlay.classList.remove('hidden');
}, 600);
}

// —- 粒子系统 —-
function spawnEatParticles(cx, cy) {
// 转换到屏幕坐标
const rect = gameCanvas.getBoundingClientRect();
const sx = rect.left + cx;
const sy = rect.top + cy;
const colors = ['#00f5d4', '#f72585', '#ffd60a', '#4361ee', '#7209b7'];
for (let i = 0; i < 20; i++) {
const angle = (Math.PI * 2 / 20) * i + Math.random() * 0.3;
const speed = 2 + Math.random() * 4;
particles.push({
x: sx, y: sy,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
life: 1,
decay: 0.015 + Math.random() * 0.015,
size: 3 + Math.random() * 4,
color: colors[Math.floor(Math.random() * colors.length)],
});
}
}

function spawnDeathParticles(cx, cy) {
const rect = gameCanvas.getBoundingClientRect();
const sx = rect.left + cx;
const sy = rect.top + cy;
for (let i = 0; i < 4; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = 1 + Math.random() * 3;
particles.push({
x: sx, y: sy,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
life: 1,
decay: 0.02 + Math.random() * 0.02,
size: 2 + Math.random() * 3,
color: '#ff3366',
});
}
}

function updateParticles() {
for (let i = particles.length – 1; i >= 0; i—) {
const p = particles[i];
p.x += p.vx;
p.y += p.vy;
p.vx *= 0.97;
p.vy *= 0.97;
p.vy += 0.05; // 重力
p.life -= p.decay;
if (p.life <= 0) particles.splice(i, 1);
}
}

function drawParticles() {
pCtx.clearRect(0, 0, particleCanvas.width, particleCanvas.height);
particles.forEach(p => {
pCtx.globalAlpha = p.life;
pCtx.fillStyle = p.color;
pCtx.beginPath();
pCtx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
pCtx.fill();
});
pCtx.globalAlpha = 1;
}

// —- 渲染引擎 —-
function render() {
// 屏幕震动
ctx.save();
if (shakeTime > 0) {
const intensity = shakeTime * 0.8;
ctx.translate(
(Math.random() – 0.5) * intensity,
(Math.random() – 0.5) * intensity
);
shakeTime—;
}

// 清空
ctx.fillStyle = '#12122a';
ctx.fillRect(0, 0, SIZE, SIZE);

// 网格
ctx.strokeStyle = 'rgba(255,255,255,0.02)';
ctx.lineWidth = 1;
for (let i = 0; i <= GRID; i++) {
ctx.beginPath();
ctx.moveTo(i * CELL, 0);
ctx.lineTo(i * CELL, SIZE);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, i * CELL);
ctx.lineTo(SIZE, i * CELL);
ctx.stroke();
}

// 拖尾
trail.forEach(t => {
t.life -= 0.04;
if (t.life > 0) {
ctx.globalAlpha = t.life * 0.3;
ctx.fillStyle = '#00f5d4';
const pad = CELL * (1 – t.life) * 0.3;
roundRect(ctx, t.x * CELL + pad, t.y * CELL + pad, CELL – pad * 2, CELL – pad * 2, 4);
ctx.fill();
}
});
ctx.globalAlpha = 1;

// AI 路径可视化
drawAIPath();

// 食物
foodPulse += 0.06;
const pulse = 1 + Math.sin(foodPulse) * 0.12;
const foodCx = food.x * CELL + CELL / 2;
const foodCy = food.y * CELL + CELL / 2;
const foodR = (CELL / 2 – 2) * pulse;

// 食物光晕
const glow = ctx.createRadialGradient(foodCx, foodCy, 0, foodCx, foodCy, CELL * 1.5);
glow.addColorStop(0, 'rgba(247, 37, 133, 0.2)');
glow.addColorStop(1, 'transparent');
ctx.fillStyle = glow;
ctx.fillRect(food.x * CELL – CELL, food.y * CELL – CELL, CELL * 3, CELL * 3);

// 食物本体
const foodGrad = ctx.createRadialGradient(foodCx – 2, foodCy – 2, 1, foodCx, foodCy, foodR);
foodGrad.addColorStop(0, '#ff6bab');
foodGrad.addColorStop(1, '#f72585');
ctx.fillStyle = foodGrad;
ctx.beginPath();
ctx.arc(foodCx, foodCy, foodR, 0, Math.PI * 2);
ctx.fill();

// 食物高光
ctx.fillStyle = 'rgba(255,255,255,0.4)';
ctx.beginPath();
ctx.arc(foodCx – 3, foodCy – 3, 3, 0, Math.PI * 2);
ctx.fill();

// 蛇身体
snake.forEach((seg, i) => {
const t = i / Math.max(snake.length – 1, 1);
const pad = 1;
const x = seg.x * CELL + pad;
const y = seg.y * CELL + pad;
const s = CELL – pad * 2;
const radius = i === 0 ? 8 : 5;

// 身体渐变色
const r = Math.round(0 + t * 30);
const g = Math.round(245 – t * 120);
const b = Math.round(212 – t * 80);
const bodyColor = `rgb(${r}, ${g}, ${b})`;

// 发光
if (i === 0) {
ctx.shadowColor = 'rgba(0, 245, 212, 0.5)';
ctx.shadowBlur = 12;
}

ctx.fillStyle = bodyColor;
roundRect(ctx, x, y, s, s, radius);
ctx.fill();

ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;

// 顶部高光
ctx.fillStyle = `rgba(255,255,255,${i === 0 ? 0.25 : 0.1})`;
roundRect(ctx, x + 2, y + 1, s – 4, s * 0.4, radius – 1);
ctx.fill();

// 蛇眼睛
if (i === 0) {
const cx = seg.x * CELL + CELL / 2;
const cy = seg.y * CELL + CELL / 2;
const eyeOffX = dir.x * 4;
const eyeOffY = dir.y * 4;
const perpX = –dir.y;
const perpY = dir.x;

// 左眼
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(cx + eyeOffX + perpX * 4, cy + eyeOffY + perpY * 4, 3.5, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#0a0a1a';
ctx.beginPath();
ctx.arc(cx + eyeOffX + perpX * 4 + dir.x * 1.2, cy + eyeOffY + perpY * 4 + dir.y * 1.2, 2, 0, Math.PI * 2);
ctx.fill();

// 右眼
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(cx + eyeOffX – perpX * 4, cy + eyeOffY – perpY * 4, 3.5, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#0a0a1a';
ctx.beginPath();
ctx.arc(cx + eyeOffX – perpX * 4 + dir.x * 1.2, cy + eyeOffY – perpY * 4 + dir.y * 1.2, 2, 0, Math.PI * 2);
ctx.fill();
}
});

ctx.restore();

// 粒子
updateParticles();
drawParticles();

requestAnimationFrame(render);
}

// —- 圆角矩形工具 —-
function roundRect(ctx, x, y, w, h, r) {
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + w – r, y);
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
ctx.lineTo(x + w, y + h – r);
ctx.quadraticCurveTo(x + w, y + h, x + w – r, y + h);
ctx.lineTo(x + r, y + h);
ctx.quadraticCurveTo(x, y + h, x, y + h – r);
ctx.lineTo(x, y + r);
ctx.quadraticCurveTo(x, y, x + r, y);
ctx.closePath();
}

/* ========================================
AI 自动寻路系统 — 哈密顿环 + 快捷路径
保证：永远不会死亡，理论可填满整个棋盘
======================================== */

var autoMode = false;
var aiPath = [];

// —- 哈密顿环生成 —-
// 构造一条遍历 20×20 所有 400 格的闭合环路
// 环路结构：顶行→蛇形遍历内部→左列返回
const TOTAL = GRID * GRID; // 400
const cyclePath = []; // 环路坐标序列
const cycleIdx = Array.from({length: GRID}, () => new Int16Array(GRID));

(function buildHamiltonianCycle() {
// Phase 1: 第0行，从左到右
for (let x = 0; x < GRID; x++) {
cyclePath.push({x, y: 0});
}
// Phase 2: 第1~19行，蛇形遍历列1~19
for (let y = 1; y < GRID; y++) {
if (y % 2 === 1) {
for (let x = GRID – 1; x >= 1; x—) cyclePath.push({x, y});
} else {
for (let x = 1; x < GRID; x++) cyclePath.push({x, y});
}
}
// Phase 3: 第0列，从下到上（行19→1）闭合回(0,0)
for (let y = GRID – 1; y >= 1; y—) {
cyclePath.push({x: 0, y});
}
// 建立坐标 → 环索引查找表
for (let i = 0; i < cyclePath.length; i++) {
cycleIdx[cyclePath[i].x][cyclePath[i].y] = i;
}
})();