Conways game of life toch cell turn it on or off.play ,stop,refresh,clear button's game | AI game creator

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

No:48677

100

Conways game of life toch cell turn it on or off.p..ALL
Developer User18896｜Date and time 24/3/2 20:06:53
Build time 9.873 sec｜Game capacity 2.448KB｜

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
<title>Conway's Game of Life</title>
<style>
.cell {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="grid"></div>
<button onclick="startGame()">Play</button>
<button onclick="stopGame()">Stop</button>
<button onclick="refreshGrid()">Refresh</button>
<button onclick="clearGrid()">Clear</button>

<script>
let gridWidth = 30;
let gridHeight = 20;
let grid = createGrid();

function createGrid() {
  let newGrid = [];
  for (let i = 0; i < gridHeight; i++) {
    newGrid[i] = [];
    for (let j = 0; j < gridWidth; j++) {
      newGrid[i][j] = Math.round(Math.random());
    }
  }
  return newGrid;
}

function drawGrid() {
  let gridElement = document.getElementById('grid');
  gridElement.innerHTML = '';
  for (let i = 0; i < gridHeight; i++) {
    for (let j = 0; j < gridWidth; j++) {
      let cell = document.createElement('div');
      cell.className = grid[i][j] ? 'cell live' : 'cell';
      cell.onclick = function() {
        grid[i][j] = grid[i][j] ? 0 : 1;
        drawGrid();
      };
      gridElement.appendChild(cell);
    }
    gridElement.appendChild(document.createElement('br'));
  }
}

function startGame() {
  gameInterval = setInterval(updateGrid, 500);
}

function stopGame() {
  clearInterval(gameInterval);
}

function updateGrid() {
  let newGrid = [];
  for (let i = 0; i < gridHeight; i++) {
    newGrid[i] = [];
    for (let j = 0; j < gridWidth; j++) {
      let neighbors = countNeighbors(i, j);
      if (grid[i][j] === 1) {
        if (neighbors < 2 || neighbors > 3) {
          newGrid[i][j] = 0;
        } else {
          newGrid[i][j] = 1;
        }
      } else {
        if (neighbors === 3) {
          newGrid[i][j] = 1;
        } else {
          newGrid[i][j] = 0;
        }
      }
    }
  }
  grid = newGrid;
  drawGrid();
}

function countNeighbors(x, y) {
  let sum = 0;
  for (let i = -1; i <= 1; i++) {
    for (let j = -1; j <= 1; j++) {
      if (i !== 0 || j !== 0) {
        let row = (x + i + gridHeight) % gridHeight;
        let col = (y + j + gridWidth) % gridWidth;
        sum += grid[row][col];
      }
    }
  }
  return sum;
}

function refreshGrid() {
  grid = createGrid();
  drawGrid();
}

function clearGrid() {
  grid = Array.from({ length: gridHeight }, () => Array.from({ length: gridWidth }, () => 0));
  drawGrid();
}

let gameInterval;

drawGrid();
</script>
</body>
</html>