排序可视化：8 种算法同台竞速，一眼看懂谁快谁慢

一句话需求丢给码道，自动生成一个网页版排序可视化工具——冒泡、快排、归并、堆排等 8 种算法在彩色柱状图上同台比拼，比较、交换、基准元素全部高亮标注，谁快谁慢一眼看清。双击 index.html 就能玩，零依赖。

分类: ai-development
标签: CodeArts, AI编程, 排序算法, 可视化, 网页游戏
难度: 初级
读者: 算法学习者、前端开发者、技术爱好者

1. 开头钩子

学排序算法最怕「抽象」：教材里的伪代码看了三遍，还是说不清快排到底怎么分区。这次我把需求直接丢给码道 TUI：「做一个网页版排序算法可视化工具」，几分钟后它交出了一个单文件 index.html——8 种排序算法、彩色柱状图、比较/交换/基准高亮、可调速可暂停，双击就能看冒泡和快排现场赛跑。抽象的数据结构瞬间变成看得见的动画，这才是算法该有的打开方式。

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

安装成功后终端会回显码道 CLI 的版本号。在 PowerShell 或终端里输入 codearts 回车，即可打开码道 TUI，把开发需求贴进输入框。

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

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

3. 码道能力一览

需求理解：把「彩色柱状图、比较/交换高亮、可调速」这类口语化描述，翻译成完整的功能清单
多算法实现：自动给出冒泡、选择、插入、快速、归并、堆排、希尔、鸡尾酒排序 8 种实现
动画机制：用 async/await + step() 让每一步比较/交换可暂停、可调速
统计面板：实时显示比较次数、交换次数、耗时，方便对比算法性能
单文件交付：HTML/CSS/JS 全在一个 index.html 里，双击即用、零依赖

4. 任务描述

需求就一段话，丢进码道 TUI 的输入框：

做一个网页版排序算法可视化工具，单文件 index.html（内嵌 CSS 和 JS）。功能：支持冒泡、选择、插入、快速、归并、堆排序等多种算法可选；用彩色柱状图实时展示排序过程，可调整数组大小与动画速度；有开始、暂停、重置按钮；当前比较和交换的元素高亮显示，归并等算法可显示辅助数组；排序完成时有庆祝动画。界面要好看：深色渐变背景、圆角柱子、流畅的动画过渡。

5. 开发过程及真实截图

码道从提交需求到生成完成，直接输出一个可运行的 index.html，并给出能力清单：8 种排序算法、HSL 渐变色柱状图、比较黄色/交换红色/基准紫色/已排序绿色的高亮体系、归并排序辅助数组面板、完成撒花动画。

6. 代码解析（从项目源码提取）

动画核心：每一步都「可暂停」。所有排序算法都用 async/await 写，比较或交换后调用 step()，由统一的 sleep 控制节奏，点击暂停/调整速度都作用在这一个点上：

function step() {
  const r = await sleep(getDelay());
  if (r === 'cancelled') throw new Error('cancelled');
}

高亮体系：比较、交换、基准、已排序分别用不同 class，让观众一眼看清算法在干什么：

function setCompare(...idx) {
  clearHighlights();
  applySortedClass();
  for (const i of idx) if (barEls[i]) barEls[i].classList.add('compare');
}
function setSwap(...idx) {
  clearHighlights();
  applySortedClass();
  for (const i of idx) if (barEls[i]) barEls[i].classList.add('swap');
}
function setPivot(i) {
  if (barEls[i]) barEls[i].classList.add('pivot');
}

归并排序的辅助数组：mergeSort 会额外渲染一排辅助柱，把「暂存、取回」的过程可视化，理解归并不再靠想象：

async function merge(lo, mid, hi) {
  for (let k = lo; k <= hi; k++) {
    auxArr[k] = arr[k];
    updateAuxBar(k);
  }
  let i = lo, j = mid + 1, k = lo;
  while (i <= mid && j <= hi) {
    comparisons++;
    if (auxBarEls[i]) auxBarEls[i].classList.add('aux-src');
    if (auxBarEls[j]) auxBarEls[j].classList.add('aux-src');
    if (barEls[k]) barEls[k].classList.add('aux-dst');
    bumpStats();
    await step();
    if (auxArr[i] <= auxArr[j]) {
      arr[k] = auxArr[i]; i++;
    } else {
      arr[k] = auxArr[j]; j++;
    }
    k++;
  }
}

7. 真实运行效果

双击 index.html 打开：顶部下拉可切换 8 种排序算法，右侧调节数组大小和动画速度。点「开始」，彩色柱子立刻动起来——黄色光标扫过一对对元素表示「正在比较」，红色表示「发生交换」，紫色标记快排的基准，绿色逐渐铺满表示「已就位」；侧边面板实时跳动比较次数、交换次数和耗时。跑完一轮换快排再跑一轮，谁快谁慢、谁省操作，一目了然。归并排序时底部还会多出一排辅助柱，演示「暂存 → 取回」的完整过程。

8. 能力总结

亮点	说明
算法全家桶	冒泡、选择、插入、快速、归并、堆排、希尔、鸡尾酒排序 8 种一次给全
动画驱动	`async/await + step()` 统一控制节奏，支持暂停、调速、重置
高亮体系	比较黄 / 交换红 / 基准紫 / 已排序绿，行为一目了然
辅助数组	归并排序独立面板展示暂存取回，教学效果拉满
性能对比	实时统计比较次数、交换次数与耗时，直观感受复杂度差异
零依赖交付	单文件 `index.html`，双击即用

9. 总结

这次用码道 TUI 做排序可视化，最直观的感受是「把抽象讲清楚」比「把功能做出来」更难，而码道把两者都搞定了：8 种算法实现得干净利落，动画和高亮设计得像教学课件一样清晰。如果你也想试试这种"一句话出一个能玩的算法演示"，装好码道 TUI 后，把想法描述清楚丢进去就行。可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

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

刷新页面返回顶部