吃豆人：迷宫幽灵大逃杀，经典街机原地复活

吃豆人：迷宫幽灵大逃杀，经典街机原地复活

一句话需求丢给码道，自动生成一个单文件《吃豆人》——19×21 经典迷宫、四只性格各异的幽灵（直追/预判/包夹/远追近散）、能量豆反吃连击、过关提速加难。双击 index.html 就能玩，零依赖。
分类: ai-development
标签: CodeArts, AI编程, 吃豆人, 网页游戏, Canvas, JavaScript, 幽灵AI
难度: 初级
读者: 前端开发者、编程学习者、技术写作者

---

1. 开头钩子

《吃豆人》是街机时代的"顶流"：一张迷宫、四只幽灵、满屏豆子，玩法一句话能说清，但想复刻出"幽灵围追堵截"的压迫感并不容易——每个幽灵要有自己的追击策略，还得有散射/追击状态切换、能量豆反吃、过关提速。手写这一套逻辑，从迷宫数据结构到幽灵 AI，至少要大半天。这次我把需求直接丢给码道 TUI：「做一个网页版吃豆人经典街机游戏，单文件 index.html……」，排了一会儿队，码道自动生成了一个 800 多行的单文件 index.html，双击就能在浏览器里玩。开局就是熟悉的黑色迷宫：圆角发光蓝墙、左右隧道穿越，四只幽灵从中央牢房依次放出，压力感直接拉满。

2. 码道 TUI 安装

码道 CLI 官方提供 Windows 和 macOS/Linux 两种安装方式，按自己的系统选一种即可。
Windows（仅支持在 PowerShell 执行）

# 1. 一键安装
irm https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.ps1 | iex

# 2. 配置环境变量
$env:CODEARTS_CLI_AK="你的AK"
$env:CODEARTS_CLI_SK="你的SK"

# 3. 启动 TUI
codearts

macOS / Linux（终端）

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

安装成功后正常回显码道 CLI 的版本号，就代表装好了。在 PowerShell 或终端里输入 codearts 回车，即可打开码道 TUI，把开发需求贴进输入框。

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：一句「网页版吃豆人经典街机游戏」被拆成完整方案——迷宫渲染、实体移动、幽灵 AI、碰撞判定、关卡状态机、HUD 一应俱全
• 经典游戏还原：19×21 网格迷宫、左右隧道穿越、四只经典幽灵（Blinky 直追 / Pinky 预判 4 格 / Inky 包夹 / Clyde 远追近散）、scatter/chase 周期切换、能量豆反吃连击
• 游戏手感细节：吃豆人转向缓冲（nextDir）、嘴部开合动画、死亡动画、过场动画、飘字得分、底部能量豆倒计时进度条
• 自检与收尾：生成完自动梳理了「已创建 index.html，单文件包含全部 CSS/JS」的能力清单，双击即玩、零依赖

---

4. 任务描述

原始需求（粘贴进码道 TUI 的一段话）：

做一个网页版吃豆人（Pac-Man）经典街机游戏，单文件 index.html（内嵌 CSS 和 JS）。玩法：方向键控制吃豆人移动，吃掉迷宫里的所有豆子过关，遇到幽灵会被抓；豆子吃完后进入下一关，速度加快；幽灵有追击和巡逻 AI，吃到特殊能量豆后幽灵变蓝可以反吃。界面要有开始界面、实时分数、剩余豆子数、游戏结束/过关提示与重玩按钮；视觉要好看：经典黑色迷宫、彩色豆子与幽灵、流畅动画，支持方向键和 WASD 两种操作。

---

5. 开发过程及真实截图

全程用码道 TUI 交互式完成：启动 → 粘贴需求 → 回车提交 → 等待生成 → 双击运行。

码道从提交需求到生成完成只用了 6 分 45 秒，输出了一个 849 行的单文件 index.html，并给出了完整的能力清单：迷宫、吃豆人、四只幽灵、能量豆、过关机制、HUD、界面与视觉。

6. 代码解析（从项目源码提取）

迷宫：字符画直接转二维数组

迷宫先用 21 行字符串画好，# 是墙、. 是豆子、o 是能量豆、P 是吃豆人出生点、G 是幽灵牢房，initMaze() 一行行解析成网格并统计剩余豆子：

function initMaze() {
  grid = [];
  dotsLeft = 0;
  let pacStart = {x:9, y:15};
  let ghostStart = {x:9, y:9};
  for (let y = 0; y < ROWS; y++) {
    grid[y] = [];
    for (let x = 0; x < COLS; x++) {
      const ch = RAW_MAZE[y][x];
      switch(ch) {
        case '#': grid[y][x] = 3; break;
        case '.': grid[y][x] = 1; dotsLeft++; break;
        case 'o': grid[y][x] = 2; dotsLeft++; break;
        case 'P': grid[y][x] = 0; pacStart = {x,y}; break;
        case 'G': grid[y][x] = 0; ghostStart = {x,y}; break;
        default:  grid[y][x] = 0; break;
      }
    }
  }
  return { pacStart, ghostStart };
}

幽灵 AI：四只幽灵四种追击策略

ghostTarget() 是整局游戏的灵魂——每只幽灵根据名字返回不同的目标点：Blinky 直接追吃豆人，Pinky 预判吃豆人前方 4 格，Inky 用「吃豆人前方 2 格」和 Blinky 的位置做镜像包夹，Clyde 离得远就直追、靠近了反而回散射点；再加上 scatter/chase 周期切换和能量豆惊吓态：

function ghostTarget(g) {
  if (g.mode === 'scatter') return g.scatterTarget;
  if (g.mode === 'eaten') return { x: 9.5, y: 9.5 };
  if (g.mode === 'frightened') return null;
  switch(g.name) {
    case 'blinky': return { x: pac.x, y: pac.y };
    case 'pinky':  return { x: pac.x + pac.dir.x * 4, y: pac.y + pac.dir.y * 4 };
    case 'inky': {
      const bx = ghosts[0].x, by = ghosts[0].y;
      const px = pac.x + pac.dir.x * 2, py = pac.y + pac.dir.y * 2;
      return { x: px + (px - bx), y: py + (py - by) };
    }
    case 'clyde': {
      const dx = g.x - pac.x, dy = g.y - pac.y;
      if (dx*dx + dy*dy > 64) return { x: pac.x, y: pac.y };
      return g.scatterTarget;
    }
  }
  return { x: pac.x, y: pac.y };
}

碰撞判定：能量豆反吃 + 连击计分

吃到能量豆后幽灵进入惊吓态，撞上就反吃，连吃分数翻倍（200/400/800/1600）；没吃能量豆撞上普通幽灵则进入死亡动画：

function checkCollision() {
  for (const g of ghosts) {
    const dx = g.x - pac.x, dy = g.y - pac.y;
    if (dx*dx + dy*dy < 0.45) {
      if (g.mode === 'frightened') {
        g.mode = 'eaten';
        combo = Math.min(combo + 1, 4);
        const pts = [200, 400, 800, 1600][combo - 1] || 200;
        score += pts;
        addPopup('+' + pts, g.x, g.y, '#66ffcc');
      } else if (g.mode !== 'eaten') {
        state = 'dying';
        dyingTimer = 90;
        return;
      }
    }
  }
}

移动与隧道：方向缓冲 + 左右穿越

canMove() 负责墙体碰撞，两侧隧道行（TUNNEL_ROWS）允许穿越到对岸；nextDir 让吃豆人在拐角处提前转向，手感更跟手：

function canMove(entity, dir) {
  if (dir.x === 0 && dir.y === 0) return false;
  const nx = entity.x + dir.x * 0.55;
  const ny = entity.y + dir.y * 0.55;
  const cx = Math.floor(nx);
  const cy = Math.floor(ny);
  if (TUNNEL_ROWS.includes(cy) && (cx < 0 || cx >= COLS)) return true;
  return !isWall(cx, cy);
}

---

7. 真实运行效果

双击打开 index.html，进入经典的黑色迷宫开场：PAC-MAN 大标题、操作说明、右下角「开始游戏」按钮。点击开始后，吃豆人张嘴闭合沿通道移动，方向键和 WASD 都能操控，拐角提前转向有缓冲不会卡手。四只幽灵从中央牢房依次放出：红色 Blinky 直奔你而来，粉色 Pinky 总在你前方堵路，青色 Inky 喜欢绕后包夹，橙色 Clyde 时近时远。吃掉四角能量豆后幽灵变蓝，追逃瞬间反转——撞上去反吃，屏幕飘出 +200/+400/+800/+1600 的彩色得分，连击翻倍很有成就感。吃完全部豆子进入下一关，速度逐级提升，幽灵更聪明；被抓住则播放死亡动画，结算界面显示本局得分和最高分（存在 localStorage），点「重新开始」立即重开。整局动画流畅，飘字、进度条、过场一应俱全。

8. 能力总结

• 单文件交付：849 行 HTML/CSS/JS 全部在一个 index.html 里，双击即玩、零依赖
• 经典还原：19×21 迷宫、隧道穿越、四幽灵差异化 AI、scatter/chase 周期、能量豆反吃连击
• 手感扎实：方向缓冲、嘴部开合、死亡/过场动画、飘字得分、倒计时进度条、最高分记录
• 交互多样：方向键 + WASD 双操控，P 键暂停，游戏结束一键重玩

9. 总结

从一句自然语言到能上手的《吃豆人》，码道把需求理解、迷宫数据结构、幽灵 AI、碰撞判定、动画特效整条链路一次打通，还自己处理了转向缓冲、幽灵依次释放这类手感细节。想亲手试试的话，把上面的需求复制进码道 TUI，你也能收获一个迷宫幽灵大逃杀般的经典街机游戏。
可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz