本教程面向从未接触过 Claude Code 的零基础学习者,带你从安装环境开始,一步步用一句话提示词生成一个可在浏览器里玩的贪吃蛇网页游戏。完成后你将掌握 Claude Code 的安装、登录、对话、文件读写与项目组织全流程,并拥有一份自己生成的可运行 HTML 小游戏。全程无需手写复杂代码,适合编程小白、转行学习者与训练营入门第一课。
在开始之前,请确认你的电脑满足以下条件:
| 条目 | 要求 | 说明 |
|---|---|---|
| 操作系统 | Windows / macOS / Linux 任一 | 三端均可 |
| 终端 | 系统自带终端或 PowerShell、iTerm | 用来输入命令 |
| Node.js | 18 及以上版本 | Claude Code 的运行基础 |
| 网络 | 能访问 npm 与 Anthropic | 安装与登录需要联网 |
| 浏览器 | Chrome / Edge / Firefox 任一 | 用来打开生成的游戏 |
如果你还没有 Node.js,去官网下载"长期支持版(LTS)"安装即可。安装完成后,打开终端,输入:
node -v
npm -v
只要两条命令都能返回一个版本号(如 v20.11.0 和 10.2.4),就说明环境就绪。
小贴士:如果你同时维护多个项目、Node 版本经常切换,推荐安装
nvm(macOS/Linux)或fnm(Windows)来管理 Node 版本,避免版本冲突。
在终端里执行一条命令即可全局安装:
npm install -g @anthropic-ai/claude-code
预期结果:命令执行完毕后,终端会显示一串安装日志,最后一行通常类似 added 1 package in 12s。接着输入:
claude --version
能看到版本号(如 1.x.x)就代表安装成功。
常见问题:
EACCES 权限错误,说明全局安装目录没有写权限。两种解法:一是用 sudo(sudo npm install -g @anthropic-ai/claude-code),二是把 npm 全局目录改到用户目录下(推荐后者,长期更省心)。claude 提示 command not found,多半是 npm 全局 bin 目录没加入系统环境变量 PATH。可执行 npm config get prefix 找到全局路径,再把对应的 bin 子目录加入 PATH。在任意目录下直接输入:
claude
首次启动时,Claude Code 会引导你完成登录。主流方式有两种:
# macOS / Linux
export ANTHROPIC_API_KEY="你的密钥"
# Windows PowerShell
$env:ANTHROPIC_API_KEY="你的密钥"
预期结果:登录成功后,终端会出现一个交互式输入框,光标闪烁等待你提问,界面通常显示类似 > 提示符与当前所在目录。
常见问题:
claude 再获取一次即可。养成"一个项目一个文件夹"的好习惯。在终端执行:
mkdir snake-game
cd snake-game
进入文件夹后,再次启动 Claude Code:
claude
注意:Claude Code 启动时会"看"到当前目录下的文件,作为它工作的上下文。所以在哪个文件夹启动,它就在哪个文件夹干活。
很多人第一次用 AI 写代码效果不好,根因是提示词太模糊。一个能产出高质量结果的提示词应该包含:目标、技术栈、功能点、风格要求。
在交互框里输入下面这段:
帮我在当前目录创建一个 index.html 文件,实现一个贪吃蛇游戏。要求:
1. 单文件实现,HTML + CSS + JavaScript 全部写在一个文件里
2. 20×20 的方格棋盘,蛇是绿色方块,食物是红色方块
3. 用键盘方向键控制方向,吃到食物加分加长,撞墙或撞自己游戏结束
4. 顶部显示当前分数和最高分(用 localStorage 保存)
5. 有"开始/暂停"按钮和重新开始功能
6. 整体配色干净现代,棋盘居中显示
按下回车后,Claude Code 会开始思考并写代码。
预期结果:你会看到它在终端里"边想边做"——先是分析需求,然后调用工具创建 index.html,最后输出一段它做了什么的说明。终端里通常会出现形如 Created index.html 的提示。
常见问题:
y 回车同意;如果想让它后续不再每次都问,可以后续配置权限。让 Claude Code 自己打开看看:
帮我打开 index.html 看看里面的内容
或者在终端退出 Claude Code(按两次 Ctrl+C 或输入 /exit)后直接用编辑器打开 snake-game/index.html。你会得到一份结构清晰的单文件代码,大致长这样(节选关键骨架):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
body { font-family: sans-serif; display: flex; flex-direction: column;
align-items: center; margin-top: 40px; background: #f5f6fa; }
canvas { border: 2px solid #333; background: #fff; }
.scoreboard { font-size: 20px; margin: 12px; }
button { margin: 4px; padding: 8px 16px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<div class="scoreboard">得分:<span id="score">0</span> 最高分:<span id="best">0</span></div>
<canvas id="board" width="400" height="400"></canvas>
<div>
<button id="startBtn">开始 / 暂停</button>
<button id="restartBtn">重新开始</button>
</div>
<script>
// 关键逻辑:网格、蛇身数组、食物坐标、方向、游戏循环
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const CELL = 20, COLS = 20, ROWS = 20;
let snake, food, dir, score, timer, running = false;
let best = Number(localStorage.getItem('snake_best') || 0);
document.getElementById('best').textContent = best;
function reset() {
snake = [{x:10,y:10}];
dir = {x:1,y:0};
score = 0;
placeFood();
updateScore();
}
function placeFood() {
food = { x: Math.floor(Math.random()*COLS), y: Math.floor(Math.random()*ROWS) };
}
function updateScore() {
document.getElementById('score').textContent = score;
}
function tick() {
const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
// 撞墙或撞自己
if (head.x<0||head.y<0||head.x>=COLS||head.y>=ROWS ||
snake.some(s => s.x===head.x && s.y===head.y)) {
clearInterval(timer); running = false;
if (score > best) { best = score; localStorage.setItem('snake_best', best);
document.getElementById('best').textContent = best; }
alert('游戏结束,得分 ' + score);
return;
}
snake.unshift(head);
if (head.x===food.x && head.y===food.y) { score++; updateScore(); placeFood(); }
else snake.pop();
draw();
}
function draw() {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = '#e74c3c'; ctx.fillRect(food.x*CELL, food.y*CELL, CELL, CELL);
ctx.fillStyle = '#2ecc71';
snake.forEach(s => ctx.fillRect(s.x*CELL, s.y*CELL, CELL, CELL));
}
document.addEventListener('keydown', e => {
const m = {ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};
if (m[e.key]) { const [x,y]=m[e.key]; if (x!==-dir.x||y!==-dir.y) dir={x,y}; }
});
document.getElementById('startBtn').onclick = () => {
if (!running) { reset(); running = true; draw(); timer = setInterval(tick, 150); }
else { clearInterval(timer); running = false; }
};
document.getElementById('restartBtn').onclick = () => {
clearInterval(timer); running = false; reset(); draw();
};
</script>
</body>
</html>
不需要搭服务器,直接双击 index.html 文件,或把它拖进浏览器窗口,游戏立刻就能玩。用方向键控制绿色小蛇吃红色食物,分数会实时累加,最高分会被浏览器记住。
常见问题:
F12 打开浏览器开发者工具的 Console 面板,看有没有红色报错;多半是某个变量名拼错,把报错信息复制给 Claude Code 让它修。第一次跑通后,继续在同一对话里追加需求,让它逐步增强游戏:
请给游戏增加:
1. 难度选择(慢/中/快,对应不同的刷新速度)
2. 吃到食物时有音效(用 Web Audio API,不要外部音频文件)
3. 游戏结束时不弹 alert,改为页面中央显示半透明结算面板
4. 蛇头和蛇身颜色稍微区分一下
预期结果:Claude Code 会读取现有的 index.html,在原有基础上做增量修改,而不是推倒重写。这正是它"记住上下文"的优势——你不用把整份代码再贴一遍。
把上面的步骤串起来,一个零基础学习者的完整操作链如下:
# 1. 安装
npm install -g @anthropic-ai/claude-code
claude --version
# 2. 登录(首次启动自动引导)
claude
# 3. 建项目
mkdir snake-game && cd snake-game
claude
# 4. 在交互框输入需求提示词(见第四步)
# 5. 同意写入文件
# 6. 追加迭代需求(见第七步)
# 7. 双击 index.html 即玩
进阶一点,可以让 Claude Code 帮你把项目纳入版本管理(如果你已安装 git):
帮我把这个项目初始化为 git 仓库,写一个合适的 .gitignore 和 README.md,并做第一次提交
这样你就拥有了一个规范的、可分享的小项目。
下面这张图展示了从安装到游戏跑通的完整工作流:
flowchart TD
A[确认 Node.js 环境] --> B[npm 全局安装 Claude Code]
B --> C[终端运行 claude 登录认证]
C --> D{登录方式}
D -->|订阅账号| E[浏览器粘贴验证码]
D -->|API 密钥| F[设置环境变量]
E --> G[创建项目文件夹并进入]
F --> G
G --> H[在文件夹内启动 claude]
H --> I[输入清晰的需求提示词]
I --> J[Claude 读取目录 / 创建 index.html]
J --> K[同意写入文件]
K --> L[浏览器打开 index.html]
L --> M{游戏正常?}
M -->|是| N[追加迭代: 音效/难度/结算面板]
M -->|否| O[复制报错让 Claude 修复]
O --> L
N --> P[git 初始化并提交]
P --> Q[项目完成]
| 命令 / 操作 | 作用 |
|---|---|
claude |
在当前目录启动交互式会话 |
claude --version |
查看版本 |
/exit 或两次 Ctrl+C |
退出会话 |
/clear |
清空当前对话上下文 |
/help |
查看所有可用命令 |
Ctrl+C 一次 |
中断当前正在进行的生成 |
https://code.claude.com/docs/en/quickstart — Anthropic 官方出品的入门文档,权威且持续更新。CLAUDE.md 文件,把项目规则、技术栈约定写进去,Claude Code 每次启动都会自动读取,省去反复说明。/config 与权限配置,决定哪些命令可以让它自动执行、哪些必须每次确认,在安全与效率之间找到平衡。| 维度 | 评估 |
|---|---|
| 适用训练营 | 编程入门训练营、AI 编程入门营、转行 IT 训练营、青少年编程启蒙营 |
| 学员基础 | 零基础可学,会基本终端操作即可 |
| 教学时长 | 约 60–90 分钟(含讲解、动手、答疑) |
| 硬件要求 | 每人一台能联网、已装 Node.js 的电脑 |
| 学习产出 | 一份可运行、可分享的贪吃蛇网页游戏,建立"我也能用 AI 做出东西"的信心 |
| 衔接后续 | 学完后可平滑过渡到 Skill 开发、MCP 服务器、自动化 Agent 等进阶主题 |
本教程特别适合作为训练营的"破冰第一课":成果即时可见、成就感强、且不涉及复杂工程结构,能有效降低入门恐惧,为后续深入打下正向预期。
[!tip] 51学通信知识星球 星主:爱卫生(微信:gprshome201101)——公众号「51学通信」创办者,19 年通信行业运维与讲师经验,著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书(各大电商平台有售)。 星球定位:深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域,主打运维岗位与信令分析。 当前规模:5200 篇主题 / 990 个回答,198 元/年。 加入福利:加入星球后请加爱卫生微信,拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题,另有群内分享。 AI 加持:51学通信知识星球已作为 skill 接入 WorkBuddy,使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例,做总结、找文档和 PPT 等场景全覆盖。
