从零教你做水果忍者：滑一刀满屏果汁，谁玩谁上瘾
从零教你做水果忍者：滑一刀满屏果汁，谁玩谁上瘾
一句话需求丢给码道，自动生成 637 行的单文件水果忍者——鼠标划过去，水果裂成两半、彩色果汁粒子四溅，刀光带白色拖尾；连击翻倍、切到炸弹直接结算、漏 3 个水果结束，最高分存进 localStorage。双击
index.html就能开玩，全程零依赖。
分类: ai-development
标签: CodeArts, AI编程, 水果忍者, 网页游戏, Canvas, JavaScript
难度: 初级
读者: 前端开发者、编程学习者、技术写作者
1. 开篇钩子
水果忍者这个玩法，几乎人人都玩过：手指或者鼠标在屏幕上划过去，水果应声裂开，汁水飞溅。放到网页里其实也不复杂，但从零手写一套，状态机、碰撞检测、粒子特效、难度曲线，一件件抠下来大半天是要的。这次我把需求直接丢给码道 TUI：「做一个完整的水果忍者网页小游戏，鼠标滑动切水果、水果裂成两半溅出果汁、刀光拖尾、切到炸弹结束、漏 3 个结束、得分连击、最高分存 localStorage、开始/游戏/结束三个界面、emoji 画水果……」排队等了一会儿，码道自动生成了一个 637 行的单文件 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. 码道能力一览
这次开发中，码道展示了以下能力：
- 自然语言编程：一句「水果忍者网页小游戏」被拆成完整方案——三界面状态机、Canvas 渲染、抛物线投掷、线段-圆碰撞、粒子与拖尾特效
- 物理建模：水果从屏幕底部抛出，用初速度反推抛物线，命中目标高度后自然回落，落点偏向屏幕中间
- 交互细节：切割检测用「上一帧到当前帧的移动线段」扫过水果圆心，鼠标划得快也不会穿透水果；连击 800ms 内续上才累计，得分随连击数递增
- 自检与收尾：生成后自己发现水果配置里两个颜色值写错（
#fdcb6m、#fdcb6l不是合法十六进制色），主动定位并修复，再汇报实现清单
4. 任务描述
我给码道的需求原文：
用 HTML/CSS/JavaScript 制作一个完整的水果忍者切水果网页小游戏，单文件 index.html，双击即可在浏览器运行。鼠标滑动切水果，水果从屏幕底部抛出，切开裂成两半并溅出彩色果汁粒子，滑动显示刀光拖尾；切到炸弹游戏结束，漏掉 3 个水果游戏结束；实时显示得分与连击，最高分用 localStorage 保存；有开始/游戏/结束三个界面；背景彩色渐变，水果用 emoji 绘制，界面美观。
5. 开发过程及真实截图
把需求贴进码道 TUI 输入框，回车提交：
码道进入构建模式，先规划数据结构与渲染逻辑，再逐段生成代码：
生成完成后，码道还主动修复了两个非法颜色值，并汇报实现清单：
双击生成的 index.html 在浏览器中打开，深蓝渐变背景上「水果忍者」渐变大标题，点「开始游戏」进入切水果节奏：
6. 代码解析
码道生成的是一个自包含的单文件应用，HTML + CSS + Canvas JS 全部在一个 index.html 里。几个关键实现：
水果配置：每种水果一个对象，emoji、颜色、果汁色三件套，10 种水果加一个炸弹，渲染直接用 ctx.fillText 画 emoji，不需要任何图片资源：
const FRUITS = [
{ emoji: '🍎', color: '#e74c3c', juice: ['#ff6b6b','#e74c3c','#c0392b'] },
{ emoji: '🍉', color: '#2ecc71', juice: ['#ff6b6b','#e74c3c','#2ecc71'] },
{ emoji: '🥝', color: '#27ae60', juice: ['#2ecc71','#27ae60','#16a085'] }
];
const BOMB = { emoji: '💣', color: '#2d3436', juice: ['#636e72','#2d3436','#b2bec3'] };
抛物线投掷：水果从屏幕底部抛出，根据目标高度反推初速度（重力 g=1400 像素/秒²），横向速度指向屏幕中间，方向随机：
const g = 1400;
const vy = -Math.sqrt(2 * g * (y - targetY));
const vx = (W / 2 - x) * rand(0.6, 1.4) / (Math.abs(vy) / g);
切割检测：把鼠标从上一帧到这一帧的移动看成一条线段，算线段到水果圆心的最短距离，小于半径就算切中——鼠标划得再快也不会「穿透」水果：
function segCircleHit(p1, p2, f) {
const dx = p2.x - p1.x, dy = p2.y - p1.y;
const len2 = dx * dx + dy * dy;
let t = ((f.x - p1.x) * dx + (f.y - p1.y) * dy) / len2;
t = clamp(t, 0, 1);
const cx = p1.x + t * dx, cy = p1.y + t * dy;
return Math.hypot(cx - f.x, cy - f.y) < f.r;
}
切成两半 + 果汁粒子：切中后按飞行方向生成两个半片，沿垂直方向各带 120 像素/秒的分离速度，同时炸出 22 个果汁粒子，颜色取自水果自己的 juice 数组：
halves.push({ x: f.x, y: f.y, vx: f.vx + Math.cos(perp) * 120, vy: f.vy + Math.sin(perp) * 120 - 80, ... });
halves.push({ x: f.x, y: f.y, vx: f.vx - Math.cos(perp) * 120, vy: f.vy - Math.sin(perp) * 120 - 80, ... });
for (let i = 0; i < 22; i++) {
particles.push({ x: f.x, y: f.y, vx: Math.cos(a) * sp + f.vx * 0.2, vy: Math.sin(a) * sp + f.vy * 0.2, ... });
}
难度递增：生成间隔从 1100ms 随游戏时长逐渐缩短到 450ms，还有 30% 概率一次抛出两个水果，越玩越刺激：
spawnInterval = Math.max(450, 1100 - elapsed * 0.05);
const batch = Math.random() < 0.3 ? 2 : 1;
7. 真实运行效果
点「开始游戏」进入对战：水果从屏幕底部抛上来，鼠标划过去就是一刀——水果裂成两半各自飞开，彩色果汁粒子四溅，刀光带白色描边和蓝色外发光拖尾。连击 2 次以上，屏幕中央弹出「N 连击!」放大动画，得分按「10 + (连击数-1)×5」递增，越连越爽。左上角实时跳动得分与最高分，右上角三颗心表示剩余机会。切到炸弹瞬间全屏闪白加 60 个爆炸粒子，直接结算；漏掉 3 个水果也会结束。结束面板显示本次得分与最高分，破纪录会亮起「🏆 新纪录」标签，点「再来一局」立即重开。整局从开始到结算一气呵成，手感跟原生小游戏不相上下。
8. 能力总结
- 单文件交付：637 行 HTML/CSS/JS 全部在一个
index.html里，双击即玩、零依赖 - 物理与碰撞干净：抛物线投掷、线段-圆切割检测、半片分离、粒子系统共用一套
update/render主循环 - 细节品控到位：连击动画、刀光拖尾、爆炸闪屏、难度递增、localStorage 最高分全都有
- 扩展空间清晰：想加道具、多关卡、音效，在
FRUITS、spawn()和状态机上扩展都很方便
9. 总结
从一句自然语言到可以上手切的水果忍者，码道只用了不到 3 分钟，还顺手修掉了两个写错的颜色值。水果忍者这种「玩法经典、反馈爽快」的网页小游戏，正好验证码道从需求理解、物理建模到特效渲染的完整链路。想亲手试试的话，把上面的需求复制进码道 TUI，你也能收获一个属于自己的满屏果汁游戏。
可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
浙公网安备 33010602011771号