当前位置：首页 > JavaScript

js实现汉诺塔移动过程

2026-04-05 04:02:37JavaScript

汉诺塔问题简介

汉诺塔（Tower of Hanoi）是一个经典的递归问题，目标是将一组大小不同的盘子从一根柱子移动到另一根柱子，遵循以下规则：

每次只能移动一个盘子。
任何时候大盘子不能放在小盘子上面。

递归实现思路

递归是解决汉诺塔问题的核心方法。基本思路是：

将问题分解为子问题：将 n 个盘子从柱子 A 移动到柱子 C，可以分解为：
1. 将前 n-1 个盘子从 A 移动到 B（借助 C）。
2. 将第 n 个盘子从 A 移动到 C。
3. 将 n-1 个盘子从 B 移动到 C（借助 A）。

JavaScript 实现代码

function hanoi(n, source, target, auxiliary) {
  if (n === 1) {
    console.log(`Move disk 1 from ${source} to ${target}`);
    return;
  }
  hanoi(n - 1, source, auxiliary, target);
  console.log(`Move disk ${n} from ${source} to ${target}`);
  hanoi(n - 1, auxiliary, target, source);
}

// 示例：移动 3 个盘子，从柱子 A 到柱子 C，借助柱子 B
hanoi(3, 'A', 'C', 'B');

代码说明

参数说明：
- n：盘子的数量。
- source：起始柱子（如 'A'）。
- target：目标柱子（如 'C'）。
- auxiliary：辅助柱子（如 'B'）。
递归终止条件：
- 当 n === 1 时，直接将盘子从 source 移动到 target。
递归步骤：
- 将 n-1 个盘子从 source 移动到 auxiliary（借助 target）。
- 将第 n 个盘子从 source 移动到 target。
- 将 n-1 个盘子从 auxiliary 移动到 target（借助 source）。

输出示例

对于 hanoi(3, 'A', 'C', 'B')，输出如下：

Move disk 1 from A to C
Move disk 2 from A to B
Move disk 1 from C to B
Move disk 3 from A to C
Move disk 1 from B to A
Move disk 2 from B to C
Move disk 1 from A to C

可视化实现（可选）

如果需要动态展示移动过程，可以结合 HTML 和 CSS 实现可视化。以下是一个简单的示例框架：

<div id="towers">
  <div class="tower" id="A"></div>
  <div class="tower" id="B"></div>
  <div class="tower" id="C"></div>
</div>
<script>
  // 初始化盘子和柱子
  function init(n) {
    const towerA = document.getElementById('A');
    for (let i = n; i >= 1; i--) {
      const disk = document.createElement('div');
      disk.className = 'disk';
      disk.style.width = `${i * 20}px`;
      towerA.appendChild(disk);
    }
  }

  // 调用 hanoi 函数时，更新 DOM
  init(3);
</script>