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

No:9135

110

←

Prev Next

→

Pythagorean switch
Developer User4288｜Date and time 23/7/21 17:04:22
Build time 29.323 sec｜Game capacity 2.498KB｜

Script

了解しました。以下にピタゴラスイッチのゲームを実装したサンプルコードを示します。

ピタゴラスイッチ

このサンプルコードでは、9つのスイッチを持ったピタゴラスイッチのゲームを実装しています。各スイッチをクリックすると、そのスイッチを中心にピタゴラスイッチの連鎖が発生し、周囲のスイッチの状態が反転します。スイッチの状態はクラス名を操作することで表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解しました。以下にピタゴラスイッチのゲームを実装したサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ピタゴラスイッチ</title>
  <style>
    body {
      text-align: center;
      background-color: #f5f5f5;
    }
    
    .switch {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: white;
      border: 2px solid #333;
      margin: 5px;
      font-size: 20px;
      cursor: pointer;
    }
    
    .switch.on {
      background-color: #333;
      color: white;
    }
  </style>
</head>
<body>
  <h1>ピタゴラスイッチ</h1>

for (let i = 0; i < 9; i++) {
      const switchElement = document.createElement('div');
      switchElement.classList.add('switch');
      switchElement.textContent = i + 1;

switchElement.addEventListener('click', function() {
        // スイッチの状態をトグル
        switchStatus[i] = !switchStatus[i];
        switchElement.classList.toggle('on');

// ピタゴラスイッチの連鎖を実行
        executeCascade(i);
      });

gameBoard.appendChild(switchElement);
    }

// ピタゴラスイッチの連鎖を実行する関数
    function executeCascade(index) {
      const cascadeMap = {
        0: [1, 3],
        1: [0, 2, 4],
        2: [1, 5],
        3: [0, 4, 6],
        4: [1, 3, 5, 7],
        5: [2, 4, 8],
        6: [3, 7],
        7: [4, 6, 8],
        8: [5, 7]
      };

const cascadeTargets = cascadeMap[index];

for (const target of cascadeTargets) {
        // スイッチの状態をトグル
        switchStatus[target] = !switchStatus[target];
        const targetSwitchElement = document.querySelector(`.switch:nth-child(${target+1})`);
        targetSwitchElement.classList.toggle('on');
      }
    }

</script>
</body>
</html>
```