AI game creator

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

No:33038

←

Prev Next

→

cell sandbox game
Developer User15526｜Date and time 24/1/2 7:15:20
Build time 22.251 sec｜Game capacity 3.886KB｜

Script

Sure! Here's a simple cell sandbox game implemented in a single HTML file using JavaScript. The game allows you to interact with cells on a grid and simulate their behavior. Please note that this is a basic implementation, and you can enhance it further based on your requirements.

To play the game, simply open the HTML file in a web browser on your smartphone. You'll see a grid of cells that you can click to toggle their state between alive and dead. The game will simulate the behavior of the cells based on the rules of Conway's Game of Life. Cells that have live neighbors will survive, while cells without live neighbors or with too many live neighbors will die. The grid updates every 0.5 seconds to reflect the changes in cell states.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Cell Sandbox Game</title>

.cell {
      width: 30px;
      height: 30px;
      border: 1px solid #DDD;
      background-color: #FFF;
    }
  </style>
</head>

// Initialize the game
    function initializeGame() {
      const grid = document.getElementById('grid');
      for (let i = 0; i < gridSize; i++) {
        const row = document.createElement('div');
        row.classList.add('row');

for (let j = 0; j < gridSize; j++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          cell.addEventListener('click', () => toggleCellState(cell));

row.appendChild(cell);
        }

grid.appendChild(row);
      }

// Initialize cells array
      for (let i = 0; i < gridSize; i++) {
        cells[i] = new Array(gridSize).fill(false);
      }
    }

// Toggle the state of a cell
    function toggleCellState(cell) {
      const row = cell.parentNode;
      const rowIdx = Array.from(row.parentNode.children).indexOf(row);
      const cellIdx = Array.from(row.children).indexOf(cell);

cells[rowIdx][cellIdx] = !cells[rowIdx][cellIdx];
      cell.style.backgroundColor = cells[rowIdx][cellIdx] ? '#000' : '#FFF';
    }

// Simulate the cell behavior
    function simulateCells() {
      setInterval(() => {
        const newCells = JSON.parse(JSON.stringify(cells));

for (let i = 0; i < gridSize; i++) {
          for (let j = 0; j < gridSize; j++) {
            const neighbors = countLiveNeighbors(i, j);

if (cells[i][j] && (neighbors < 2 || neighbors > 3)) {
              newCells[i][j] = false;
            } else if (!cells[i][j] && neighbors === 3) {
              newCells[i][j] = true;
            }
          }
        }

updateGrid(newCells);
        cells.length = 0;
        cells.push(...newCells);
      }, 500);
    }

// Count live neighbors for a cell
    function countLiveNeighbors(row, col) {
      let count = 0;

for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          if (i === 0 && j === 0) continue;

const newRow = row + i;
          const newCol = col + j;

if (newRow >= 0 && newRow < gridSize && newCol >= 0 && newCol < gridSize) {
            if (cells[newRow][newCol]) count++;
          }
        }
      }

return count;
    }

// Update the grid with the new cell states
    function updateGrid(newCells) {
      const grid = document.getElementById('grid');

for (let i = 0; i < gridSize; i++) {
        const row = grid.children[i];

for (let j = 0; j < gridSize; j++) {
          const cell = row.children[j];
          cell.style.backgroundColor = newCells[i][j] ? '#000' : '#FFF';
        }
      }
    }

// Start the game
    initializeGame();
    simulateCells();
  </script>
</body>

</html>
```