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

No:48676

144

←

Prev Next

→

Conways game of life toch cell turn it on or off.p..ALL
Developer User18896｜Date and time 24/3/2 20:05:54
Build time 12.108 sec｜Game capacity 3.477KB｜

Script

Conway's Game of Life

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Conway's Game of Life</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        #grid {
            display: inline-block;
            margin-top: 20px;
        }
        .cell {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>Conway's Game of Life</h1>
    <button id="playBtn" onclick="start()">Play</button>
    <button id="stopBtn" onclick="stop()">Stop</button>
    <button id="refreshBtn" onclick="refresh()">Refresh</button>
    <button id="clearBtn" onclick="clearGrid()">Clear</button>
    <div id="grid"></div>

function renderGrid() {
            const gridElement = document.getElementById('grid');
            gridElement.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';
                    cell.addEventListener('click', () => toggleCell(i, j));
                    gridElement.appendChild(cell);
                }
            }
        }

function toggleCell(row, col) {
            grid[row][col] = !grid[row][col];
            renderGrid();
        }

function start() {
            intervalId = setInterval(updateGrid, 500);
        }

function stop() {
            clearInterval(intervalId);
        }

function updateGrid() {
            const newGrid = new Array(rows).fill(null).map(() => new Array(cols).fill(false));

for (let i = 0; i < rows; i++) {
                for (let j = 0; j < cols; j++) {
                    const neighbors = getNeighborCount(i, j);
                    if (grid[i][j] && (neighbors < 2 || neighbors > 3)) {
                        newGrid[i][j] = false;
                    } else if (!grid[i][j] && neighbors === 3) {
                        newGrid[i][j] = true;
                    } else {
                        newGrid[i][j] = grid[i][j];
                    }
                }
            }

grid = newGrid;
            renderGrid();
        }

function getNeighborCount(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 neighborRow = row + i;
                    const neighborCol = col + j;

if (neighborRow >= 0 && neighborRow < rows && neighborCol >= 0 && neighborCol < cols) {
                        count += grid[neighborRow][neighborCol] ? 1 : 0;
                    }
                }
            }

return count;
        }

function refresh() {
            grid = new Array(rows).fill(null).map(() => new Array(cols).fill(false));
            renderGrid();
        }

function clearGrid() {
            grid = new Array(rows).fill(null).map(() => new Array(cols).fill(false));
            clearInterval(intervalId);
            renderGrid();
        }

renderGrid();
    </script>
</body>
</html>
```