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

No:15768

125

←

Prev Next

→

Conway's game of life. with a stop button and a cl..ALL
Developer User6855｜Date and time 23/9/11 10:53:17
Build time 23.214 sec｜Game capacity 4.503KB｜

Script

Sure, here's an implementation of Conway's Game of Life as a single HTML file using JavaScript:

Conway's Game of Life

In this implementation, you can click on the cells to toggle their state (alive or dead), and use the "Start", "Stop", and "Clear" buttons to control the game. The game grid is initially empty, so you need to activate cells by clicking on them. Once the game has started, it will update the grid automatically based on Conway's Game of Life rules, using the specified interval (in milliseconds). The "Stop" button can be used to pause the game, and the "Clear" button will reset the grid to its initial state. The visual representation of the grid is achieved using HTML div elements with appropriate styling.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure, here's an implementation of Conway's Game of Life as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Conway's Game of Life</title>
  <style>
    .cell {
      width: 20px;
      height: 20px;
      border: 1px solid #ccc;
      display: inline-block;
    }
  </style>
</head>
<body>
  <h1>Conway's Game of Life</h1>
  <div id="game"></div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="clear">Clear</button>
  
  <script>
    // Game configuration
    const rows = 30;
    const cols = 30;
    const cellSize = 20;
    const interval = 500; // milliseconds
    let isGameRunning = false;
    let timerId;
  
    // Create an empty grid
    let grid = new Array(rows);
    for (let i = 0; i < rows; i++) {
      grid[i] = new Array(cols).fill(false);
    }
  
    // Function to render the grid
    function renderGrid() {
      const gameContainer = document.getElementById('game');
      gameContainer.innerHTML = '';
  
      for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          cell.style.width = cellSize + 'px';
          cell.style.height = cellSize + 'px';
          cell.style.backgroundColor = grid[i][j] ? '#000' : '#fff';
  
          cell.addEventListener('click', () => {
            grid[i][j] = !grid[i][j];
            cell.style.backgroundColor = grid[i][j] ? '#000' : '#fff';
          });
  
          gameContainer.appendChild(cell);
        }
        gameContainer.appendChild(document.createElement('br'));
      }
    }
  
    // Function to update the grid based on the game rules
    function updateGrid() {
      const newGrid = new Array(rows);
      for (let i = 0; i < rows; i++) {
        newGrid[i] = new Array(cols).fill(false);
      }
  
      for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          const aliveNeighbors = countAliveNeighbors(i, j);
  
          if (grid[i][j]) {
            if (aliveNeighbors === 2 || aliveNeighbors === 3) {
              newGrid[i][j] = true;
            }
          } else {
            if (aliveNeighbors === 3) {
              newGrid[i][j] = true;
            }
          }
        }
      }
  
      grid = newGrid;
      renderGrid();
    }
  
    // Function to count the number of alive neighbors for a given cell
    function countAliveNeighbors(row, col) {
      let count = 0;
  
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          const newRow = row + i;
          const newCol = col + j;
  
          if (
            newRow >= 0 &&
            newRow < rows &&
            newCol >= 0 &&
            newCol < cols &&
            !(i === 0 && j === 0) &&
            grid[newRow][newCol]
          ) {
            count++;
          }
        }
      }
  
      return count;
    }
  
    // Function to start the game
    function startGame() {
      isGameRunning = true;
      timerId = setInterval(updateGrid, interval);
      document.getElementById('start').disabled = true;
    }
  
    // Function to stop the game
    function stopGame() {
      isGameRunning = false;
      clearInterval(timerId);
      document.getElementById('start').disabled = false;
    }
  
    // Function to clear the grid
    function clearGrid() {
      grid = new Array(rows);
      for (let i = 0; i < rows; i++) {
        grid[i] = new Array(cols).fill(false);
      }
      renderGrid();
    }
  
    // Event listeners for the buttons
    document.getElementById('start').addEventListener('click', startGame);
    document.getElementById('stop').addEventListener('click', stopGame);
    document.getElementById('clear').addEventListener('click', clearGrid);
  
    // Initial rendering of the grid
    renderGrid();
  </script>
</body>
</html>
```