一个七层的汉诺塔，对应彩虹七色，选中每层来移动到对应塔柱。
javascript"><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>彩虹汉诺塔游戏</title>
<style>
#game-container{display: flex; /* 使用Flexbox布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 设置容器高度为视口高度 */
margin: 0; /* 移除默认外边距 */}
.pillar {
display: inline-block;
width: 100px; /* 设置柱子的宽度 */
height: 300px; /* 设置柱子的高度 */
background-color: #bcd; /* 设置柱子的背景颜色 */
margin: 0 10px; /* 设置柱子之间的间隔 */
display: flex; /* 使用Flexbox布局，使盘子垂直堆叠 */
flex-direction: column; /* 盘子垂直堆叠 */
justify-content: flex-end; /* 盘子底部对齐 */
border: 2px solid black;
position: relative;
cursor: pointer;
}
.disk {
width: 80px;
height: 20px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
cursor: pointer;
}
.selected {
opacity: 0.5;
}
</style>
</head>
<body>
<div id="game-container">
<div id="pillarA" class="pillar"></div>
<div id="pillarB" class="pillar"></div>
<div id="pillarC" class="pillar"></div>
<div id="moves">0</div> <!-- 显示移动次数的元素 -->
</div>
<script>
var selectedDisk = null;
var moves = 0;
var disks = [10,20,30,40,50,60,70]; // 盘子宽度
var disksColor = ['#F00','#FF7F00','#FF0','#0F0','#0FF','#00F','#8B00FF']; // 七色彩虹
var n = disks.length;
function init() {
disks.forEach(function(width, index) {
var disk = document.createElement('div');
disk.className = 'disk';
disk.style.width = width + 'px';
disk.style.backgroundColor = disksColor[index];
disk.setAttribute('data-size', String(index + 1)); // 设置data-size属性，从"1"开始
disk.style.bottom = (disks.length - disks.indexOf(width)) * 20 + 'px';
document.getElementById('pillarA').appendChild(disk);
disk.addEventListener('click', diskClick);
});
var pillars = document.querySelectorAll('.pillar');
pillars.forEach(function(pillar) {
pillar.addEventListener('click', pillarClick);
});
}
function diskClick(event) {
var disk = event.target;
var pillar = disk.parentElement; // 获取盘子的父元素，即柱子
var disksOnPillar = Array.from(pillar.children); // 获取柱子上的所有盘子
// 找到柱子上的最顶层盘子（尺寸最小的）
var topDisk = null;
var minSize = Number.MAX_SAFE_INTEGER;
disksOnPillar.forEach(function(disk) {
var size = parseInt(disk.getAttribute('data-size'), 10);
if (size < minSize) {
minSize = size;
topDisk = disk;
}
});
// 检查点击的盘子是否是最顶层的盘子
if (disk === topDisk) {
if (!disk.classList.contains('selected')) {
// 如果没有选中的盘子，则选中当前点击的盘子
if (selectedDisk) {
selectedDisk.classList.remove('selected');
}
selectedDisk = disk;
disk.classList.add('selected');
} else {
// 如果点击的是已经选中的盘子，则取消选中
disk.classList.remove('selected');
selectedDisk = null;
}
} else {
// 如果点击的不是最顶层的盘子，则不做任何操作
console.log("只能移动最顶层的盘子");
}
}
function pillarClick(event) {
if (!selectedDisk) return; // 如果没有选中的盘子，则不进行任何操作
var targetPillar = event.target;
// 确保目标是一个柱子并且不是当前选中盘子的父元素
if (targetPillar.classList.contains('pillar') && selectedDisk.parentElement !== targetPillar) {
var lastDisk = targetPillar.lastElementChild;
// 检查移动是否合法（目标柱子上没有盘子，或者最顶端的盘子比选中的盘子大）
if (!lastDisk || parseInt(lastDisk.style.width) > parseInt(selectedDisk.style.width)) {
// 移动盘子到目标柱子
targetPillar.appendChild(selectedDisk);
// 更新盘子的位置
selectedDisk.style.bottom = (targetPillar.childElementCount * 20) + 'px';
selectedDisk.classList.remove('selected');
selectedDisk = null;
moves++;
document.getElementById('moves').innerText = moves;
checkWin();
}
}
}
function checkWin() {
if (document.getElementById('pillarC').childElementCount === n) {
setTimeout(function() {alert('恭喜完成！移动步数：' + moves + '，最优步数：' + (Math.pow(2, n)-1));}, 100);
}
}
init();
</script>
</body>
</html>
