JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<link rel="stylesheet" href="http://wuzhiwei.net/libs/bootstrap/css/bootstrap.min.css">
<script src="http://wuzhiwei.net/libs/gsap/TweenMax.min.js"></script>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Hanoi Tower</div>
        <div class="panel-body text-center">
            <canvas id="stage" class="center-block" width="400" height="220" style="border:1px black solid "></canvas>
            <div id="ctrl" class="center-block">
                <label for="numsel">Disc Number：</label>
                <select id="numsel">
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                <button class="btn btn-default" id="start" value="start">Start</button>
                <label for="step">Step：</label> <span class="badge" id="step">0</span>

            </div>
        </div>
    </div>
</div>

CSS

.panel {
    min-width:400px;
}
#stage {
    margin-bottom:15px;
}
#start {
    margin-left:20px;
    margin-right:20px;
}

JavaScript

var stage = new createjs.Stage('stage');
TweenLite.ticker.addEventListener("tick", stage.update, stage);

var hanoi = new createjs.Container();
stage.addChild(hanoi);
hanoi.x = 50;
hanoi.y = 200;

var base = new createjs.Shape();
base.graphics.beginFill("#000000").drawRect(0, 0, 300, 10);
hanoi.addChild(base);

var pegs = [];
for (var i = 0; i < 3; ++i) {
    pegs[i] = makePeg();
    hanoi.addChild(pegs[i]);
    pegs[i].x = 43 + i * 100;
    pegs[i].y = -120;
}

var discs = [];
var colors = ["#0B61A4", "#00CC00", "#C9F601", "#FFD201", "#FF7201", "E20149"];
for (i = 0; i < 6; ++i) {
    discs[i] = new createjs.Shape();
    discs[i].graphics.beginFill(colors[i]).drawRect(0, 0, 100 - i * 14, 10);
    discs[i].x = 48;
    discs[i].y = i * -10;
    discs[i].regX = 50 - i * 7;
    discs[i].regY = 10;
    hanoi.addChild(discs[i]);
}

function makePeg() {
    var peg = new createjs.Shape();
    peg.graphics.beginFill("#000000").drawRect(0, 0, 10, 120);
    return peg;
}

var pegStack = [
    [0, 1, 2],
    [],
    []
];
var delay = -2.0;

function hanoiSolve(n, a, b, c) {
    if (n > 0) {
        hanoiSolve(n - 1, a, c, b);
        var disc = pegStack[a].pop();
        var cx = 48 + a * 100;
        var xx = 48 + c * 100;
        var yy = pegStack[c].length * -10;
        var mx = (cx + xx) / 2;
        var tl = new TimelineLite({
            delay: delay += 2.0
        });
        tl.append(TweenLite.to(discs[disc], 0.5, {
            y: -130,
            onStart: function () {
                $("#step").html(++step);
            }
        }));
        tl.append(TweenLite.to(discs[disc], 1, {

            bezier: [{
                x: mx,
                y: -160
            }, {
                x: xx,
                y: -130
            }]
        }));
        tl.append(TweenLite.to(discs[disc], 0.5, {
            y: yy,
        }));
        pegStack[c].push(disc);
        hanoiSolve(n - 1, b, a, c);
    }
}

var debug = new...