WorkBuddy 怎么做网页小游戏：深海钓鱼游戏 43 次对话、301 积分从一句话做到发布（附手机横屏踩坑）

导读：上一篇 WorkBuddy 讲了它是什么、积分怎么领。这篇只讲一件事：用它做网页小游戏。我在 10-29 到 11-02 之间用它做了两个游戏，一个深海钓鱼、一个森林砍怪，WorkBuddy 本地的会话记录和积分表都还在。我把每一次对话花了多少积分、调了多少次工具都拉了出来，整理成这篇：第一版要多少积分、钱花在哪种需求上、怎么说话最省，以及一个所有网页游戏都会碰到的坑：发布后在手机上横不过来。

---

一、先说清楚：用 WorkBuddy 做小游戏是怎么回事

WorkBuddy 是腾讯出的桌面 AI 助手，能在你电脑上读写文件、跑命令。做小游戏时，你用中文描述想要什么，它写出一个单文件 HTML （游戏逻辑、画面、音效都在这一个文件里，用浏览器 Canvas 画），自己打开测一遍，再用自带的分享功能发布成一个 workbuddy.link/p/<作品 ID> 链接，别人点开就能玩，不用登录。

整个过程不用你会写 JavaScript。但你得会描述"哪里不对"：它做出来的第一版一般能玩，后面每一处手感、画面、规则，都要靠你一句句说。

不管它会怎样？不做游戏就跟你无关。值得试的场景：参加活动交作品、给孩子做个小游戏、给产品想法做个能点的原型。

---

二、两个游戏的账本

数据来自 WorkBuddy 本机的会话记录和 session_usage 积分表（客户端版本 5.9.3）。"一次对话"指我发出的一条消息和它为这条消息干完的全部活。

	深海路亚 · 钓鱼达人	暗林 · 刀之进化
玩法	抛路亚假饵，钓深海大鱼，张力条搏鱼	森林里砍怪升级，小刀进化到黑暗之刃，打 Boss
时间	10-29 17:45 ～ 10-30 22:32	10-31 22:00 ～ 11-02 16:32
对话次数	43 次	16 次
积分	301.46	107.59
它调用工具的次数	1700 多次	219 次
第一版花费	12.42 积分	5.14 积分
最终文件	一个 HTML，4139 行，约 177KB	一个 HTML，2145 行，约 81KB
是否发布	发布成 workbuddy.link 链接，投了 1024 活动	只在本地玩

深海路亚那个会话一开头还做了个"学剪辑"的网页，那两次对话（13.27 积分）没算进表里。

按上一篇查到的规则，每天签到领 100 积分，所以深海路亚这种"磨了一天半"的游戏，大约是三天的签到量；刀之进化一天多一点。

---

三、积分花在哪

把深海路亚的 43 次对话按需求类型分一下：

需求类型	对话次数	积分	例子
玩法与手感	22	121.52	"小鱼太密了，没有机会落入深海钓大鱼"、"收线的时候，鱼和线没有同步"、"加上个人排行榜"
加鱼种和画面	8	82.05	"各个鱼种的形象有点差"、"加一种黄金螃蟹，重200kg"
投稿和截图	8	72.41	"你帮我投下稿吧"、"游戏截图可以多一点"
手机横屏适配	5	25.48	"手机端不兼容，做下适配手机端可以横屏"

最贵的几次：

那一次说的话	积分	工具调用
你帮我投下稿吧	31.44	192 次
各个鱼种的形象有点差	20.72	108 次
再加一种鱼	16.53	57 次
还可以再加一些深海体型比较大的生物种类	14.61	47 次

能看出两点：

1. 画面类需求最贵。 改玩法时它改几行逻辑就行；"形象有点差"这种话没有标准答案，它要反复画、截图看、再改，一次就是十几、二十积分。"各个鱼种的形象有点差"这句我前后发了 3 次。

2. 让它操作网页最贵，还不一定成功。 "帮我投稿"那一次它调了 192 次工具，花了 31 积分，最后回复说没能点完最后一步：投稿表单在跨域 iframe 里读不到输入框，只能靠坐标点，页面还会周期性整页重载，填好的字段被清空。最后是我自己复制粘贴提交的。

---

四、怎么提需求最省

下面几条都是从这两个游戏的记录里看出来的。

4.1 第一版一句话就够

深海路亚的第一句话：

做一个捕鱼达人的游戏吧，可以发射路亚假饵，池子里面很多深海的大鱼

刀之进化的第一句是这样的：

我想编一个森林探险，就是刀本来是一把小刀然后慢慢慢慢怪物慢慢变强，刀也慢慢变强，最终会变成一个......

第二句是口述转文字，语句都不太通顺，它照样做出了 6 阶刀的进化线、4 种怪、一个最终 Boss，还配了 WASD 移动、鼠标挥刀、空格翻滚，只花了 5.14 积分。第一版不用写需求文档，先让它出一个能玩的，再一条条改，比一开始写一大段要求更省。

4.2 说现象，别说方案

我提的修改基本都是"现象"：

小鱼太密了，没有机会落入深海钓大鱼
收线的时候，鱼和线没有同步
并且线太容易断了

这类话每次 1～6 积分，改完基本就对了。它看得到代码，原因由它去找。

4.3 让它先评测一遍，再挑着改

做到中途我让它自己找问题：

你评测下，这个深海钓鱼游戏还有哪些可以优化的地方

这一次只花了 3.21 积分。它回了一份 P0 / P1 / P2 分级清单，P0 里有两个我自己玩没注意到的 bug：钓上来的鱼没有改状态，一直留在屏幕上不动；补鱼的判断条件永远不成立，鱼池不会补充。它说是在 Node 里模拟跑了 9000 帧发现的，打到后半程，11 条鱼里有 7 条是不动的"僵尸鱼"。

然后一句话合并处理：

P0 全修 + 距离条 + 结算清单，一轮做完重新发布

这次 6.71 积分，修了 3 个 P0、加了两个体验功能、重新发布。比一条条单独提省，也少了来回确认。

4.4 画面问题直接截图

显示错位、边缘被裁这种问题，截图贴进去（输入框里 @image）比文字描述快。"边缘显示有问题"配一张截图，2.88 积分就解决了。

4.5 模型不用太纠结

WorkBuddy 默认的"快速"档会自动在 GLM-5.3-Flash 和 DeepSeek-V4.1-Flash 之间切换，会话记录里两个模型都出现过；后来我也手动指定过这两个模型。按每次对话平均下来，都在 5～7.5 积分之间。但两个游戏的需求完全不同，这不算对照实验，看不出哪个更省。

---

五、手机上横不过来：分享页是跨域 iframe

这是做网页游戏最容易卡住的地方，深海路亚在这上面来回了 5 次。

5.1 现象

游戏是横屏设计的。电脑上玩没问题，安卓手机打开分享链接，点"全屏横屏开玩"的按钮没反应，画面还是竖的。

5.2 原因

WorkBuddy 后来查出来的原因，我又在 Chrome 里打开分享页核实了一遍：www.workbuddy.link 这个页面只是个外壳，游戏放在一个 iframe 里，地址是另一个域名 workbuddy-space-static.codebuddy.work。这个 iframe 只设了 sandbox，没有 allow="fullscreen"，也没有 allowfullscreen 属性。

这样两个浏览器规则叠在一起，就转不过来了：

规则	结果
跨域 iframe 没被授予全屏权限，requestFullscreen() 会被拒绝	进不了全屏
安卓上 screen.orientation.lock('landscape') 要求页面先处于全屏	锁不了横屏

微信、QQ 这类 App 内置浏览器也经常不给这两个权限。只要还靠浏览器的全屏和方向锁 API，这条路在很多环境里都走不通。

⚠️ WorkBuddy 中途给过一个"直接打开游戏文件的静态地址"，手机上打开返回 Security Restriction 拦截页。它的解释是平台只允许分享页把游戏放进 iframe 加载。分享出去一律用 workbuddy.link/p/<作品 ID> 这个分享地址。

5.3 解决：自己用 CSS 把画面转 90°

最后的办法是不申请任何权限：检测到竖屏，就把整块游戏画面用 CSS transform: rotate(90deg) 转过来，玩家把手机横着拿，看到的就是正的横屏画面。

难点在触摸坐标。画面转了 90°，手指点在屏幕上的坐标要"反向转回去"，才能对上游戏里的位置。下面是我按这个思路写的最小示例，单文件，复制保存成 .html 就能打开：

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>CSS 假横屏示例</title>
<style>
  html, body { margin: 0; height: 100%; overflow: hidden; background: #0b2540; }
  #stage { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; }
  canvas { display: block; }
</style>
</head>
<body>
<div id="stage"><canvas id="c"></canvas></div>
<script>
const W = 640, H = 360;                 // 游戏世界固定横屏尺寸
const stage = document.getElementById('stage');
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let rot = 0, k = 1;                     // rot：CSS 旋转角 0 / 90；k：世界坐标到 CSS 像素的缩放
const dots = [];

function layout() {
  const vw = window.innerWidth, vh = window.innerHeight;
  rot = vh > vw ? 90 : 0;               // 竖屏就把整块画面转 90°
  const cw = rot ? vh : vw, ch = rot ? vw : vh;   // 转了之后，可用宽高互换
  k = Math.min(cw / W, ch / H);
  canvas.width = W; canvas.height = H;
  canvas.style.width = W * k + 'px'; canvas.style.height = H * k + 'px';
  stage.style.width = W * k + 'px'; stage.style.height = H * k + 'px';
  stage.style.left = '50%'; stage.style.top = '50%';
  stage.style.transform = `translate(-50%, -50%) rotate(${rot}deg)`;
  draw();
}

// 屏幕坐标 → 世界坐标：旋转后 getBoundingClientRect 只给外接矩形，要绕中心反向转回来
function toWorld(cx, cy) {
  const dx = cx - window.innerWidth / 2, dy = cy - window.innerHeight / 2;
  const lx = rot === 90 ? dy : dx;
  const ly = rot === 90 ? -dx : dy;
  return { x: W / 2 + lx / k, y: H / 2 + ly / k };
}

function draw() {
  ctx.fillStyle = '#1d5a8a'; ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = '#fff'; ctx.font = '20px sans-serif';
  ctx.fillText('左上角', 10, 28); ctx.fillText('右下角', W - 74, H - 12);
  ctx.fillStyle = '#ffd34d';
  for (const p of dots) { ctx.beginPath(); ctx.arc(p.x, p.y, 8, 0, Math.PI * 2); ctx.fill(); }
}

// 点哪里就在哪里画一个黄点，用来检查坐标换算对不对
window.addEventListener('pointerdown', e => { dots.push(toWorld(e.clientX, e.clientY)); draw(); });
window.addEventListener('resize', layout);
layout();
</script>
</body>
</html>

我在浏览器里用 375×812 的手机竖屏尺寸测了这段：画面转成横的，"左上角"三个字出现在屏幕右上方；在屏幕 (300, 200) 处点一下，换算出的游戏坐标是 (122.2, 72.0)，和手算一致，黄点就落在手指的位置。

深海路亚里的实际实现比这个多几处：

• 玩家真把手机转成横屏、系统也跟着转了，就撤掉 CSS 旋转，改回原生横屏
• 右下角加一个"↻ 换个方向"按钮，在 90° 和 -90° 之间切换，照顾充电口朝左还是朝右的握法
• 先照常试一次全屏加方向锁，能成功就用真横屏，失败了也不影响，因为画面已经转好

刀之进化是另开的任务，第一次它只做了"竖屏时显示请横屏的提示遮罩"，我回了一句"横屏未成功"，它第二次改成了"先试全屏加方向锁、锁不了就 CSS 旋转"的两层方案。

---

六、速查表

想做的事	怎么说 / 怎么做	这次的花费
出第一版	一句话说清玩法和背景	5～12 积分
修手感	描述现象："小鱼太密了"、"线太容易断了"	1～5 积分 / 次
找问题	"你评测下还有哪些可以优化的地方"	3.21 积分
批量修	"P0 全修 + 某功能，一轮做完重新发布"	6.71 积分
改画面	尽量配参考图或截图，说具体哪里不好	15～20 积分 / 次
发布	让它用分享功能发布，拿 workbuddy.link 链接	---
手机横屏	CSS 旋转 90° + 触摸坐标反算，别只靠全屏 API	5 次共 25.48 积分
填网页表单	自己来，别让它操作浏览器	一次 31.44 积分，没成功

---

七、常见问题

Q：做出来的游戏能放到自己的服务器上吗？

能。它就是一个普通的 HTML 文件，在 WorkBuddy 的工作空间目录里，拷出来放到任何静态服务器上都能打开。放在自己的服务器上就没有 iframe 的限制，可以直接用全屏 API。

Q：改了几十轮，会不会越改越乱？

这次深海路亚从第一版的约 30KB 长到 177KB，中途它自己做过冒烟测试（它的回复里写的是 16 项，在 1280×720 和 844×390 两种尺寸下跑），后面加功能没出现大面积回退。但会话越长，每次对话要带的上下文越多。我的建议是一个游戏做到能发布就收，大改版另开一个任务，把 HTML 文件拖进去让它接着改。

Q：不会编程真能做出来吗？

这两个游戏的所有需求都是用大白话提的，没有写一行代码。但"能玩"和"好玩"之间，要靠你一遍遍试玩、说出哪里不对，这部分花的时间比积分多。

---

参考链接

• 上一篇：WorkBuddy 使用技巧：Claude Code 国内平替，签到免费用、自动签到和手机远程控制电脑：juejin.cn/post/770203...
• MDN：Element.requestFullscreen()：developer.mozilla.org/en-US/docs/...
• MDN：ScreenOrientation.lock()：developer.mozilla.org/en-US/docs/...
• MDN：Permissions-Policy fullscreen：developer.mozilla.org/en-US/docs/...

---

你用 WorkBuddy 或别的 AI 工具做过小游戏吗？做的是什么游戏、第一版花了多少积分？评论区说说，手机横屏也碰到过问题的，说说你用的是哪个浏览器。

觉得有用的话点个赞、收个藏，做小游戏时翻得到。