Conways game of life's game | AI game creator

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

No:48211

187

Conways game of life
Developer User18896｜Date and time 24/3/1 19:17:51
Build time 13.802 sec｜Game capacity 2.795KB｜

This is a simple implementation of Conway's Game of Life in HTML and JavaScript. The game will automatically start and you can click on the canvas to pause or resume the game. The cells will evolve based on the rules of the game. Enjoy playing!

→ 　

1　

1　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

```html
<!DOCTYPE html>
<html>
<head>
  <title>Conway's Game of Life</title>
</head>
<body>
  <canvas id="gameCanvas" width="300" height="300"></canvas>

<script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    
    const CELL_SIZE = 1;
    const GRID_WIDTH = canvas.width / CELL_SIZE;
    const GRID_HEIGHT = canvas.height / CELL_SIZE;
    
    let grid = createGrid();
    let running = false;
    
    function createGrid() {
      let newGrid = [];
      for (let i = 0; i < GRID_WIDTH; i++) {
        newGrid[i] = [];
        for (let j = 0; j < GRID_HEIGHT; j++) {
          newGrid[i][j] = Math.random() > 0.8 ? 1 : 0;
        }
      }
      return newGrid;
    }
    
    function draw() {
      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    
      for (let i = 0; i < GRID_WIDTH; i++) {
        for (let j = 0; j < GRID_HEIGHT; j++) {
          if (grid[i][j] === 1) {
            ctx.fillStyle = "black";
            ctx.fillRect(i * CELL_SIZE, j * CELL_SIZE, CELL_SIZE, CELL_SIZE);
          }
        }
      }
    }
    
    function update() {
      let newGrid = createGrid();
    
      for (let i = 0; i < GRID_WIDTH; i++) {
        for (let j = 0; j < GRID_HEIGHT; 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;
    }
    
    function countNeighbors(x, y) {
      let count = 0;
    
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          if (i === 0 && j === 0) continue;
    
          let newX = x + i;
          let newY = y + j;
    
          if (newX >= 0 && newX < GRID_WIDTH && newY >= 0 && newY < GRID_HEIGHT) {
            count += grid[newX][newY];
          }
        }
      }
    
      return count;
    }
    
    function loop() {
      if (running) {
        update();
        draw();
      }
      requestAnimationFrame(loop);
    }
    
    canvas.addEventListener("click", function(e) {
      running = !running;
    });
    
    loop();
  </script>
</body>
</html>
```
This is a simple implementation of Conway's Game of Life in HTML and JavaScript. The game will automatically start and you can click on the canvas to pause or resume the game. The cells will evolve based on the rules of the game. Enjoy playing!