AIGC标识 保龄球挑战：瞄准一掷全倒，解压手感停不下来

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

这个游戏玩什么

经典保龄球玩法，全部塞进一个 Canvas 页面：

  • Canvas 绘制深色木质球道，10 个彩色球瓶按三角形排列在远端。
  • 鼠标在球道上拖拽瞄准，松手发射，球按物理模拟滚动。
  • 球撞击球瓶逐个击倒，球瓶之间还有碰撞连锁反应。
  • 十轮计分，全倒显示 STRIKE、补中显示 SPARE，最后一轮三球规则。
  • 游戏结束显示总分和段位，一键重新开始。

最有手感的一点是「拖拽瞄准、松手发射」：拖得越远力度越大；横着拖过头球直接滚进两侧沟槽。这个失误机制反而让每次出手都有期待感，全倒时的大字动画相当解压。

码道 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://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

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

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

码道能做什么

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

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

这次的保龄球就是一次典型单文件前端生成：把玩法、物理、计分规则说清楚，码道自动拆解出画布绘制、球道布局、球瓶碰撞、计分动画等子任务并逐个完成。

任务描述

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

制作一个保龄球网页小游戏，用 HTML/CSS/JavaScript 写成一个单文件 index.html：Canvas 绘制深色木质球道和 10 个彩色保龄球瓶，鼠标拖拽瞄准、松手发射球，球以物理模拟滚动撞击球瓶并逐个击倒，按保龄球十轮规则计分，全倒显示 STRIKE 动画，每轮两次机会，最后一轮三球规则，游戏结束显示总分和重新开始按钮，界面美观带动画效果。文件保存到 C:/opc-agent/self-media-agent/workspaces/example/articles/codearts-bowling-game/project/index.html

开发过程

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

需求输入

等待期间，TUI 会显示任务执行进度，能看到它把「画布布局 / 球道绘制 / 物理碰撞 / 计分逻辑 / 结束结算」逐个拆解执行：

生成过程中

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

生成完成

打开生成的 index.html，就是可以实际投球的小游戏。拖拽瞄准、松手发射，球滚向球瓶并逐个击倒，计分板和 STRIKE/SPARE 大字动画都正常出现：

运行效果

关键代码解读

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

1. 拖拽发射

监听 mousedown / mousemove / mouseup 三个事件，记录瞄准起点和最后位置，松手时换算成球的初速度：

canvas.addEventListener('mouseup', (e) => {
  if (!state.aiming) return;
  state.aiming = false;
  launchBall();
});

launchBall() 里按拖拽距离换算力度：power = Math.min(dist, 260) / 260，speed = 6 + power * 14，拖得越远球速越快。

2. 物理滚动与击倒

每帧更新球的位置，乘 FRICTION_BALL 模拟摩擦减速；撞上球瓶时沿法线交换速度，撞击力度超过阈值就把球瓶标记为倒下：

const force = Math.hypot(p.vx, p.vy);
if (force > 1.5) {
  p.knocked = true;
}

击倒后球瓶还有倒下动画和瓶与瓶之间的二次碰撞，连锁效果比较接近真实保龄球。

3. 十轮计分

每球结束后按本轮击倒数判断全倒或补中，分别显示 STRIKE! 和 SPARE! 大字；最后一轮按三球规则处理，全部结束后 endGame() 显示总分和段位。

运行效果

实际运行验证：拖拽、松手、球沿球道滚动、撞瓶、计分更新都正常，全倒和出沟两种路径都出现过。界面是深色木质风格，计分板清晰，大字动画到位。

不足也说一句：球道物理是简化的弹性碰撞，追求真实弧线球的玩家会觉得差口气；手感需要自己适应拖拽力度，不是每次都能全倒，但这也正是它耐玩的地方。

能力总结

这一轮验证下来，码道对「前端单文件小游戏」这类需求完成度很高：文本需求直接出可运行产品，而且是带完整计分规则和动画的成品，不是空骨架。当快速原型工具来用体验挺顺。

直接下载试玩

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

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

总结

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

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