[js - 算法可视化] 汉诺塔（Hanoi）演示程序

前段时间偶然看到有个日本人很早之前写了js的多种排序程序，使用js+html实现的排序动画，效果非常好。

受此启发，我决定写几个js的算法动画，第一个就用汉诺塔。

演示地址：https://hanoi.mybatis.io/

代码：GitHub - abel533/hanoi: 汉诺塔(hanoi)演示动画js+html实现

下图为演示界面：

在写界面的时候，才真正理解css中position的用法，之前知道含义，但是不知道搭配的用法。

position用法：外层使用relative，内层使用absolute，这样内层的absolute对象都可以使用top,left和外层进行相对定位。

另外在这个程序里面，实现了一点，就是顺序动画，这一点很重要（同时，因为我对jquery的顺序不熟悉，希望有人可以告诉我怎么用jquery实现）。

1.jquery中，通常都是针对同一个对象，进行不同的动画。

2.针对不同对象的动画会在同一时间开始执行。

3.针对不同对象的动画，可以用jquery的完成函数实现。

上面第3点，在对象很少，执行步骤很少的时候（大概<4可以接受）可以考虑，但是如果是大量的动画，那就很不合适了。

我的解决办法是，有一个对象来记录动画状态，然后使用一个数组来记录全部的状态。

最后使用setTimeout来定期从数组执行动画。

使用这种方法实现了盘子的顺序移动，移动过程中需要计算盘子的运动路径。

如果两个盘子挨着，不需要考虑中间的位置，如果两个盘子隔着一个，就需要考虑中间的位置。

通过判断高度，最后确定盘子的路径，盘子有左移、右移、上移、下移四种操作，每条路径根据具体情况分解为这四种操作。

关于上面jquery的顺序移动，如果没有jquery自身可以实现的方法，我就考虑如何写个插件来实现这个功能。