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. 利用yum下载软件包的三种方法

    转自:http://297020555.blog.51cto.com/1396304/530703 方法一: downloadonly插件 有一个yum的插件叫做downloadonly,顾名思义,就 ...

  2. vb小菜一枚--------早期绑定和后期绑定

    早期绑定和后期绑定 Visual Studio 2005   其他版本   将对象分配给对象变量时,Visual Basic 编译器会执行一个名为 binding 的进程.如果将对象分配给声明为特定对 ...

  3. TestNG教程

    TestNG教程 http://www.yiibai.com/testng/2013/0916311.html TestNG,3种执行方式: 1.ant(build.xml) 2.Eclipse(安装 ...

  4. DNS的view设置

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

  5. 00.PHP学习建议

    各位师弟师妹,大家好~PHP不是我们专业的本该有的方向.我不知道大家为什么来学习这门语言,也许是自己了解之后喜欢这门语言(我想这种可能在我们专业是挺少的),也许是听守中哥说这门语言简单好学,为了躲避学 ...

  6. php跨域请求

    跨域api服务器设置 header('content-type:application:json;charset=utf8'); header('Access-Control-Allow-Origin ...

  7. XML dom

    将文件解析为文档 三步过程 为了使用 XML 文件中的信息,必须解析文件以创建一个 Document 对象. Document 对象是一个接口,因而不能直接将它实例化:一般情况下,应用程序会相应使用一 ...

  8. 单用户模式下修改root密码

    1.重启或者开机时,在倒数3秒的界面按下任意键. 2.该界面有如下提示(e 编辑 a 更改内核选项 c 命令行  b 启动),所以我们按下"e"编辑. 3.上下键选中第二行再按下& ...

  9. Windows Server 2003搭建邮件服务器

    Windows Server 2003搭建邮件服务器 由于Windows Server 2003默认是没有安装我们搭建邮件服务器所需要的POP3和SMTP服务的,因此需要我们自己来安装.方法如下: 1 ...

  10. 分享工作中遇到的问题积累经验 事务日志太大导致insert不进数据

    分享工作中遇到的问题积累经验 事务日志太大导致insert不进数据 今天开发找我,说数据库insert不进数据,叫我看一下 他发了一个截图给我 然后我登录上服务器,发现了可疑的地方,而且这个数据库之前 ...