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

No:6063

601

←

Prev Next

→

Pythagorean switch
Developer もちきなこ｜Date and time 23/7/1 16:05:39
Build time 30.029 sec｜Game capacity 2.659KB｜

Script

以下は、ピタゴラスイッチというゲームをHTMLファイルとして実装し、JavaScriptを使用して処理を実行する例です。この例では、ブラウザ上でゲームとして遊ぶことができます。

ピタゴラスイッチ

この例では、3x3のスイッチをクリックしてオン/オフを切り替えることができます。スイッチがオンの状態では、黄色の背景色が表示されます。ゲーム状態は`gameData`という変数で管理され、クリックイベントによって変更されます。`renderGame`関数によってゲーム状態が画面に反映されます。この例は、ブラウザ上で実行可能なピタゴラスイッチの部分的なゲーム化です。これをHTMLファイルとして保存し、Webブラウザで開くことで試してみてください。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>ピタゴラスイッチ</title>
  <style>
    .switch {
      display: inline-block;
      background: gray;
      width: 50px;
      height: 50px;
      margin: 5px;
    }
    .on {
      background: yellow;
    }
  </style>
</head>
<body>
  <h1>ピタゴラスイッチ</h1>
  <div id="game"></div>

// ゲームを初期化する関数
    function initGame() {
      var gameElement = document.getElementById('game');

// ゲームウィンドウの作成
      for (var i = 0; i < 3; i++) {
        var row = document.createElement('div');
        for (var j = 0; j < 3; j++) {
          var cell = document.createElement('div');
          cell.className = 'switch';
          cell.onclick = toggleSwitch.bind(null, i, j);
          row.appendChild(cell);
        }
        gameElement.appendChild(row);
      }

// ゲーム状態の表示
      renderGame();
    }

// ゲーム状態を表示する関数
    function renderGame() {
      var switches = document.getElementsByClassName('switch');
      for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
          var switchIndex = i * 3 + j;
          if (gameData[i][j] === 1) {
            switches[switchIndex].classList.add('on');
          } else {
            switches[switchIndex].classList.remove('on');
          }
        }
      }
    }

// スイッチのオン/オフを切り替える関数
    function toggleSwitch(i, j) {
      gameData[i][j] = 1 - gameData[i][j]; // 0なら1、1なら0に切り替える
      renderGame();
    }

// ゲームの初期化
    initGame();
  </script>
</body>
</html>
```

この例では、3x3のスイッチをクリックしてオン/オフを切り替えることができます。スイッチがオンの状態では、黄色の背景色が表示されます。ゲーム状態は`gameData`という変数で管理され、クリックイベントによって変更されます。`renderGame`関数によってゲーム状態が画面に反映されます。

この例は、ブラウザ上で実行可能なピタゴラスイッチの部分的なゲーム化です。これをHTMLファイルとして保存し、Webブラウザで開くことで試してみてください。