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 canva

    function 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实现汉诺塔动画效果的更多相关文章

  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. jboss hello world

    http://developers.redhat.com/products/devstudio/get-started/ 1. 下载 Red Hat JBoss Developer studio 2. ...

  2. linux修改主机名的方法

    linux修改主机名的方法 用hostname命令可以临时修改机器名,但机器重新启动之后就会恢复原来的值. #hostname   //查看机器名#hostname -i  //查看本机器名对应的ip ...

  3. Unity 通过 www 下载 assetbundle , 在 iOS9 设备无法下载的问题

    我们项目是通过 www 下载 Assetbundle 来实现热更新的, 在 iOS 8上一切正常,但在 iOS9 设备上发现无法下载,跟踪调试发现以下错误信息 “App Transport Secur ...

  4. shell 记录

    查看进程打开的文件句柄lsof -p 进程号|wc -l date --set "Wed Dec 11 14:51:41 CST 2013" 重启VPN pon vpn arg=` ...

  5. Sublime Text 3专题

    MarkDown语法记笔记 1.下载&&安装 下载 常用插件安装 Submlit使用教程 [如何优雅地使用Sublime Text3] 2.Sublime Text 便捷技巧 [以PH ...

  6. Yii2 性能优化 来源yii2官方文档

    优化你的 PHP 环境 使用最新稳定版本的 PHP . PHP 的主要版本可能带来显著的性能提升. 启用字节码缓存 Opcache(PHP 5.5或更高版本) 或 APC (PHP 5.4或更早版本) ...

  7. delphi 中如何查看网页POSTDATA

    procedure TForm1.WebBrowser1NewWindow2(Sender: TObject;  var ppDisp: IDispatch; var Cancel: WordBool ...

  8. MySQL 升级详细步骤 （包括 Percona)

    MySQL 升级步骤 MySQL 5.1.72 升级到 MySQL 5.5.36 鉴于我在升级的时候遇到的麻烦问题,我觉得有必要把一些细节说清楚,免得引起误解了.感觉官方文档上的升级步骤写的比较简单, ...

  9. 给 admin 新建的 hdfs 文件的权限

    su hdfs hdfs dfs -chown -R admin /   org.apache.hadoop.security.AccessControlException: Permission d ...

  10. 关于CAP定理的个人理解

    CAP定理简介 在理论计算机科学中,CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致性(C ...