Conway's game of life with custom cells's game | AI game creator

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

No:15737

43

Conway's game of life with custom cells
Developer User6855｜Date and time 23/9/11 6:52:47
Build time 13.442 sec｜Game capacity 3.625KB｜

Sure, here's an example of a simple implementation of Conway's Game of Life using JavaScript within a single HTML file. It can be played as a finished game on a smartphone.

This implementation creates a canvas where you can click on cells to toggle them on or off. Pressing the spacebar toggles the game's pause state. The cells evolve according to the rules of Conway's Game of Life: cells with exactly two or three neighbors survive, and dead cells with exactly three neighbors become alive. Feel free to modify and customize this implementation as needed!

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

Sure, here's an example of a simple implementation of Conway's Game of Life using JavaScript within a single HTML file. It can be played as a finished game on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Conway's Game of Life</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #333;
    }

.cell {
      width: 20px;
      height: 20px;
      background-color: #eee;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

<script>
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");
    const cellSize = 20;
    const numRows = Math.floor(window.innerHeight / cellSize);
    const numCols = Math.floor(window.innerWidth / cellSize);
    const grid = createGrid();
    let isPaused = true;
  
    canvas.width = numCols * cellSize;
    canvas.height = numRows * cellSize;
  
    function createGrid() {
      const grid = new Array(numRows);
      for (let i = 0; i < numRows; i++) {
        grid[i] = new Array(numCols).fill(false);
      }
      return grid;
    }
  
    function drawGrid() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      for (let row = 0; row < numRows; row++) {
        for (let col = 0; col < numCols; col++) {
          if (grid[row][col]) {
            context.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
          }
        }
      }
    }
  
    function updateGrid() {
      const newGrid = createGrid();
      for (let row = 0; row < numRows; row++) {
        for (let col = 0; col < numCols; col++) {
          const neighbors = countNeighbors(row, col);
          if (grid[row][col]) {
            if (neighbors === 2 || neighbors === 3) {
              newGrid[row][col] = true;
            }
          } else {
            if (neighbors === 3) {
              newGrid[row][col] = true;
            }
          }
        }
      }
      grid.splice(0, grid.length, ...newGrid);
    }
  
    function countNeighbors(row, col) {
      let count = 0;
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          if (i === 0 && j === 0) continue;
          const newRow = (row + i + numRows) % numRows;
          const newCol = (col + j + numCols) % numCols;
          if (grid[newRow][newCol]) {
            count++;
          }
        }
      }
      return count;
    }
  
    function toggleCell(event) {
      const rect = canvas.getBoundingClientRect();
      const clickX = Math.floor((event.clientX - rect.left) / cellSize);
      const clickY = Math.floor((event.clientY - rect.top) / cellSize);
      grid[clickY][clickX] = !grid[clickY][clickX];
      drawGrid();
    }
  
    function gameLoop() {
      if (!isPaused) {
        updateGrid();
        drawGrid();
      }
      requestAnimationFrame(gameLoop);
    }
  
    canvas.addEventListener("click", toggleCell);
    window.addEventListener("keydown", function(event) {
      if (event.key === "Space") {
        isPaused = !isPaused;
      }
    });
  
    gameLoop();
  </script>
</body>
</html>
```

This implementation creates a canvas where you can click on cells to toggle them on or off. Pressing the spacebar toggles the game's pause state. The cells evolve according to the rules of Conway's Game of Life: cells with exactly two or three neighbors survive, and dead cells with exactly three neighbors become alive.

Feel free to modify and customize this implementation as needed!