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

No:10107

←

Prev Next

→

Pythagorean switch
Developer User4479｜Date and time 23/7/29 2:55:06
Build time 21.428 sec｜Game capacity 2.971KB｜

Script

了解です。以下にピタゴラスイッチのゲームを実装したHTMLファイルを示します。

ピタゴラスイッチ

このHTMLファイルをブラウザで開くと、ピタゴラスイッチのゲームが表示されます。スタートボタンをクリックするとゲームが開始され、セルをクリックするとセルが赤くなります。リセットボタンをクリックするとゲームがリセットされます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にピタゴラスイッチのゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ピタゴラスイッチ</title>
  <style>
    #start-button,
    #reset-button {
      display: block;
      width: 100px;
      margin: 10px auto;
      padding: 10px;
      background-color: #ccc;
      text-align: center;
      cursor: pointer;
    }
    
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 240px;
      height: 240px;
      margin: 0 auto;
      border: 1px solid #000;
    }
    
    .cell {
      width: 80px;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      cursor: pointer;
    }
    
    .cell.active {
      background-color: #f00;
    }
  </style>
</head>
<body>
  <h1>ピタゴラスイッチ</h1>
  <div id="game-board"></div>
  <button id="start-button">スタート</button>
  <button id="reset-button">リセット</button>
  
  
  <script>
    // ゲーム状態を表す変数
    let isPlaying = false;
    
    // ゲームボードのセル数（横×縦）
    const rowCount = 3;
    const columnCount = 3;
    
    // ゲームボードのセルをクリックしたときの処理
    function handleClick(event) {
      if (isPlaying && !event.target.classList.contains('active')) {
        event.target.classList.add('active');
      }
    }
    
    // ゲームをスタートする処理
    function startGame() {
      isPlaying = true;
      
      // ゲームボードを生成する
      const gameBoard = document.getElementById('game-board');
      gameBoard.innerHTML = '';
      for (let i = 0; i < rowCount * columnCount; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.addEventListener('click', handleClick);
        gameBoard.appendChild(cell);
      }
    }
    
    // ゲームをリセットする処理
    function resetGame() {
      isPlaying = false;
      
      // ゲームボードのセルをリセットする
      const cells = document.getElementsByClassName('cell');
      for (let i = 0; i < cells.length; i++) {
        cells[i].classList.remove('active');
      }
    }
    
    // スタートボタンのクリックイベント
    document.getElementById('start-button').addEventListener('click', startGame);
    
    // リセットボタンのクリックイベント
    document.getElementById('reset-button').addEventListener('click', resetGame);
  </script>
</body>
</html>
```