113 lines (86 loc) · 2.89 KB

算法可视化编辑器使用指南

🎯 功能概览

可视化数组

方格表示: 每个方格代表数组的一个索引位置
数值显示: 方格内显示当前位置的数值
索引标记: 方格下方显示索引编号
状态颜色: 不同颜色表示不同的操作状态

排序动画

冒泡排序: 逐步比较相邻元素并交换
选择排序: 找到最小值并移动到正确位置
实时动画: 0.8秒间隔展示每个操作步骤

🎨 颜色编码

状态指示

灰色 (#e2e8f0): 未排序的元素
橙色 (#ed8936): 正在比较的元素
红色 (#e53e3e): 正在交换的元素
绿色 (#48bb78): 已排序的元素

图例说明

底部显示完整的颜色图例
实时更新状态指示
清晰的视觉反馈

🎮 代码块序列

正确的执行顺序

创建数组 (array nums = [3, 1, 4, 2])
- 初始化包含4个元素的数组
- 在可视化面板中显示方格
显示原数组 (print("排序前: " + nums))
- 输出原始数组状态
- 准备开始排序过程
排序数组 (sort nums)
- 启动冒泡排序动画
- 观察比较和交换过程
显示结果 (print("排序后: " + nums))
- 输出最终排序结果
- 所有元素变为绿色

🔍 搜索功能

线性搜索

使用 search nums for 4 命令
逐个检查数组元素
找到目标时高亮显示

⚡ 动画特效

排序过程

比较阶段: 橙色高亮正在比较的元素
交换阶段: 红色闪烁表示元素交换
完成阶段: 绿色表示已排序位置
完成效果: 全数组闪烁庆祝

时间控制

比较操作: 800ms 停留时间
交换操作: 400ms 动画时间
状态切换: 平滑过渡效果

🧠 学习价值

算法理解

可视化学习: 直观看到算法执行过程
步骤分解: 理解每个操作的作用
时间复杂度: 观察比较和交换次数

编程概念

数组操作: 理解索引和数值的关系
算法逻辑: 学习排序的基本思想
状态变化: 观察数据结构的动态变化

问题解决

逻辑思维: 理解算法的执行流程
模式识别: 识别排序的规律
效率分析: 比较不同算法的性能

🚀 扩展功能

支持的算法

冒泡排序 (Bubble Sort)
选择排序 (Selection Sort)
线性搜索 (Linear Search)

未来扩展

快速排序可视化
归并排序动画
二分搜索演示
插入排序过程

🎓 教学应用

课堂演示

实时展示算法执行过程
学生可以预测下一步操作
讨论算法的优缺点

自主学习

反复观察排序过程
理解算法的核心思想
培养算法思维

评估方式

观察学生对算法步骤的理解
检查对时间复杂度的认识
评估问题解决能力的提升