javascriptでハノイの塔を出力する。

Question

実現したいこと

• javascriptでハノイの塔を途中経過（どの円盤がどこからどこまで移動したか、移動した後の各棒に重なっている円盤の状態）をコンソール上に出力したい。

前提

初学者です。
javascriptでハノイの塔を動作させ、詳細をconsole.logで出力させています。
円盤が移動した際に、各棒に重なっている円盤の状態を出力させたいのですが、
方法がわからず、行き詰ってしまいました。
どのようなコードを追加すれば出力できるのか教えていただきたいです。

発生している問題・エラーメッセージ

該当のソースコード

function hanoi(n, a, b, c) {
  if (n>1) {
    hanoi(n-1,a,c,b);
    tower('1本目','2本目','3本目');
    console.log(`${n}番目の円盤: ${a} -> ${c}`);
    tower('1本目','2本目','3本目');
    hanoi(n-1,b,a,c);
  } else {
    console.log(`${n}番目の円盤: ${a} -> ${c}`);
  }
  
  function tower(x,y,z) {
    console.log(`${x}: `);
    console.log(`${y}: `);
    console.log(`${z}: `);    
  }
}

hanoi(3,'1本目','2本目','3本目');

試したこと

for文を使うなど、さまざまな方法を考えましたが知識が足りず実装できておりません。

補足情報（FW/ツールのバージョンなど）

AWSのcloud9で開発しております。

Answer 1

汎用的ではないですし冗長な部分も多いですが、質問者さんのコードになるべく沿う形で実装すると
下記のようになります。
(あくまで一例にすぎず、もっとシンプルで美しい方法もあると思います）

    let tower = {};
    tower['1本目'] = [3,2,1];
    tower['2本目'] = [];
    tower['3本目'] = [];

    function hanoi(n, a, b, c) {
      if (n > 1) {
        hanoi(n - 1, a, c, b);
        console.log(`${n}番目の円盤: ${a} -> ${c}`);
        tower[c].push(tower[a].pop())
        printStatus('1本目', '2本目', '3本目');
        hanoi(n - 1, b, a, c);
      } else {
        console.log(`${n}番目の円盤: ${a} -> ${c}`);
        tower[c].push(tower[a].pop());
        printStatus('1本目', '2本目', '3本目');
      }

      function printStatus(x, y, z) {
        console.log(`${x}: ${tower[x]}`);
        console.log(`${y}: ${tower[y]}`);
        console.log(`${z}: ${tower[z]}`);
      }
    }

    hanoi(3, '1本目', '2本目', '3本目');

考え方

各塔を tower で表し、円盤の保持状態を配列で表します。
初期状態は、1本目に、下から大きい順(上から小さい順）に3つの円盤が入っており、
2本目、3本目は何も入っていないので、下記のようになります。

    let tower = {};
    tower['1本目'] = [3,2,1];  // 数字が小さいほど、小さい円盤(常に大=>小の順番)
    tower['2本目'] = [];  // 空っぽ
    tower['3本目'] = [];  // 空っぽ

この状態で、たとえば 1本目の塔 から 3本目の塔に円盤を移すときは、
tower['1本目'] の配列の、最後尾にある「円盤1」を取り出して、
tower['3本目'] の配列の、最後尾に加える、
という考え方になります。
これをプログラムにすると下記になります。

 // 1本目の塔の一番上にある円盤を取り出す（＝配列の一番最後尾の要素を取り出す）
const takenDisk = tower['1本目'].pop(); 

 // 取り出した円盤を、3本目の塔の一番上に重ねる。（＝配列の最後尾にpush）
tower['3本目'].push(takenDisk); 

これをまとめると

tower['3本目'].push(tower['1本目'].pop());

となり、この1回目の操作が終わった後の状態は

    tower['1本目'] = [3,2]; 
    tower['2本目'] = [];  // 空っぽ
    tower['3本目'] = [1];

となります。

Comments

[str753]

コードのみならず解説までしていただきありがとうございます。
このコードでは２行目の
tower['１本目'] = [円盤の数];
と26行目の
hanoi(円盤の数,'1本目', '2本目', '3本目');
に円盤の数を逐一入力しなければいけない手間があるので、
自分自身でそちらを解決しようと思います。
本当にありがとうございました。

Answer 2

この回答のソースコードは、ChatGPT が出力したものを一部修正したものとなっています。
※ "A","B","C" → "１本目","２本目","３本目" と表示するよう修正しました。

javascriptでハノイの塔を途中経過（どの円盤がどこからどこまで移動したか、
移動した後の各棒に重なっている円盤の状態）をコンソール上に出力したい

コンソールは基本文字しか扱えないのでグラフィカルな表現には向いていません。
テキスト表現でよければ以下のような出力は可能です。絵文字を使用しています。
※ このコードは円盤3枚までしか対応していません。あしからず。。

function hanoi(n, from, to, using, result) {
  if (n === 0) {
    return;
  }
  hanoi(n - 1, from, using, to, result);
  result[to].push(result[from].pop());
  console.log(`円盤 ${n} を ${towers[from]} から ${towers[to]} に移動`);
  showTower(result);
  hanoi(n - 1, using, to, from, result);
}

function showTower(result) {
  console.log(`１本目: ${makeTower(result.A)}`);
  console.log(`２本目: ${makeTower(result.B)}`);
  console.log(`３本目: ${makeTower(result.C)}`);
  console.log("");
}

function makeTower(diskArray) {
    let towerString = "";
    for (let i = 0; i < 3; i++) {
        if (i < diskArray.length) {
            towerString += disks[diskArray[i]];
        } else {
            towerString += "━━";
        }
    }
    return towerString;
}

let towers = { A: "１本目", B: "２本目", C: "３本目" };
let disks = { 1: "▪", 2: "◾", 3: "⬛" };
let result = { A: [3, 2, 1], B: [], C: [] };
showTower(result);
hanoi(3, "A", "C", "B", result);

 １本目: ⬛◾▪
 ２本目: ━━━━━━
 ３本目: ━━━━━━
 
円盤 1 を １本目 から ３本目 に移動
 １本目: ⬛◾━━
 ２本目: ━━━━━━
 ３本目: ▪━━━━
 
円盤 2 を １本目 から ２本目 に移動
 １本目: ⬛━━━━
 ２本目: ◾━━━━
 ３本目: ▪━━━━
 
円盤 1 を ３本目 から ２本目 に移動
 １本目: ⬛━━━━
 ２本目: ◾▪━━
 ３本目: ━━━━━━
 
円盤 3 を １本目 から ３本目 に移動
 １本目: ━━━━━━
 ２本目: ◾▪━━
 ３本目: ⬛━━━━
 
円盤 1 を ２本目 から １本目 に移動
 １本目: ▪━━━━
 ２本目: ◾━━━━
 ３本目: ⬛━━━━
 
円盤 2 を ２本目 から ３本目 に移動
 １本目: ▪━━━━
 ２本目: ━━━━━━
 ３本目: ⬛◾━━
 
円盤 1 を １本目 から ３本目 に移動
 １本目: ━━━━━━
 ２本目: ━━━━━━
 ３本目: ⬛◾▪

Comments

[str753]

回答ありがとうございます！
ChatGPTでのコード出力は私には考えつかなかったのでとても助かります。
私も最初参考にした別言語のコードではグラフィカルな出力が多く、コンソール上にうまく表示できなかったので、文字だけの出力を目標にすれば円盤の数を増やして実行できる余地が生まれると考えています。
ありがとうございました！