javascript实现汉诺塔动画效果

当初以为不用html5也很简单，踩了javascript单线程的大坑后终于做出来了，没事可以研究下，对理解javascript的执行过程还是很有帮助的，代码很烂大家凑合着看。

  1. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Tower of Hanoi 2.0.0</title>
  6.     <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js"></script>
  7.     <style>
  8.     table {
  9.         border: 1px solid #eee;
  10.         float: left;
  11.     }
  13.     td {
  14.         width: 15px;
  15.         height: 10px;
  16.     }
  18.     caption {
  19.         text-align: center;
  20.     }
  21.     </style>
  22.     <script>
  23.     $(function() {
  24.         var tr = $('<tr></tr>');
  25.         for (var i = 0; i < 17; i++) {
  26.             tr.append($('<td></td>').clone());
  27.         }
  28.         $('table').each(function() {
  29.             for (var i = 0; i < 9; i++) {
  30.                 $(this).append(tr.clone());
  31.             }
  32.         });
  33.         InitCanva();
  34.     });
  35.     var polA = [];
  36.     var polB = [];
  37.     var polC = [];
  38.     var Steps = [];
  39.     polA.pol = "A";
  40.     polB.pol = "B";
  41.     polC.pol = "C";
  42.     //inti canva
  43.     function InitCanva() {
  44.         polA = [];
  45.         polB = [];
  46.         polC = [];
  47.         polA.pol = "A";
  48.         polB.pol = "B";
  49.         polC.pol = "C";
  50.         Steps = [];
  51.         var level = $('#level').val();
  52.         $("td").css("background", "#FFF");
  53.         for (var i = 1; i <= level; i++) {
  54.             polA.push(i * 2 - 1);
  55.         }
  56.         Draw(polA);
  57.         $("#step").click();
  58.     }
  59.     function Step() {
  60.         if (Steps.length > 0) {
  61.             var s = Steps.shift();
  62.             DrawUI(s);
  63.         } else {
  64.             clearInterval(window.t);
  65.         }
  66.     }
  67.     function Draw(pol) {
  68.         var tmp = [];
  69.         tmp.pol = pol.pol;
  70.         for (var i = 0; i < pol.length; i++) {
  71.             tmp.push(pol[i]);
  72.         }
  73.         Steps.push(tmp);
  74.     }
  75.     function DrawUI(pol) {
  76.         var tb = $('#pole' + pol.pol);
  77.         var level = pol.length;
  78.         tb.find("td").css("background", "#FFF");
  79.         var trs = tb.find("tr:gt(" + (9 - level - 1) + ")");
  80.         for (var i = 0; i < trs.length; i++) {
  81.             var min = 8 - (pol[i] + 1) / 2;
  82.             var max = 8 + (pol[i] + 1) / 2 - 1;
  83.             $(trs[i]).find("td:gt(" + min + ")").css("background", "#000");
  84.             $(trs[i]).find("td:gt(" + max + ")").css("background", "#FFF");
  85.         }
  86.     }
  87.     function MoveHanoi(level, pol_A, pol_B, pol_C) {
  88.         if (level == 1) {
  89.             console.log(pol_A.pol + '-->' + pol_C.pol);
  90.             var m = pol_A.shift();
  91.             pol_C.reverse();
  92.             pol_C.push(m);
  93.             pol_C.reverse();
  94.             Draw(pol_A);
  95.             Draw(pol_C);
  96.         } else {
  97.             MoveHanoi(level - 1, pol_A, pol_C, pol_B);
  98.             MoveHanoi(1, pol_A, pol_B, pol_C);
  99.             MoveHanoi(level - 1, pol_B, pol_A, pol_C);
  100.         }
  101.     }
  102.     function Play() {
  103.         InitCanva();
  104.         var level = $('#level').val();
  105.         MoveHanoi(level, polA, polB, polC);
  106.         window.t = setInterval(function() {
  107.             $("#step").click();
  108.         }, 300);
  109.     }
  110.     function Delay(minseconds) {
  111.         var t = +new Date();
  112.         while (+new Date() - t < minseconds) {}
  113.     }
  114.     </script>
  115. </head>
  117. <body>
  118.     Level:
  119.     <select name="level" id="level" onchange="InitCanva()">
  120.         <option value="3">3</option>
  121.         <option value="4">4</option>
  122.         <option value="5">5</option>
  123.         <option value="6">6</option>
  124.         <option value="7">7</option>
  125.         <option value="8">8</option>
  126.         <option value="9">9</option>
  127.     </select>
  128.     <button onclick="Play()" class="btn-primary">Play</button>
  129.     <button id="step" onclick="Step()" class="btn-primary" style="display:none;">Step</button>
  130.     <hr>
  131.     <div>
  132.         <table id="poleA">
  133.             <caption>
  134.                 <h3>Pole A</h3></caption>
  135.         </table>
  136.         <table id="poleB">
  137.             <caption>
  138.                 <h3>Pole B</h3></caption>
  139.         </table>
  140.         <table id="poleC">
  141.             <caption>
  142.                 <h3>Pole C</h3></caption>
  143.         </table>
  144.     </div>
  145. </body>
  147. </html>

转载请注明出处, 原文链接: http://www.cnblogs.com/wancy86/p/hanoi_tower.html

javascript实现汉诺塔动画效果的更多相关文章

  1. [javascript]模拟汉诺塔

    看了博文自己动手写了代码. 这能值几个钱? 请写代码完成汉诺塔的算法:void Hanoi(int maxLevel); 比如2层汉诺塔,需要打印(Console.WriteLine)出如下文本: A ...

  2. Python实现汉诺塔问题的可视化（以动画的形式展示移动过程）

    学习Python已经有一段时间了,也学习了递归的方法,而能够实践该方法的当然就是汉诺塔问题了,但是这次我们不只是要完成对汉诺塔过程的计算,还要通过turtle库来体现汉诺塔中每一层移动的过程. 一.设 ...

  3. 汉诺塔的python 动画演示

    1.简介 古代有一座汉诺塔,塔内有3个座A.B.C,A座上有n个盘子,盘子大小不等,大的在下,小的在上,如图所示.有一个和尚想把这n个盘子从A座移到C座,但每次只能移动一个盘子,并且自移动过程中,3个 ...

  4. 关于汉诺塔，C++代码，代码效果演算

     1．故事介绍 汉诺塔:汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上依照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘 ...

  5. JavaScript算法实现之汉诺塔（Hanoi）

    目前前端新手,看到的不喜勿喷,还望大神指教. 随着Node.js,Angular.js,JQuery的流行,点燃了我学习JavaScript的热情!以后打算每天早上跟晚上抽2小时左右时间将经典的算法都 ...

  6. JavaScript递归函数解“汉诺塔”

    “汉诺塔”是一个著名的益智游戏.塔上有3根柱子和一套直径各不相同的空心圆盘.开始时柱子上的所有圆盘都按照从小到大的顺序堆叠.目标是通过每次移动一个圆盘到另一根柱子,最终把一堆圆盘移动到目标柱子上,过程 ...

  7. 递归可视化之汉诺塔的动画实现（turtle海龟）

    import turtle class Stack: def __init__(self): self.items = [] def isEmpty(self): def push(self, ite ...

  8. 基于HTML5的WebGL设计汉诺塔3D游戏

    在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. http://hightopo.com/demo/hanoi_20151106/index.html ...

  9. HT for Web 3D游戏设计设计--汉诺塔（Towers of Hanoi）

    在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. 汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Towe ...

随机推荐

  1. Android studio 多渠道打包

    一般用渠道的统计无非是用友盟或者其它之类的,今天就以友盟的为例吧. 渠道信息一般在 AndroidManifest.xml中修改以下值: <meta-data android:name=&quo ...

  2. 4.总结近5周以来的github上的工作情况，以图表方式分析你小组的工作情况、存在的问题及解决的方案。（尤心心）

    4.总结近5周以来的github上的工作情况,以图表方式分析你小组的工作情况.存在的问题及解决的方案. (1)利用github本身的graphs可以清晰的看出小组成员在github上面的交互,可以直接 ...

  3. 使用CTex完成北京科技大学本科生毕业设计

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  4. winAPI 中 的 GlobalLock GlobalUnlock 的作用

    在项目中遇到GlobalLock  GlobalUnlock 这两个操作内存的函数. 百度百科解释为:锁定内存中指定的内存块,并返回一个地址值,令其指向内存块的起始处.除非用 GlobalUnlock ...

  5. 关于普通定时器与高级定时器的 PWM输出的初始化的区别

    不管是普通定时器还是高级定时器,你用哪个通道,就在程序里用OC多少.比如CH3对应OC3 TIM_OCInitStructure.TIM_OCMode = TIM_OCMode_PWM1;  TIM_ ...

  6. DNS的view设置

    在实际的网络应用中,我们有时希望对于同一个Domain Name能够根据不同的请求IP 地址/区域,解析到不同的对应IP地址,比如:有时对于企业内部网络和外部网络希望对同一域名解析到不同的IP地址以达 ...

  7. mysql group_concat 使用 （按分组组合字段）

    语法: GROUP_CONCAT([DISTINCT] expr [,expr ...][ORDER BY {unsigned_integer | col_name | expr}[ASC | DES ...

  8. C语言标准定义的32个关键字

    关键字                    意      义 auto                      声明自动变量,缺省时编译器一般默认为auto int                 ...

  9. [ASE][Daily Scrum]12.15

    这两周事情好多~ 组里面的事情,出国的申请出国………… 不过整体来说我们sprint3并没有安排太多的工作,所以完成情况尚可. 大地图和AI花费了不少时间,

  10. 在Ubuntu中安装Python3

    首先,通过命令行安装Python3.2,只需要在终端中通过命令行安装即可: sudo apt-get install python3   一路yes. 因为Ubuntu很多底层采用的是Python2. ...