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

No:1391

181

←

Prev Next

→

life game
Developer User3324｜Date and time 23/6/18 13:07:55
Build time 78.976 sec｜Game capacity 4.762KB｜

Script

ライフゲーム

セルをクリックすると生死が切り替わります。

世代: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>ライフゲーム</title>
  <style>
    body {
      text-align: center;
    }
    #board {
      border: 1px solid black;
      display: inline-block;
    }
    .cell {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin: -1px;
    }
  </style>
</head>

<body>
  <h1>ライフゲーム</h1>
  <p>セルをクリックすると生死が切り替わります。</p>
  <p id="generation">世代: 0</p>
  <div id="board"></div>
  <button id="start">開始</button>
  <button id="stop">停止</button>

// ボードの初期化
    const board = document.getElementById('board');
    let cells = [];
    for (let y = 0; y < height; y++) {
      let row = [];
      for (let x = 0; x < width; x++) {
        let cell = document.createElement('div');
        cell.classList.add('cell');
        cell.dataset.x = x;
        cell.dataset.y = y;
        cell.addEventListener('click', toggleCell);
        row.push(0);
        board.appendChild(cell);
      }
      cells.push(row);
    }

// セルをクリックしたときの処理
    function toggleCell() {
      let x = parseInt(this.dataset.x);
      let y = parseInt(this.dataset.y);
      cells[y][x] ^= 1;
      this.classList.toggle('alive');
    }

// ライフゲームのルールに従って次の状態を計算する
    function nextState() {
      let nextCells = JSON.parse(JSON.stringify(cells));
      for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
          let count = 0;
          for (let dy = -1; dy <= 1; dy++) {
            for (let dx = -1; dx <= 1; dx++) {
              if (dy == 0 && dx == 0) continue;
              let yy = y + dy;
              let xx = x + dx;
              if (xx < 0) xx = width - 1;
              if (xx >= width) xx = 0;
              if (yy < 0) yy = height - 1;
              if (yy >= height) yy = 0;
              count += cells[yy][xx];
            }
          }
          if (cells[y][x]) {
            if (count == 2 || count == 3) {
              nextCells[y][x] = 1;
            } else {
              nextCells[y][x] = 0;
            }
          } else {
            if (count == 3) {
              nextCells[y][x] = 1;
            } else {
              nextCells[y][x] = 0;
            }
          }
        }
      }
      cells = nextCells;
    }

// ボードの表示を更新する
    function updateBoard() {
      for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
          let cell = board.children[y * width + x];
          if (cells[y][x]) {
            cell.classList.add('alive');
          } else {
            cell.classList.remove('alive');
          }
        }
      }
    }

// 世代数を更新する
    function updateGeneration(generation) {
      document.getElementById('generation').textContent = `世代: ${generation}`;
    }

// 開始ボタンの処理
    document.getElementById('start').addEventListener('click', () => {
      let generation = 0;
      let intervalId = setInterval(() => {
        nextState();
        updateBoard();
        updateGeneration(++generation);
      }, 100);
      document.getElementById('stop').addEventListener('click', () => {
        clearInterval(intervalId);
      });
    });
  </script>
</body>

</html>