Click here for free DL of the app version that can save data.

No:234

211

←

Prev Next

→

tower of Hanoi
Developer User2917｜Date and time 23/6/11 0:33:10
Build time 66.371 sec｜Game capacity 5.536KB｜

Script

ハノイの塔

3本の棒とn枚の円盤があり、円盤が小さくなるように合計が沿うように積まれています。1ターンで1枚の円盤を動かすことができます。途中で円盤が大きいものが小さいものの上になるようにすることはできません。

すべての円盤を最初の棒から最後の棒に移動することができますか？

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<html>
<head>
  <meta charset="UTF-8">
  <title>ハノイの塔</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    #disk1, #disk2, #disk3 {
      width: 100px;
      height: 30px;
      background-color: blue;
      margin: 5px;
      border-radius: 10px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.5em;
    }
    #tower1, #tower2, #tower3 {
      width: 10px;
      height: 120px;
      margin: 10px;
      background-color: gray;
      border-radius: 10px;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
    }
    button {
      margin: 20px;
      padding: 10px;
      font-size: 1.5em;
      border-radius: 5px;
      background-color: blue;
      color: white;
      cursor: pointer;
    }
    @media screen and (max-width: 480px) {
      #disk1, #disk2, #disk3 {
        width: 70px;
        height: 20px;
        font-size: 1em;
      }
      #tower1, #tower2, #tower3 {
        width: 5px;
        height: 80px;
        margin: 5px;
      }
      button {
        font-size: 1em;
        padding: 5px;
        margin: 10px;
      }
    }
  </style>
</head>
<body>
  <h1>ハノイの塔</h1>
  <p>3本の棒とn枚の円盤があり、円盤が小さくなるように合計が沿うように積まれています。1ターンで1枚の円盤を動かすことができます。途中で円盤が大きいものが小さいものの上になるようにすることはできません。</p>
  <p>すべての円盤を最初の棒から最後の棒に移動することができますか？</p>
  <div>
    <div id="tower1"></div>
    <div id="tower2"></div>
    <div id="tower3"></div>
  </div>
  <button id="button1">⬅</button>
  <button id="button2">⚫ やり直す</button>
  <button id="button3">➡</button>
  <script>
    let disks = 4; // 円盤の数
    let moves = 0; // 動かした回数
    let fromTower = null;
    let toTower = null;
    let diskBeingMoved = null;
    let towers = [[], [], []];
    let disk1 = document.createElement('div');
    let disk2 = document.createElement('div');
    let disk3 = document.createElement('div');
    let tower1 = document.getElementById('tower1');
    let tower2 = document.getElementById('tower2');
    let tower3 = document.getElementById('tower3');
    let button1 = document.getElementById('button1');
    let button2 = document.getElementById('button2');
    let button3 = document.getElementById('button3');
    let startDisk = disk3;
    let endTower = tower3;
    for (let i = 1; i <= disks; i++) {
      if (i === 1) {
        disk1.textContent = i;
        tower1.appendChild(disk1);
        towers[0].push(disk1);
      } else if (i === 2) {
        disk2.textContent = i;
        tower1.appendChild(disk2);
        towers[0].push(disk2);
        startDisk = disk2;
      } else {
        disk3.textContent = i;
        tower1.appendChild(disk3);
        towers[0].push(disk3);
        endTower = tower3;
      }
    }
    button1.addEventListener('click', moveLeft);
    button2.addEventListener('click', reset);
    button3.addEventListener('click', moveRight);
    function moveLeft() {
      if (!diskBeingMoved) {
        if (towers[0].length > 0) {
          fromTower = tower1;
          toTower = tower2;
          diskBeingMoved = towers[0].pop();
          fromTower.removeChild(diskBeingMoved);
          toTower.appendChild(diskBeingMoved);
        }
      } else {
        if (towers[0].length === 0 || parseInt(towers[0][towers[0].length - 1].textContent) > parseInt(diskBeingMoved.textContent)) {
          fromTower = tower2;
          toTower = tower1;
          fromTower.removeChild(diskBeingMoved);
          toTower.appendChild(diskBeingMoved);
          towers[0].push(diskBeingMoved);
          moves++;
          checkWinner();
        }
      }
    }
    function moveRight() {
      if (!diskBeingMoved) {
        if (towers[0].length > 0) {
          fromTower = tower1;
          toTower = tower3;
          diskBeingMoved = towers[0].pop();
          fromTower.removeChild(diskBeingMoved);
          toTower.appendChild(diskBeingMoved);
        }
      } else {
        if (towers[0].length === 0 || parseInt(towers[0][towers[0].length - 1].textContent) > parseInt(diskBeingMoved.textContent)) {
          fromTower = tower3;
          toTower = tower1;
          fromTower.removeChild(diskBeingMoved);
          toTower.appendChild(diskBeingMoved);
          towers[0].push(diskBeingMoved);
          moves++;
          checkWinner();
        }
      }
    }
    function checkWinner() {
      if (towers[2].length === disks) {
        alert(`おめでとうございます！\n${moves}回動かしました。`);
        reset();
      }
      diskBeingMoved = null;
      fromTower = null;
      toTower = null;
    }
    function reset() {
      moves = 0;
      towers = [[], [], []];
      tower1.innerHTML = '';
      tower2.innerHTML = '';
      tower3.innerHTML = '';
      for (let i = 1; i <= disks; i++) {
        if (i === 1) {
          disk1.textContent = i;
          tower1.appendChild(disk1);
          towers[0].push(disk1);
        } else if (i === 2) {
          disk2.textContent = i;
          tower1.appendChild(disk2);
          towers[0].push(disk2);
        } else {
          disk3.textContent = i;
          tower1.appendChild(disk3);
          towers[0].push(disk3);
        }
      }
    }
  </script>
</body>
</html>