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. 自适应布局webkit-box的用法

    Flexible Box Model(灵活盒子模型)在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置 ...

  2. Angular概念纵览

    Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend ...

  3. 积木大赛 noip2013提高组day2

    这道题一开始想到处理中间是0的位置,但这样时间太慢了,后来想到一种类似二分的方法,就是把这一段的最小值找到,全部减去最小值,然后有0一出现,就又递归处理前一段,每次答案就加上这一段的最小值: AC代码 ...

  4. styleId妙用

    styleId妙用: <html:text property="etpsBlocReg.cptlTotal" style="width: 94%;" re ...

  5. 为什么学习webdriver

    http://www.boobooke.com/goods-37.html

  6. 甲乙（数理逻辑）转自http://www.cnblogs.com/devymex/p/3329635.html

    这是一道历史悠久,又很困难的面试题. 你在旁观主持人和甲.乙两个天才数学家玩猜数字游戏.主持人准备了两个数,告知甲乙:这两个数不同,且大于等于1,小于等于30.然后主持人将两数之积告诉甲,把两数之和告 ...

  7. HTML5-属性

    点击图片打开详细介绍页面

  8. Deploying JRE (Native Plug-in) for Windows Clients in Oracle E-Business Suite Release 12 (文档 ID 393931.1)

    In This Document Section 1: Overview Section 2: Pre-Upgrade Steps Section 3: Upgrade and Configurati ...

  9. CoreCLR 在 Linux 下编译成功

    https://github.com/dotnet/coreclr/wiki/Building-and-Running-CoreCLR-on-Linux ubuntu-14.10 clang --ve ...

  10. SqlServer2012 数据库的同步问题汇总

    1.当订阅由发布服务器集中管理时正常,而把这些订阅分由订阅服务器管理,在发布服务器初始化订阅时,这些订阅就会出现无法访问某地址的问题,即使添加Everyone的完全控制权限也无用. 2.SqlServ ...