AI game creator

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

No:32002

←

Prev Next

→

Game of life
Developer User15234｜Date and time 23/12/29 5:07:33
Build time 36.415 sec｜Game capacity 4.707KB｜

Script

Sure! Here's a single HTML file implementation of the famous "Game of Life" using JavaScript and pictograms for smartphone operation. Just open the file in a web browser, and you'll be able to play the game:

Open a text editor, copy the above code to a new file with an `.html` extension (e.g., `game-of-life.html`), save it, and then open the file in a web browser on your smartphone. You'll be able to play the Game of Life by tapping on the grid's cells to toggle their state. Once you're ready, press Enter or swipe right to start/stop the simulation. Have fun!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Game of Life</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #efefef;
    }

#grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(12, 1fr);
      gap: 1px;
      border: 1px solid #ccc;
      background: #fff;
      touch-action: none;
    }

.cell {
      background: #ccc;
    }

.cell.alive {
      background: #333;
    }
  </style>
</head>
<body>
  <div id="grid"></div>

/* --- Game Variables --- */
    let grid = createGrid();
    let intervalId = null;

/* --- Helper Functions --- */
    function createGrid() {
      const gridElement = document.getElementById('grid');
      const cellSize = `${100 / COLS}%`;

gridElement.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
      gridElement.style.gridTemplateRows = `repeat(${ROWS}, 1fr)`;

let grid = [];

for (let row = 0; row < ROWS; row++) {
        let rowElements = [];
        for (let col = 0; col < COLS; col++) {
          let cell = document.createElement('div');
          cell.className = 'cell';
          cell.style.width = cellSize;
          cell.style.height = cellSize;
          cell.addEventListener('click', toggleCellState);
          cell.addEventListener('touchstart', toggleCellState);
          gridElement.appendChild(cell);
          rowElements.push(cell);
        }
        grid.push(rowElements);
      }

return grid;
    }

function toggleCellState(event) {
      event.preventDefault();
      event.stopPropagation();
      
      const cell = event.target;
      cell.classList.toggle('alive');
    }

function updateCellStates() {
      const newGrid = [];

for (let row = 0; row < ROWS; row++) {
        const newRow = [];
        for (let col = 0; col < COLS; col++) {
          const cell = grid[row][col];
          const isAlive = cell.classList.contains('alive');
          const liveNeighbors = countLiveNeighbors(row, col);

if (isAlive && (liveNeighbors < 2 || liveNeighbors > 3)) {
            cell.classList.remove('alive');
          } else if (!isAlive && liveNeighbors === 3) {
            cell.classList.add('alive');
          }

newRow.push(cell);
        }

newGrid.push(newRow);
      }

grid = newGrid;
    }

function countLiveNeighbors(row, col) {
      let count = 0;

const neighbors = [
        [row - 1, col - 1], [row - 1, col], [row - 1, col + 1],
        [row, col - 1], [row, col + 1],
        [row + 1, col - 1], [row + 1, col], [row + 1, col + 1]
      ];

for (const [nRow, nCol] of neighbors) {
        if (nRow >= 0 && nRow < ROWS && nCol >= 0 && nCol < COLS) {
          const neighbor = grid[nRow][nCol];
          if (neighbor.classList.contains('alive')) {
            count++;
          }
        }
      }

return count;
    }

function startGame() {
      intervalId = setInterval(updateCellStates, 1000);
    }

function stopGame() {
      clearInterval(intervalId);
      intervalId = null;
    }

/* --- Game Controls --- */
    window.addEventListener('keydown', handleKeyPress);
    window.addEventListener('touchstart', handleTouchStart);
    window.addEventListener('touchend', handleTouchEnd);

function handleKeyPress(event) {
      if (event.key === 'Enter') {
        if (intervalId) {
          stopGame();
        } else {
          startGame();
        }
      }
    }

let touchStartX = 0;

function handleTouchStart(event) {
      touchStartX = event.changedTouches[0].clientX;
    }

function handleTouchEnd(event) {
      const touchEndX = event.changedTouches[0].clientX;

if (touchEndX - touchStartX > 50 && !intervalId) {
        startGame();
      } else if (touchStartX - touchEndX > 50 && intervalId) {
        stopGame();
      }
    }

/* --- Initialization --- */
    startGame();
  </script>
</body>
</html>
```