Conway's game of life's game

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

No:25305

←

Prev Next

→

Conway's game of life
Developer User12373｜Date and time 23/11/20 10:33:17
Build time 106.473 sec｜Game capacity 4.339KB｜

Script

Sure! Here's a single HTML file implementation of Conway's Game of Life using JavaScript and pictograms for a smartphone operation:

This implementation creates a grid of cells using CSS Grid and allows you to toggle cells to make them alive or dead by clicking on them. It uses a preset shape to begin with, but you can modify the `initialize` function to add different shapes if desired. The game then automatically advances generations every 500 milliseconds by applying Conway's Game of Life rules. You can use this HTML file on your smartphone to play the game.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a single HTML file implementation of Conway's Game of Life using JavaScript and pictograms for a smartphone operation:

```html
<!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</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
        background-color: #fefefe;
      }
      
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, 40px);
        gap: 2px;
      }
      
      .cell {
        width: 40px;
        height: 40px;
        background-color: #ddd;
      }
      
      .cell.alive {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div class="grid"></div>

function createGrid() {
        const grid = document.querySelector('.grid');
        grid.style.gridTemplateRows = `repeat(${GRID_SIZE}, ${CELL_SIZE}px)`;

for (let i = 0; i < cells.length; i++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          cell.addEventListener('click', () => toggleCell(i));
          grid.appendChild(cell);
        }
      }

function initialize() {
        for (let i = 0; i < cells.length; i++) {
          cells[i] = 0;
        }

// Add initial shapes or customize as needed
        setCell(10, 10, 1);
        setCell(10, 11, 1);
        setCell(10, 12, 1);

drawGrid();
      }

function toggleCell(index) {
        cells[index] = cells[index] === 1 ? 0 : 1;
        drawGrid();     
      }

function setCell(row, col, value) {
        cells[row * GRID_SIZE + col] = value;
      }

function getCell(row, col) {
        if (row < 0 || row >= GRID_SIZE || col < 0 || col >= GRID_SIZE) {
          return 0;
        }
        return cells[row * GRID_SIZE + col];
      }

function startGame() {
        timerId = setInterval(computeGeneration, 500); // Adjust the interval as needed
      }

function stopGame() {
        clearInterval(timerId);
      }

createGrid();
      initialize();
      startGame();
    </script>
  </body>
</html>
```