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 {
         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