Stepwise：C 中循环和条件语句的训练器

Stepwise：一款可视化训练工具，助你轻松掌握C语言中的循环与条件语句

开发者shu512创建了Stepwise——一个基于网页的工具，通过可视化环境从零开始学习编程。该工具允许用户手动在地图上移动机器人，用指令块组装程序，应用循环和条件语句，编辑地图并保存任务。这个解决方案的诞生是为了帮助毫无经验的弟弟准备C语言考试。

第一个任务：向右移动三步。学生口头给出方向，停顿时间缩短，信心逐渐增强。接下来，绕墙移动：序列为“右、下、下、下、右”。切换到上、下、左、右指令块后，路线实现了自动化。

从重复到循环

在“蛇形”地图上，学生先画了8个左指令，然后意识到重复性并用循环替换：

循环开始
左
循环结束（8）

类似地处理下（2）。他们坚持使用循环，即使线性代码更简单。这展示了抽象概念的有意识应用。

关键阶段列表：

• 手动控制机器人以理解路线。
• 无需语法组装指令块。
• 在明确需要时引入循环。
• 发现嵌套循环的模式。

通过试错掌握嵌套循环

“大蛇形”地图（放大版）需要嵌套循环。学生建议在外层循环内加入右循环，然后是左和下。停顿后，问题来了：“循环里套循环？”

通过试错找到解决方案：

• 外层循环处理垂直移动。
• 内层循环处理水平移动。
• 调整边界。

这花了半节课时间，但巩固了概念。机器人最终到达终点。

过渡到C语言语法

掌握指令块后，启用了C代码生成功能。学生将DOWN();与指令块对应起来，理解了if (wall_right())。循环被解释为for (int i = 0; i < 8; i++)，其中i是任意变量（他们将其替换为a）。

标准结构（#include <stdio.h>、main、return 0）被推迟学习。代码变得熟悉：每个结构都有可视化经验作为支撑。

生成代码示例：

for (int a = 0; a < 8; a++) {
    LEFT();
}
DOWN();
DOWN();

独立编程

接下来——手动编写C代码来完成地图任务。学生阅读编译器错误，澄清疑问：“这样对吗？我可以这样做吗？”程序变长，问题逐渐减少。地图变得更加复杂。

学生变成了测试员：识别用户界面的不便之处，通过截图提出改进建议。

关键要点

• 可视化先于语法：循环和条件语句通过实际需求掌握，而非理论灌输。
• 试错加速了对嵌套结构的理解。
• 代码块生成可运行的C代码，简化了过渡过程。
• 零经验的学生在第三次课程中能独立使用for和if。
• 该工具与导师配合使用，通过协作解决问题效果显著。

最终总结

从被动到主动的转变在几节课内完成。学生独立解决任务，对新地图充满兴奋。过渡到变量、函数和指针的过程也很顺利。

方法：在正式学习语法前，通过可视化理解结构的意义。Stepwise不是玩具，而是对话和实验的环境。对于中高级开发者，它可作为可视化训练工具的原型，或用于新手入职培训。

— Editorial Team