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

No:48247

Conways game of life color cell wars touch the cel..ALL
Developer User18896｜Date and time 24/3/1 20:19:23
Build time 12.669 sec｜Game capacity 3.11KB｜

Script

Conway's Game of Life Color Cell Wars

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conway's Game of Life Color Cell Wars</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }

canvas {
      border: 1px solid black;
    }

button {
      margin: 10px;
      padding: 5px 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>Conway's Game of Life Color Cell Wars</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas><br>
  <div id="colorBlockCount"></div>
  <button onclick="startGame()">Play</button>
  <button onclick="stopGame()">Stop</button>
  <button onclick="refreshGame()">Refresh</button>

function createGrid(rows, cols) {
      let grid = new Array(rows).fill(null).map(() => new Array(cols).fill(0));
      return grid;
    }

canvas.addEventListener('click', function(event) {
      let rect = canvas.getBoundingClientRect();
      let x = Math.floor((event.clientX - rect.left) / cellSize);
      let y = Math.floor((event.clientY - rect.top) / cellSize);
      grid[y][x] = grid[y][x] === 0 ? 1 : 0;
      drawGrid();
    });

function startGame() {
      playing = true;
      playGame();
    }

function stopGame() {
      playing = false;
    }

function refreshGame() {
      grid = createGrid(rows, cols);
      drawGrid();
    }

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