page contents

WEB前端教程:汉诺塔可视化

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

attachments-2022-11-4kVMufnS63631d16b62c8.png课程目标

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

 阅读

 编码

参考 示例图 (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电子书、教程、项目接单、源码等等

attachments-2022-11-f9Lj33xB63631ce7b48f8.jpg

0 条评论

请先 登录 后评论
小柒
小柒

1014 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. Pack 1131 文章
  3. 小柒 1014 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章