汉诺塔可视化

课程目标

掌握 Javascript 函数进阶内容递归和闭包等，编程实现汉诺塔算法以及可视化展示

阅读

• 递归和堆栈 - JavaScript 现代教程 (opens new window)
• 汉诺塔问题 - wiki (opens new window)
• 递归 · JavaScript 轻量级函数式编程 (opens new window)
• JS递归函数精讲 (opens new window)
• 函数 - JavaScript 教程 - 网道 (opens new window)
• Tower of Hanoi Javascript Implementation | youtube (opens new window)
• Understanding Recursion by implementing the ‘Tower of Hanoi’ game in JavaScript (opens new window)
• Tower of Hanoi recursion game algorithm explained - Arpit Mishra (opens new window)

编码

参考 示例图 (opens new window), 使用 HTML+CSS+JAVASCRIPT 完成一个汉诺塔经典算法的可视化演示。

在经典汉诺塔问题中，有 3 根柱子及 N 个不同大小的穿孔圆盘，盘子可以滑入任意一根柱子。一开始，所有盘子自上而下按升序依次套在第一根柱子上(即每一个盘子只能放在更大的盘子上面)。移动圆盘时受到以下限制:

(1) 每次只能移动一个盘子;

(2) 盘子只能从柱子顶端滑出移到下一根柱子;

(3) 盘子只能叠在比它大的盘子上。

要求让所有盘子从第一根柱子移到最后一根柱子。

这是JavaScript一个经典的算法问题，如果您还感兴趣，可以在JavaScript 算法和数据结构 (opens new window)上学习更多算法问题

用例描述

• 根据用户输入的数量，输入框失去焦点时，自动创建颜色不同，带有标号的汉诺塔。
• 验证输入框内容类型只能为数字，范围为0~8，不符合要求给出提示。
• 点击 next 按钮，逐步演示 haoni 算法步骤。
• 点击 end 按钮，自动执行汉诺塔算法直到结束。
• 点击 reset 按钮，清空画布。
• 执行算法时，自动更新步骤数，比如第一步，就显示 1 moves
• 学有余力的同学还可以实现一个汉诺塔小游戏

要求

• 不使用任何第三方的布局或样式库
• 不使用任何第三方的 JavaScript 库
• 代码风格优雅，代码结构合理，技术设计恰到好处
• 示例图仅供参考，页面样式结构可以自行设计，实现功能需和上述用例描述一致

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。