Conway’s Game Of Life's game

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

No:17859

←

Prev Next

→

Conway’s Game Of Life
Developer User3943｜Date and time 23/9/24 23:34:29
Build time 52.636 sec｜Game capacity 4.878KB｜

Script

Sure, here is an example of a single HTML file that implements Conway's Game of Life as a playable game using JavaScript:

Save the above code into a `.html` file and open it using any web browser, you can then click on the cells to toggle their state and use the "Start" button to start the game. The game will apply the rules of Conway's Game of Life and animate the grid accordingly. You can use the "Pause/Resume" button to control the game's state and the "Reset" button to reset the game.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

Sure, here is an example of a single HTML file that implements Conway's Game of Life as a playable game using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Conway's Game of Life</title>
  <style>
    .cell {
      width: 10px;
      height: 10px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <script>
    // Game configuration
    const rows = 30;
    const cols = 40;
    const cellSize = 10;
    const interval = 100; // milliseconds

// Initial grid state
    let grid = createGrid();
    let running = false;
    let intervalId;

// Initialize the grid with random cells
    function createGrid() {
      const grid = [];
      for (let i = 0; i < rows; i++) {
        grid.push([]);
        for (let j = 0; j < cols; j++) {
          grid[i][j] = Math.random() > 0.8 ? 1 : 0;
        }
      }
      return grid;
    }

// Render the grid
    function renderGrid() {
      const container = document.getElementById('grid-container');
      container.innerHTML = '';

for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          const cell = document.createElement('div');
          cell.className = grid[i][j] ? 'cell alive' : 'cell dead';
          cell.style.width = cellSize + 'px';
          cell.style.height = cellSize + 'px';
          container.appendChild(cell);
        }
      }

// Add click event listeners to toggle cell state
      const cells = document.getElementsByClassName('cell');
      for (let i = 0; i < cells.length; i++) {
        cells[i].addEventListener('click', function () {
          const row = Math.floor(i / cols);
          const col = i % cols;
          grid[row][col] = !grid[row][col];
          renderGrid();
        });
      }
    }

// Update the grid state based on rules of the game
    function updateGrid() {
      const newGrid = [];

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

grid = newGrid;
      renderGrid();
    }

// Count the number of live neighbors for a given cell
    function countNeighbors(row, col) {
      let count = 0;
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          const neighborRow = (row + i + rows) % rows;
          const neighborCol = (col + j + cols) % cols;
          count += grid[neighborRow][neighborCol];
        }
      }
      count -= grid[row][col];
      return count;
    }

// Start the game
    function startGame() {
      if (!running) {
        intervalId = setInterval(updateGrid, interval);
        running = true;
        document.getElementById('start-btn').innerText = 'Pause';
      } else {
        clearInterval(intervalId);
        running = false;
        document.getElementById('start-btn').innerText = 'Resume';
      }
    }

// Reset the game
    function resetGame() {
      clearInterval(intervalId);
      grid = createGrid();
      renderGrid();
      running = false;
      document.getElementById('start-btn').innerText = 'Start';
    }

// Render the grid on page load
    document.addEventListener('DOMContentLoaded', function () {
      const container = document.createElement('div');
      container.id = 'grid-container';
      container.style.width = cols * cellSize + 'px';
      container.style.height = rows * cellSize + 'px';
      container.style.marginTop = '20px';
      container.style.border = '1px solid #ccc';
      container.style.overflow = 'hidden';
      document.body.appendChild(container);

renderGrid();

const btnContainer = document.createElement('div');
      btnContainer.style.marginTop = '20px';
      btnContainer.style.textAlign = 'center';
      document.body.appendChild(btnContainer);

const startBtn = document.createElement('button');
      startBtn.id = 'start-btn';
      startBtn.innerText = 'Start';
      startBtn.style.marginRight = '10px';
      startBtn.addEventListener('click', startGame);
      btnContainer.appendChild(startBtn);

const resetBtn = document.createElement('button');
      resetBtn.innerText = 'Reset';
      resetBtn.addEventListener('click', resetGame);
      btnContainer.appendChild(resetBtn);
    });
  </script>
</body>
</html>
```

Save the above code into a `.html` file and open it using any web browser, you can then click on the cells to toggle their state and use the "Start" button to start the game. The game will apply the rules of Conway's Game of Life and animate the grid accordingly. You can use the "Pause/Resume" button to control the game's state and the "Reset" button to reset the game.