台球挑战：拖拽瞄准一杆清台，物理碰撞超解压

本案例用华为云 CodeArts 码道 TUI 作为开发入口：在终端里用自然语言描述需求，码道直接生成一个单文件 index.html 台球小游戏，浏览器打开就能玩。源码和截图全部开源，链接在文末「直接下载试玩」。

这个游戏玩什么

经典美式 8 球玩法，全部塞进一个 Canvas 页面：

Canvas 绘制绿色台球桌、6 个球袋和 15 颗彩色台球，桌台木纹与灯光氛围到位。
鼠标在白球附近拖拽瞄准，松手击球，球按物理模拟滚动、反弹、碰撞。
彩球进袋有火花特效和得分动画，球与球之间还有连锁碰撞。
经典 8 球规则：进袋分组、白球落袋判罚、提前击落 8 号球直接判负。
双方轮流击打，清空己方彩球并合法打进 8 号球即获胜，一键重新开局。

最有手感的一点是「拖拽瞄准、松手击球」：拖得越远力度越大，方向由鼠标到白球的连线决定，拉满再松手一杆打出去，球进袋瞬间的特效相当解压。

码道 TUI 安装

开始之前，先在终端安装并登录码道 TUI。如果还没用过码道，可以免费开通体验版：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

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://developer.huaweicloud.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

如果正常回显码道 CLI 的版本号，代表安装成功。登录后按提示配置访问凭据：

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

码道能做什么

码道是华为云 CodeArts 的 AI 编程助手，运行在终端 TUI 里，用自然语言就能开发：

描述需求，直接生成项目文件，不用先搭框架。
生成过程中会边执行边汇报，完成时给出文件路径和构建信息。
支持继续对话修改已生成的代码，比如调规则、加特效。

这次的台球就是一次典型单文件前端生成：把玩法、物理、规则说清楚，码道自动拆解出球桌绘制、击球瞄准、碰撞物理、进袋判定、八球计分等子任务并逐个完成。

任务描述

向码道 TUI 输入的需求原文如下（与截图一致，可直接复制复现）：

制作一个台球网页小游戏，用 HTML/CSS/JavaScript 写成一个单文件 index.html：Canvas 绘制绿色台球桌、6 个球袋和 15 颗彩色台球，鼠标拖拽瞄准、松手击球，球以物理模拟滚动、碰撞并进袋，经典美式 8 球规则计分，白球落袋判罚，进袋显示碰撞特效和得分动画，游戏结束显示胜负和重新开局按钮，界面美观带动画效果。文件保存到 C:/opc-agent/self-media-agent/workspaces/example/articles/codearts-billiards/project/index.html

开发过程

打开 codearts 进入 TUI，把上面的需求原文粘贴进输入框，回车提交。码道先回显需求、执行任务拆解，然后开始生成代码：

等待期间，TUI 显示执行进度，能看到它把「桌台画布 / 球体摆放 / 瞄准击球 / 物理碰撞 / 进袋判定 / 八球计分」逐个拆解执行：

完成后，TUI 输出构建总结：文件完整写盘，单文件约 19KB、518 行，说明生成结束：

打开生成的 index.html，就是可以实际对打的台球游戏。绿色球桌、彩色台球、拖拽瞄准、松手击球、进袋特效都正常出现：

关键代码解读

源码是单文件 index.html，逻辑都在 <script> 里。看几个关键部分。

1. 拖拽瞄准

监听 mousedown / mousemove / mouseup：必须在白球附近按下才进入瞄准，拖拽距离换算成力度，松手时按「鼠标到白球的反方向」出杆：

cv.addEventListener('mouseup',e=>{
  if(!aiming) return;
  aiming=false;
  document.getElementById('pw').style.width='0%';
  if(pull<8){ pull=0; return; }
  // 击球方向：从鼠标指向白球（拉弓反向）
});

pull 由拖拽距离算出，Math.min(MAXPULL, ...) 封顶，松手后把白球初速度设置为瞄准方向乘力度，球就出去了。

2. 物理滚动与碰撞

每帧 step() 更新位置并乘摩擦系数 FRIC 减速；球与球碰撞时沿法线交换速度，撞得够响还会弹出一小簇火花粒子：

if(d<min && d>0.0001){
  const ov=(min-d)/2;
  const nx=dx/d, ny=dy/d;
  a.x-=nx*ov; a.y-=ny*ov;
  c.x+=nx*ov; c.y+=ny*ov;
  const dvx=c.vx-a.vx, dvy=c.vy-a.vy;
  const vn=dvx*nx+dvy*ny;
  if(vn<0){
    a.vx+=vn*nx; a.vy+=vn*ny;
    c.vx-=vn*nx; c.vy-=vn*ny;
  }
}

边界反弹、球袋喉区吸球、球间连锁碰撞都在 step() 里依次处理，整体手感接近真实台球。

3. 进袋判定与八球规则

球心离袋口足够近就标记 pocketing，进袋动画播完设为 alive=false；白球进袋记犯规。回合结算 resolveShot 统计彩球/花色球进袋数，8 号球提前进袋直接判负：

if(potted8){
  // 己方球清空且未犯规 => 胜；否则负
  if(lefts[me]===0 && !foul){ win=true; msg='合法 8 号球进袋，清台获胜！'; }
  else { lose=true; msg='提前击落 8 号球，判负！'; }
}

运行效果

实际运行验证：拖拽、松手、白球出手、彩球碰撞、进袋特效、积分面板切换都正常，合法打进 8 号球会正确宣告胜利。界面是深色氛围搭配金色标题，球桌木框和绿呢质感在线。

不足也说一句：击球是简化的 2D 物理，没有旋转球和弹性，追求真实台球模拟的玩家会觉得差口气；不过换成「瞄准-力度」的爽感路线，一杆进多球时依然很过瘾。

能力总结

这一轮验证下来，码道对「前端单文件小游戏」这类需求完成度很高：文本需求直接出可运行产品，连八球完整规则、判负逻辑、火花特效都做齐了，不是空骨架。当快速原型工具来用体验挺顺。

直接下载试玩

这个 Demo 已经完整开源（源代码、本文档、全部截图），托管在公开仓库，可直接下载来玩：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-billiards

打开上面的链接，进入 codearts-billiards 文件夹，把 index.html 下载到本地，用浏览器打开即可运行，无需安装任何依赖。

总结

一次需求生成一个能玩的八球台球游戏，从球桌绘制、物理碰撞到规则判负，全部由码道 TUI 完成，我只需要把玩法、规则、界面说清楚。想体验这种从自然语言直接到产品的流程，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

posted @ 2026-08-20 13:39 新科技观察员阅读(23) 评论(0) 收藏举报

刷新页面返回顶部