資訊專欄INFORMATION COLUMN
摘要：做這個漢諾塔游戲的想法，來自于幾個月前做百度第一期的一個題目，題目要求在兩個容器間實現子元素的相互拖拽效果。重構好的代碼我放上了，實現的效果可見其，一起玩玩唄，覺得好玩記得給哈
做這個漢諾塔游戲的想法，來自于幾個月前做百度IFE第一期的一個題目，題目要求在兩個容器間實現子元素的相互拖拽效果。當時我就突發奇想：容器看成柱子，子元素看成盤子，再加一點限制底下盤子移動的判斷和勝負的判斷，不就和經典的漢諾塔游戲沒什么兩樣嗎？
和原題一樣，做這游戲的難點就是拖放效果的實現，雖然用H5的原生拖放很容易實現，但是瀏覽器的兼容卻不太好（IE10以下沒有實現draggable屬性，只有圖片等一些特殊元素是可以拖動的）。于是當時還很naive的我用十分猥瑣的鼠標事件套鼠標事件，艱難地實現了一個還能跑的程序，但是低水平的代碼實在是太難看了（以至于我這次想重新實現一遍都得看好久）。
就沒有優雅點的寫法嗎？當然有，《js高級程序設計》里就提供了一種高級的寫法，也是利用鼠標事件，但在代碼封裝和接口設計上卻比我高到不知道哪去了。具體實現可參考原書或這個，整個拖放效果被封裝在一個單例對象里，只有enable和disable兩個接口方法決定拖放的開啟與否。接口很簡單，但如果我們要在基本的拖動上再實現更加復雜的效果，就得依靠事件了。雖然我們沒有辦法對元素添加自定義事件，但是我們可以曲線救國，將自定義的拖動事件綁在單例對象上，然后利用鼠標事件間接觸發相應的拖動事件即可。利用這段代碼，我們就可以模仿出類似H5的原生拖動了。
而有了這一利器，我當然就想把原來寫的亂七八糟的代碼再重構一遍啦。感覺重構的過程剛開始就和吃剩飯一樣，是比較痛苦的，但當你一步步用更優雅和高級的代碼輕松實現原來你花半天才想出來的解決方案時，不僅會讓你感嘆你當初的天真，也會讓你感嘆原來寫代碼的體驗可以如此美好、原來難題與痛苦不過是小case罷了。
ps.重構好的代碼我放github上了，實現的效果可見其pages，一起玩玩唄，覺得好玩記得給star★哈~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78804.html
摘要：由此可知在前柱是中轉柱在之后也有兩種情況只有上有圓盤。并且我們的游戲目標從一開始的把上所有圓盤移到柱變成了把上所有圓盤移到柱上而在這時中轉柱是柱?，F在將步驟分為三個小步驟將上個圓盤全部移到柱上中轉柱柱。 一.漢諾塔問題 ? 漢諾塔是一種古印度游戲，該游戲的實質就是在一塊木板上有三根固定的柱子...
摘要：那么，有了循環，為什么還要用遞歸呢在某些情況下費波納切數列，漢諾塔，使用遞歸會比循環簡單很多很多話說多了也無益，讓我們來感受一下遞歸吧。 遞歸介紹 本來預算此章節是繼續寫快速排序的，然而編寫快速排序往往是遞歸來寫的，并且遞歸可能不是那么好理解，于是就有了這篇文章。 在上面提到了遞歸這么一個詞，遞歸在程序語言中簡單的理解是：方法自己調用自己 遞歸其實和循環是非常像的，循環都可以改寫成遞歸...
摘要：應用分治法是一種很重要的算法。字面上的解釋是分而治之，就是把一個復雜的問題分成兩個或更多的相同或相似的子問題，再把子問題分成更小的子問題直到最后子問題可以簡單的直接求解，原問題的解即子問題的解的合并。 ...
摘要：漢諾塔問題有三根柱子，源桿，暫存桿，目的桿上有層盤子，由小到大向下排列，現需要將桿的盤子移到桿中要求大的盤在下面，小的盤在上面一次只能移動一個盤子個人思路先分析問題，用數學的歸納法當只有一個盤時，直接移動當有兩個盤時，先將小的移到暫存桿，再 漢諾塔問題： 有三根柱子，源桿A，暫存桿temp，目的桿C A上有n層盤子，由小到大向下排列，現需要將A桿的盤子移到C桿中 ...
閱讀 2287·2021-11-10 11:35
閱讀 899·2021-09-26 09:55
閱讀 2388·2021-09-22 15:22
閱讀 2318·2021-09-22 15:17
閱讀 3683·2021-09-09 09:33
閱讀 1821·2019-08-30 11:22
閱讀 970·2019-08-30 10:57
閱讀 641·2019-08-29 16:10
