當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript实现汉诺塔动画效果
生活随笔
收集整理的這篇文章主要介紹了
javascript实现汉诺塔动画效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
javascript實現漢諾塔動畫效果
當初以為不用html5也很簡單，踩了javascript單線程的大坑后終于做出來了，沒事可以研究下，對理解javascript的執行過程還是很有幫助的，代碼很爛大家湊合著看。
<html><head><meta charset="UTF-8"><title>Tower of Hanoi 2.0.0</title><script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script><style>table {border: 1px solid #eee;float: left;}td {width: 15px;height: 10px;}caption {text-align: center;}</style><script>$(function() {var tr = $('<tr></tr>');for (var i = 0; i < 17; i++) {tr.append($('<td></td>').clone());}$('table').each(function() {for (var i = 0; i < 9; i++) {$(this).append(tr.clone());}});InitCanva();});var polA = [];var polB = [];var polC = [];var Steps = [];polA.pol = "A";polB.pol = "B";polC.pol = "C";//inti canvafunction InitCanva() {polA = [];polB = [];polC = [];polA.pol = "A";polB.pol = "B";polC.pol = "C";Steps = [];var level = $('#level').val();$("td").css("background", "#FFF");for (var i = 1; i <= level; i++) {polA.push(i * 2 - 1);}Draw(polA);$("#step").click();}function Step() {if (Steps.length > 0) {var s = Steps.shift();DrawUI(s);} else {clearInterval(window.t);}}function Draw(pol) {var tmp = [];tmp.pol = pol.pol;for (var i = 0; i < pol.length; i++) {tmp.push(pol[i]);}Steps.push(tmp);}function DrawUI(pol) {var tb = $('#pole' + pol.pol);var level = pol.length;tb.find("td").css("background", "#FFF");var trs = tb.find("tr:gt(" + (9 - level - 1) + ")");for (var i = 0; i < trs.length; i++) {var min = 8 - (pol[i] + 1) / 2;var max = 8 + (pol[i] + 1) / 2 - 1;$(trs[i]).find("td:gt(" + min + ")").css("background", "#000");$(trs[i]).find("td:gt(" + max + ")").css("background", "#FFF");}}function MoveHanoi(level, pol_A, pol_B, pol_C) {if (level == 1) {console.log(pol_A.pol + '-->' + pol_C.pol);var m = pol_A.shift();pol_C.reverse();pol_C.push(m);pol_C.reverse();Draw(pol_A);Draw(pol_C);} else {MoveHanoi(level - 1, pol_A, pol_C, pol_B);MoveHanoi(1, pol_A, pol_B, pol_C);MoveHanoi(level - 1, pol_B, pol_A, pol_C);}}function Play() {InitCanva();var level = $('#level').val();MoveHanoi(level, polA, polB, polC);window.t = setInterval(function() {$("#step").click();}, 300);}function Delay(minseconds) {var t = +new Date();while (+new Date() - t < minseconds) {}}</script> </head><body>Level:<select name="level" id="level" onchange="InitCanva()"><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select><button onclick="Play()" class="btn-primary">Play</button><button id="step" onclick="Step()" class="btn-primary" style="display:none;">Step</button><hr><div><table id="poleA"><caption><h3>Pole A</h3></caption></table><table id="poleB"><caption><h3>Pole B</h3></caption></table><table id="poleC"><caption><h3>Pole C</h3></caption></table></div> </body></html>轉載請注明出處, 原文鏈接: http://www.cnblogs.com/wancy86/p/hanoi_tower.html
總結
以上是生活随笔為你收集整理的javascript实现汉诺塔动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【IT之家开箱】一加 Buds Ace
- 下一篇： RTX 4070被吐槽不值 微星RTX