Conways game of life in the game of life's game

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

No:50829

←

Prev Next

→

Conways game of life in the game of life
Developer User18896｜Date and time 24/3/9 22:14:15
Build time 14.048 sec｜Game capacity 3.077KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }

.cell {
    width: 20px;
    height: 20px;
    border: 1px solid black;
  }
</style>
</head>
<body>
<script>
  const rows = 30;
  const cols = 30;
  let grid = new Array(rows).fill(null).map(() => new Array(cols).fill(0));
  let running = false;

function setup() {
    const container = document.createElement('div');
    container.style.display = 'grid';
    container.style.gridTemplateColumns = `repeat(${cols}, 20px)`;

for (let i = 0; i < rows; i++) {
      for (let j = 0; j < cols; j++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.dataset.row = i;
        cell.dataset.col = j;
        container.appendChild(cell);
      }
    }

document.body.appendChild(container);
    container.addEventListener('click', toggleCell);
    document.getElementById('run').addEventListener('click', run);
  }

function toggleCell(event) {
    const cell = event.target;
    const row = parseInt(cell.dataset.row);
    const col = parseInt(cell.dataset.col);
    grid[row][col] = grid[row][col] ? 0 : 1;
    updateGrid();
  }

function update() {
    if (!running) return;

const newGrid = new Array(rows).fill(null).map(() => new Array(cols).fill(0));

for (let i = 0; i < rows; i++) {
      for (let j = 0; j < cols; j++) {
        const neighbors = countNeighbors(i, j);
        if ((grid[i][j] && neighbors === 2) || neighbors === 3) {
          newGrid[i][j] = 1;
        }
      }
    }

grid = newGrid;
    updateGrid();

requestAnimationFrame(update);
  }

function countNeighbors(row, col) {
    let count = 0;
    const directions = [
      [-1, -1], [-1, 0], [-1, 1],
      [0, -1],           [0, 1],
      [1, -1],  [1, 0],  [1, 1]
    ];

for (const [dx, dy] of directions) {
      const newRow = row + dx;
      const newCol = col + dy;
      if (newRow >= 0 && newRow < rows && newCol >= 0 && newCol < cols && grid[newRow][newCol]) {
        count++;
      }
    }

return count;
  }

function updateGrid() {
    const cells = document.getElementsByClassName('cell');

for (let i = 0; i < rows; i++) {
      for (let j = 0; j < cols; j++) {
        const index = i * cols + j;
        cells[index].style.backgroundColor = grid[i][j] ? 'black' : 'white';
      }
    }
  }

setup();
</script>
<button id="run">Run</button>
</body>
</html>
```