WEB前端教程：汉诺塔可视化
掌握 Javascript 函数进阶内容递归和闭包等，编程实现汉诺塔算法以及可视化展示
课程目标
掌握 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 后进行提交。
总结
依然把今天的学习用时，收获，问题进行记录。
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-11-03 09:44
- 阅读 ( 779 )
- 分类：WEB前端开发
