js实现的汉诺塔

样式

    .container {
        width: 100%;
        min-width: 1000px;
        height: 500px;
        background: #ccc;
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, 0);
        border-bottom: 10px solid #000;
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
    }

    .container>div {
        position: relative;
        box-sizing: border-box;
        width: 33.33%;
        height: 100%;
    }

    .container .ganzi {
        width: 15px;
        height: 450px;
        background: #666;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        /* border:1px solid #000; */
        box-shadow: 0px 5px 5px #000;
    }

    .box-container {
        width: 100%;
        position: absolute;
        left: 0;
        /* transform: translate(50%); */
        bottom: 0;
        text-align: center;
    }
    .flex-box {
        height: 25px;
        border-radius: 12px;
        display: block;
        background: #368;
        margin: 0 auto;
        border: 1px solid #333;
        box-shadow: 0px 5px 5px #333, inset 0px -1px 10px rgba(0, 0, 0, 0.4);
    }

    .control {
        width: 100%;
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        justify-content: space-around;
    }

    .control button {
        padding: 8px 12px;
        background: #368;
        color: #fff;
        outline: none;
        border: none;
    }

    .tip {
        color: #f00;
    }

== HTML部分==

 <div class="container">
    <div class="left">
        <div class="ganzi"></div>
        <div class="box-container">
            <div class="flex-box" style="width:100px"></div>
            <div class="flex-box" style="width:120px"></div>
            <div class="flex-box" style="width:140px"></div>
        </div>
    </div>
    <div class="middle">
        <div class="ganzi"></div>
        <div class="box-container">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="rigth">
        <div class="ganzi"></div>
        <div class="box-container">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<div class="control">
    <div class="left">
        <button type="button" class="btn-right">&gt;</button>
    </div>
    <div class="middle">
        <button type="button" class="btn-left">
            &lt;</button> <button type="button" class="btn-right">&gt;
        </button>
    </div>
    <div class="right">
        <button type="button" class="btn-left">
            &lt;</button>
    </div>
</div>`

JS部分

 <script>
        /* 中间的杆子上：最小的放在0位置，最大的放在2位置 */
        /*  最右边的杆子上:最小的放在0位置，最大的放在2位置 */
        /* 点击按钮前先判断能否移动盘子 
        规则:只能把小盘子放到大盘子上
         大盘子：2号位置
         中等盘子：1号位置
         小盘子：0号位置
         只能从上往下移
        */
       /* 优先把盘子放到空的杆子上 */
        /*  记录每个杆子最上面的盘子所在的位置 
           等于负数表示没有盘子
            location1
            location2
            location3
        */
        let location1 = 0;
        let location2 = -1;
        let location3 = -1;
        //获取每个杆子
        let ganzi = document.querySelectorAll(".ganzi");
        let boxContainer = document.querySelectorAll(".box-container");
        let count=0;//记录游戏走的步数
        let count1 = 3;// 记录杆子上剩余的盘子数
        let count2 = 0;//
        let count3 = 0;