摘要：做这个汉诺塔游戏的想法，来自于几个月前做百度第一期的一个题目，题目要求在两个容器间实现子元素的相互拖拽效果。重构好的代码我放上了，实现的效果可见其，一起玩玩呗，觉得好玩记得给哈
做这个汉诺塔游戏的想法，来自于几个月前做百度IFE第一期的一个题目，题目要求在两个容器间实现子元素的相互拖拽效果。当时我就突发奇想：容器看成柱子，子元素看成盘子，再加一点限制底下盘子移动的判断和胜负的判断，不就和经典的汉诺塔游戏没什么两样吗？
和原题一样，做这游戏的难点就是拖放效果的实现，虽然用H5的原生拖放很容易实现，但是浏览器的兼容却不太好（IE10以下没有实现draggable属性，只有图片等一些特殊元素是可以拖动的）。于是当时还很naive的我用十分猥琐的鼠标事件套鼠标事件，艰难地实现了一个还能跑的程序，但是低水平的代码实在是太难看了（以至于我这次想重新实现一遍都得看好久）。
就没有优雅点的写法吗？当然有，《js高级程序设计》里就提供了一种高级的写法，也是利用鼠标事件，但在代码封装和接口设计上却比我高到不知道哪去了。具体实现可参考原书或这个，整个拖放效果被封装在一个单例对象里，只有enable和disable两个接口方法决定拖放的开启与否。接口很简单，但如果我们要在基本的拖动上再实现更加复杂的效果，就得依靠事件了。虽然我们没有办法对元素添加自定义事件，但是我们可以曲线救国，将自定义的拖动事件绑在单例对象上，然后利用鼠标事件间接触发相应的拖动事件即可。利用这段代码，我们就可以模仿出类似H5的原生拖动了。
而有了这一利器，我当然就想把原来写的乱七八糟的代码再重构一遍啦。感觉重构的过程刚开始就和吃剩饭一样，是比较痛苦的，但当你一步步用更优雅和高级的代码轻松实现原来你花半天才想出来的解决方案时，不仅会让你感叹你当初的天真，也会让你感叹原来写代码的体验可以如此美好、原来难题与痛苦不过是小case罢了。
ps.重构好的代码我放github上了，实现的效果可见其pages，一起玩玩呗，觉得好玩记得给star★哈~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78804.html
摘要：由此可知在前柱是中转柱在之后也有两种情况只有上有圆盘。并且我们的游戏目标从一开始的把上所有圆盘移到柱变成了把上所有圆盘移到柱上而在这时中转柱是柱。现在将步骤分为三个小步骤将上个圆盘全部移到柱上中转柱柱。 一.汉诺塔问题 汉诺塔是一种古印度游戏，该游戏的实质就是在一块木板上有三根固定的柱子...
摘要：那么，有了循环，为什么还要用递归呢在某些情况下费波纳切数列，汉诺塔，使用递归会比循环简单很多很多话说多了也无益，让我们来感受一下递归吧。 递归介绍 本来预算此章节是继续写快速排序的，然而编写快速排序往往是递归来写的，并且递归可能不是那么好理解，于是就有了这篇文章。 在上面提到了递归这么一个词，递归在程序语言中简单的理解是：方法自己调用自己 递归其实和循环是非常像的，循环都可以改写成递归...
摘要：应用分治法是一种很重要的算法。字面上的解释是分而治之，就是把一个复杂的问题分成两个或更多的相同或相似的子问题，再把子问题分成更小的子问题直到最后子问题可以简单的直接求解，原问题的解即子问题的解的合并。 ...
摘要：汉诺塔问题有三根柱子，源杆，暂存杆，目的杆上有层盘子，由小到大向下排列，现需要将杆的盘子移到杆中要求大的盘在下面，小的盘在上面一次只能移动一个盘子个人思路先分析问题，用数学的归纳法当只有一个盘时，直接移动当有两个盘时，先将小的移到暂存杆，再 汉诺塔问题： 有三根柱子，源杆A，暂存杆temp，目的杆C A上有n层盘子，由小到大向下排列，现需要将A杆的盘子移到C杆中 ...
阅读 2289·2021-11-10 11:35
阅读 904·2021-09-26 09:55
阅读 2394·2021-09-22 15:22
阅读 2320·2021-09-22 15:17
阅读 3688·2021-09-09 09:33
阅读 1826·2019-08-30 11:22
阅读 973·2019-08-30 10:57
阅读 643·2019-08-29 16:10
