js实现三层汉诺塔

跟现实中的汉诺塔不一样,每次只能移动一格,完整版源码

JQ用的在线链接,如果需要可修改路径为本地JS

直接上源码

CSS样式

  <style>
        .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;
        }
    </style>

DOM

<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 class="rigth">
            <div class="ganzi"></div>
            <div class="box-container"></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+JQ

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>
    <script type="text/javascript">
        var config = {
            default_arr: [1, 2, 3],
            step: 0,
            time: 0,
            falg: true,
        };
        var els = document.querySelectorAll(".box-container"),
            left_button = document.getElementsByClassName("btn-right"),
            right_button = document.getElementsByClassName("btn-left"),
            str = "";
        // 初始化
        (function () {
            for (var i in config.default_arr) {
                str += `<div class="flex-box" style="width:${
            100 + (config.default_arr[i] - 1) * 20
          }px"></div>`;
            }
            els[0].innerHTML = str;
            for (let i = 0, len = left_button.length; i < len; i++) {
                left_button[i].onclick = function () {
                    if (els[i].innerHTML == "") {
                        return;
                    }
                    move(els[i], els[i + 1]);
                };
            }
            for (let i = 0, len = right_button.length; i < len; i++) {
                right_button[i].onclick = function () {
                    if (els[i + 1].innerHTML == "") {
                        return;
                    }
                    move(els[i + 1], els[i]);
                };
            }
        })();

        function move(before_el, after_el) {
            var $before_el = $(before_el).children().eq(0),
                $after_el = $(after_el).children().eq(0),
                before_el_width = $before_el.css("width"),
                after_el_width = $after_el.css("width");
            if (
                !after_el_width ||
                parseInt(before_el_width) < parseInt(after_el_width)
            ) {
                $($before_el).remove();
                $(after_el).prepend($before_el);
                config.step++;
            }
            if (isWin()) {
                alert("哥们儿,你赢了,你只用了" + config.step + "步");
            }
        }

        function isWin() {
            if ($(els[2]).children().length == config.default_arr.length) {
                return true;
            } else {
                return false;
            }
        }

        function hanoi(n, A, B, C) {
            if (n == 1) {
                move(A, C);
            } else {
                hanoi(n - 1, A, C, B);
                move(A, C);
                hanoi(n - 1, B, A, C);
            }
        }

        function help() {
            var falg = confirm("看你走的这么辛苦,要我帮你完成吗");
            if (falg) {
                config.falg = false;
                hanoi(config.default_arr.length, $(els[0]), $(els[1]), $(els[2]));
            }
        }
    </script>