效果预览

打开Demo

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="app" v-cloak>
    <h1>汉诺塔游戏</h1>
    <div class="container">
        <div class="box" v-for="(tower, towerIndex) in towers" :key="towerIndex" @click="selectTower(towerIndex, tower)">
            <div class="tower">
                <div class="disk" v-for="(disk, diskIndex) in tower" :key="diskIndex" :class="{'disk_select': towerIndex === selectedTowerIndex && diskIndex === 0}" :style="{width: 60 + disk * (200 / startLevels) + 'px' }">
                    <div class="text" v-text="disk"></div>
                </div>
            </div>
            <div class="base" v-text="String.fromCharCode(towerIndex + 65)"></div>
        </div>
        <div class="step_display">
            <div class="step_info">步骤展示</div>
            <div class="step_moves" ref="step_moves">
                <ol>
                    <li v-for="(move, moveIndex) in moves" :key="moveIndex" v-text="String.fromCharCode(move[0] + 65) + '柱移到' + String.fromCharCode(move[1] + 65) + '柱'"></li>
                </ol>
            </div>
        </div>
    </div>
    
    <div class="info">
        <div>规则：每次移动一块，小的放在大的上面, 将它移动到另一根柱子上</div>
        <div>最小步数：<span v-text="minSteps"></span></div>
        <div>计时（秒）：<span v-text="second"></span></div>
        <div>移动步数：<span v-text="steps"></span></div>
    </div>
    <div class="controls">
        <label for="levels">选择层数：</label>
        <input type="number" id="levels" v-model.number="levels" max="10" min="2">
        <button @click="startGame">开始游戏</button>
        <button @click="recall">撤回到上一步</button>
        <button @click="autoMove">自动移动</button>
    </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
[v-cloak] {
    display: none;
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}
#app {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
h1 {
    margin-top: 0;
}
.container {
    display: flex;
    justify-content: space-between;
}
.box {
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 298px;
    height: 400px;
    user-select:none;
}
.step_display {
    border: 1px solid #ccc;
    width: 298px;
    height: 400px;
}
.step_info{
    font-size: 18px;
    font-weight: bold;
    margin: 5px;
}
.step_moves {
    width: 288px;
    height: 355px;
    padding: 5px;
    overflow: auto;
}
.tower {
    margin: auto;
    position: relative;
    width: 10px;
    height: 350px;
    border-radius: 3px 3px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background: linear-gradient(left, #707070 , #d1d1d1);
}
.tower_select {
    background-color: #ddd;
}
.base {
    width: 300px;
    height: 50px;
    border-radius: 10px;
    background: #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.disk {
    position: relative;
    width: 60px;
    height: 30px;
    transition: all 0.5s;
    border: 2px solid #99aaff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(left, #00aeff , #93e9ff);
}
.text{
    color: #fff;
    text-shadow: #99aaff 3px 3px 3px;
}
.disk_select {
    background: linear-gradient(left, #eeccff, #cc55ff);
}
.info {
    margin-top: 20px;
}
.controls {
    margin-top: 20px;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
vm = new Vue({
    el: '#app',
    data: {
        timer: {
            timekeeper: null,
            autoMove: null,
        },
        selectedTowerIndex: null,
        second: 0,
        steps: 0,
        minSteps: 0,
        levels: 3,
        start: false,
        autoStart: false,
        startLevels: 0,
        towers: [[], [], []],
        moves: [],
    },
    methods: {
        // 手动移动
        selectTower(index, tower) {
            if (!this.start) {
                return;
            }
            if (this.selectedTowerIndex === null) {
                if (tower.length > 0) {
                    this.selectedTowerIndex = index;
                }
            } else if (this.selectedTowerIndex === index) {
                this.selectedTowerIndex = null;
            } else {
                selectedTower = this.towers[this.selectedTowerIndex];
                if (tower.length === 0 || tower[0] > selectedTower[0]) {
                    tower.unshift(selectedTower.shift());
                    this.moves.push([this.selectedTowerIndex, index]); //记录步骤
                    this.selectedTowerIndex = null;
                    this.steps++;
                    if (tower.length === this.startLevels) {
                        this.start = false;
                        clearInterval(this.timer.timekeeper);
                        alert('完成');
                    }
                } else {
                    alert('小的放在大的上面');
                }
            }
        },
        // 开始游戏
        startGame() {
            if (this.start || this.autoStart) {
                if (confirm("游戏正在进行，确认重新开始？")) {
                    this.restartGame();
                }
            } else {
                this.restartGame();
            }
        },
        // 重置游戏
        restartGame() {
            clearInterval(this.timer.autoMove);
            clearInterval(this.timer.timekeeper);
            this.moves = [];
            this.start = true;
            this.autoStart = false;
            this.setTower();
            var that = this;
            this.timer.timekeeper = setInterval(function(){
                that.second++;
            }, 1000);
        },
        // 设定层数
        setTower() {
            if (this.levels >= 2 && this.levels <= 10) {
                this.towers = [[], [], []]
                for (let i = 1; i <= this.levels; i++) {
                    this.towers[0].push(i)
                }
                this.selectedTowerIndex = null
                this.startLevels = this.levels;
                this.second = 0;
                this.steps = 0;
                this.minSteps = Math.pow(2, this.startLevels) - 1;
            } else {
                alert("层数在2-10");
            }
        },
        /** 
         * 核心，递归算出解法
         * levels 层数
         * a_index A柱索引 
         * b_index B柱索引
         * c_index C柱索引
         * moves 步骤集合
         */
        hanoi(levels, a_index, b_index, c_index, moves) {
            if (levels <= 0) {
                return moves
            }
            if (levels === 1) {
                moves.push([a_index, c_index]);
            } else {
                this.hanoi(levels - 1, a_index, c_index, b_index, moves);
                moves.push([a_index, c_index]);
                this.hanoi(levels - 1, b_index, a_index, c_index, moves);
            }
            return moves
        },
        // 开始自动移动
        autoMove() {
            if (this.start || this.autoStart) {
                if (confirm("游戏正在进行，确认重新开始？")) {
                    this.handle();
                }
            } else {
                this.handle();
            }
        },
        // 定时处理步骤集合
        handle() {
            clearInterval(this.timer.timekeeper);
            clearInterval(this.timer.autoMove);
            this.moves = [];
            this.start = false;
            this.autoStart = true;
            this.setTower();
            let moves = this.hanoi(this.startLevels, 0, 1, 2, []); //获取步数集
            let that = this;
            let i = 0;
            let len = moves.length;
            this.timer.autoMove = setInterval(function(){
                if (i < len) {
                    that.move(moves[i][0], moves[i][1])
                    that.moves.push(moves[i]); //记录步骤
                    this.steps++;
                    i++;
                } else {
                    that.autoStart = false;
                    clearInterval(that.timer.autoMove);
                }
            }, 1000);
        },
        // 移动
        move(a_index, b_index) {
            sourceTower = this.towers[a_index];
            destTower = this.towers[b_index];
            destTower.unshift(sourceTower.shift());
            this.scrollToBottom();
            this.selectedTowerIndex = null;
        },
        // 撤回到上一步
        recall() {
            if (this.start) {
                let len = this.moves.length;
                if (len > 0) {
                    this.move(this.moves[len - 1][1], this.moves[len - 1][0]);
                    this.moves.pop();
                    this.selectedTowerIndex = null;
                    this.steps--;
                }
            }
        },
        // 步骤滚动到底部
        scrollToBottom() {
            let step_moves = this.$refs.step_moves;
            let diff_height = step_moves.scrollHeight - step_moves.clientHeight;
            if (diff_height > 0) {
                step_moves.scrollTop = diff_height;
            }
        },
    }
})

最后更新： 2024年04月16日 00:51

原始链接： https://xiaguochang.github.io/posts/3d0f623f/