ピタゴラスイッチ's game

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

No:40916

←

Prev Next

→

ピタゴラスイッチ
Developer User18209｜Date and time 24/2/4 15:46:11
Build time 10.788 sec｜Game capacity 2.353KB｜

Script

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

上記のコードは、5x5のセルのボードを表示し、セルをクリックすると状態が反転するピタゴラスイッチのゲームです。セルの状態が反転するたびにボードが更新されます。ブラウザでこのHTMLファイルを開くと、ゲームが実行され、ボードが表示されます。セルをクリックすると、状態が反転し、ボードが更新されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

了解です。

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>ピタゴラスイッチ</title>
  <style>
    #board {
      margin: 20px;
    }

.cell {
      width: 40px;
      height: 40px;
      text-align: center;
      font-size: 32px;
      line-height: 40px;
      border: 1px solid black;
      display: inline-block;
      cursor: pointer;
      user-select: none;
    }
  </style>
</head>
<body>
  <div id="board"></div>

// ボードの初期化
    function initializeBoard() {
      for (let i = 0; i < boardSize; i++) {
        board[i] = [];
        for (let j = 0; j < boardSize; j++) {
          board[i][j] = 0;
        }
      }
    }

// セルの状態を反転させる
    function toggleCellState(x, y) {
      board[y][x] = board[y][x] === 0 ? 1 : 0;
    }

// ボードの表示を更新する
    function updateBoardView() {
      const boardElement = document.getElementById('board');
      boardElement.innerHTML = '';

for (let y = 0; y < boardSize; y++) {
        for (let x = 0; x < boardSize; x++) {
          const cellElement = document.createElement('div');
          cellElement.className = 'cell';
          cellElement.textContent = board[y][x] === 1 ? '◼️' : '◻️';

cellElement.addEventListener('click', () => {
            toggleCellState(x, y);
            updateBoardView();
          });

boardElement.appendChild(cellElement);
        }

boardElement.appendChild(document.createElement('br'));
      }
    }

// 初期化処理
    function initialize() {
      initializeBoard();
      updateBoardView();
    }

// ゲーム開始
    initialize();
  </script>
</body>
</html>
```

上記のコードは、5x5のセルのボードを表示し、セルをクリックすると状態が反転するピタゴラスイッチのゲームです。セルの状態が反転するたびにボードが更新されます。

ブラウザでこのHTMLファイルを開くと、ゲームが実行され、ボードが表示されます。セルをクリックすると、状態が反転し、ボードが更新されます。