用码道 AI 编程助手开发抽签转盘网页应用

分类: ai-development

标签: CodeArts, AI编程, LuckyWheel, 网页应用, Canvas

难度: 初级

读者: 前端开发者、编程学习者、技术写作者

1. 开篇钩子

我在码道 TUI 里输入了一段需求：「做一个抽签转盘（Lucky Wheel）网页应用，单个 HTML 文件即可运行……」约 3 分 17 秒后，一个 469 行、约 13 KB 的完整抽签转盘应用就自动生成了：默认 8 个等分扇区，红橙黄绿青蓝紫粉 8 色区分；选项文字可以直接在右侧编辑区修改、添加、删除（支持 2~16 个选项）；点击「开始抽奖」，转盘先快后慢地旋转约 4.5 秒，停在随机扇区后高亮中奖扇区并弹出「恭喜中奖」提示；每项被抽中次数实时累加并保存在 localStorage，刷新页面也不丢，还能一键重置统计。双击 HTML 就能开抽。

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 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:$PATHexport CODEARTS_CLI_AK=你的AKexport CODEARTS_CLI_SK=你的SK# 3. 启动 TUIcodearts

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

安装完成后，在命令行或 PowerShell 中输入 codearts 回车，即可打开码道 TUI。把开发需求贴进输入框，码道会自动分析并生成完整代码。

3. 码道能力一览

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

1. 自然语言编程：我说「抽签转盘网页应用」，码道直接理解成扇区绘制 + 缓动旋转动画 + 中奖判定 + 统计持久化一整套方案
2. 自主技术选型：转盘用 Canvas 逐帧重绘，旋转用 easeOutQuart 缓动（先快后慢），随机目标扇区 + 5 圈整圈旋转保证「看起来公平」
3. 工程细节到位：选项数量限制 2~16 个、扇区文字自动缩放适配、中奖高亮与弹窗、选项和统计双 localStorage 持久化、移动端触屏优化
4. 自检与收尾：生成后自行验证文件落盘，并逐条汇报功能清单

4. 任务描述

我想要一个抽签转盘（Lucky Wheel）网页应用，具体要求：

1. 单个 HTML 文件即可运行，不需要任何构建步骤
2. 圆形转盘默认 8 个等分扇区，扇区可编辑（添加/删除/修改选项文字），支持中奖概率均匀
3. 点击开始按钮后转盘旋转，带缓动减速动画（先快后慢、最后停在随机扇区）
4. 停止后高亮中奖扇区并弹出结果提示
5. 统计每项被抽中次数并用 localStorage 持久化，可一键重置统计
6. 界面鲜艳明快，配色区分扇区，支持移动端触屏操作

5. 开发过程及真实截图

我在码道 TUI 中贴入需求后，码道开始拆解需求并生成代码：

生成过程中，码道边设计转盘绘制与缓动动画逻辑边写代码，代码逐行可见：

约 3 分 17 秒后，码道汇报完成，输出功能清单，并提示文件位置：

双击生成的 lucky-wheel.html 在浏览器中直接运行，点击「开始抽奖」后转盘旋转停在中奖扇区，弹出「恭喜中奖」弹窗，右侧统计同步更新：

6. 代码解析

码道生成的代码是一个自包含的单页应用，核心逻辑非常清晰：

转盘绘制：每次状态变化都调用 drawWheel() 按当前角度重绘所有扇区，扇区文字根据数量自动缩放，高亮扇区用 lighten() 提亮底色：

function drawWheel() {const anglePer = 2 * Math.PI / n;for (let i = 0; i < n; i++) {const start = -Math.PI / 2 + i * anglePer + currentAngle;const end = start + anglePer;// 扇形填充、描边，文字随扇区角度旋转}}

旋转动画：随机选中目标扇区后，先加 5 圈整圈旋转，再用 easeOutQuart 缓动（1 - (1-t)^4）在 4.5 秒内完成减速，保证每次都能「转得够久又停在指定扇区」：

const targetIndex = Math.floor(Math.random() * n);const totalDelta = extraRotations + delta;const eased = 1 - Math.pow(1 - t, 4);currentAngle = startAngle + totalDelta * eased;

中奖判定与统计：动画结束后高亮目标扇区、弹出结果弹窗，并把中奖项计数写入 localStorage：

highlightIndex = targetIndex;drawWheel();resultEl.textContent = winText;modal.classList.add('show');stats[winText] = (stats[winText] || 0) + 1;saveStats();renderStats();

选项编辑与持久化：右侧选项区实时绑定输入框，增删改都同步到 luckyWheelOptions，统计存 luckyWheelStats，刷新页面自动恢复：

document.getElementById('add').addEventListener('click', () => {if (options.length >= 16) { showToast('最多支持 16 个选项'); return; }options.push(`选项${options.length + 1}`);saveOptions();renderOptions();drawWheel();});

从这些代码可以看出，码道不只把功能拼出来，缓动曲线、扇区文字缩放、数量边界、双键持久化这些影响体验的细节也都处理得比较到位。

7. 真实运行效果

双击 lucky-wheel.html 即可开始使用：页面左侧是彩色转盘，顶部有指针，下方是红色「开始抽奖」按钮；右侧是「选项编辑」区（每个选项带色点和输入框，可增删）和「中奖统计」区。点击「开始抽奖」，转盘先快后慢旋转约 4.5 秒，停在随机扇区后该扇区高亮，弹出「恭喜中奖」弹窗并显示中奖项；关闭弹窗后，右侧统计区显示每项被抽中次数。选项内容和抽中次数都保存在 localStorage，刷新页面不丢；「重置统计」一键清空。紫色渐变背景配合 8 色扇区，界面鲜艳明快，手机窄屏自动转为上下布局。

8. 能力总结

1. 一次生成完整可用：从需求到可双击运行的单文件应用，全程约 3 分 20 秒，无需手工补代码
2. 技术含量扎实：Canvas 扇区绘制、easeOutQuart 缓动动画、随机公平抽取、localStorage 双持久化，方案完整
3. 交互细节到位：选项在线编辑、中奖高亮弹窗、统计实时刷新、数量边界提示，体验闭环完整
4. 工程习惯良好：绘制/动画/持久化函数拆分清晰、常量集中管理、移动端响应式适配，代码结构清晰可读

9. 总结

用码道开发抽签转盘这类网页应用，最大的感受是「需求即产品」：把功能要点说清楚，码道就能给出包含完整技术方案与视觉风格的成品。对想快速做一个抽奖小工具、或者刚学前端想看看「Canvas 动画应用是怎么写的」的同学，让码道先生成一份，再对照源码逐行读，是很好的学习路径。下一轮，我打算让码道继续挑战不同类型的网页应用，继续记录真实的开发过程。