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. myBatis+SpringMVC+Maven整合

    一.先创建表结构 二.使用generator通过表结构自动生成model和dao.mapper 使用步骤: 1.解压generator.rar文件 2.文件中的generator.xml文件需要进行修 ...

  2. 黑马程序员_Java基础：JDK1.5后的新特性：自动拆装箱，以及注意事项

    ------- android培训.java培训.期待与您交流! ---------- 首先来看一段代码: Integer x = new Integer(4); Integer y = 4; 在JD ...

  3. linq lamada

    static void Main(string[] args) { List<Customer> cust = new List<Customer>() { ",Ci ...

  4. mysql 函数(二)

    1.space(N) 输出空格 SELECT SPACE(5); -> '     ' 2.replace(str,from_str,to_str) 讲str中的from_str 替换成to_s ...

  5. MySQL的limit查询优化

    MySQL的limit查询优化以下的文章主要是对MySQL limit查询优化的具体内容的介绍,我们大家都知道MySQL数据库的优化是相当重要的.其他最为常用也是最为需要优化的就是limit.MySQ ...

  6. angular文件引入带来的绑定问题

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script ...

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

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

  8. [ASE]项目介绍及项目跟进——TANK BATTLE·INFINITE

    童年的记忆,大概是每周末和小伙伴们围坐在电视机前,在20来寸的电视机屏幕里守卫着这个至今都不知道是什么的白色大鸟. 当年被打爆的坦克数量估计也能绕地球个三两圈了吧. 十几年过去了,游戏从2D-3D,画 ...

  9. SQLSERVER2008新增的审核/审计功能

    SQLSERVER2008新增的审核/审计功能 很多时候我们都需要对数据库或者数据库服务器实例进行审核/审计 例如对失败的登录次数进行审计,某个数据库上的DDL语句进行审计,某个数据库表里面的dele ...

  10. 使用Nginx实现负载均衡

    使用Nginx实现负载均衡 一.nginx简介 nginx是一个高性能的HTTP服务器和反向代理服务器.它起初是俄罗斯人Igor Sysoev开发的,至今支撑者俄罗斯的很多大型的网站. 二.nginx ...