Conways game of life on an infanate canvas play,stop,refresh button's game

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

No:48672

104

←

Prev Next

→

Conways game of life on an infanate canvas play,st..ALL
Developer User18896｜Date and time 24/3/2 19:58:07
Build time 10.659 sec｜Game capacity 2.91KB｜

Script

Here is an example of Conways game of life implemented in a single HTML file:

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Here is an example of Conways game of life implemented in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Conway's Game of Life</title>
</head>
<body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <br>
    <button onclick="play()">Play</button>
    <button onclick="stop()">Stop</button>
    <button onclick="refresh()">Refresh</button>

const numRows = 40;
        const numCols = 60;
        const cellSize = 10;
        const cells = new Array(numRows).fill(null).map(() => new Array(numCols).fill(false));

let isPlaying = false;
        let intervalId;

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

cells.forEach((row, i) => {
                row.forEach((cell, j) => {
                    if (cell) {
                        ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
                    }
                });
            });

if (isPlaying) {
                update();
            }
        }

function update() {
            const newCells = new Array(numRows).fill(null).map(() => new Array(numCols).fill(false));

cells.forEach((row, i) => {
                row.forEach((cell, j) => {
                    const neighbors = countNeighbors(i, j);
                    if (cell && (neighbors === 2 || neighbors === 3) || !cell && neighbors === 3) {
                        newCells[i][j] = true;
                    }
                });
            });

cells.splice(0, cells.length, ...newCells);
        }

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

for (let i = row - 1; i <= row + 1; i++) {
                for (let j = col - 1; j <= col + 1; j++) {
                    if (i >= 0 && i < numRows && j >= 0 && j < numCols && cells[i][j] && !(i === row && j === col)) {
                        count++;
                    }
                }
            }

return count;
        }

function play() {
            isPlaying = true;
            intervalId = setInterval(draw, 100);
        }

function stop() {
            isPlaying = false;
            clearInterval(intervalId);
        }

function refresh() {
            cells.forEach((row, i) => {
                row.fill(false);
            });

draw();
        }

canvas.addEventListener("click", (event) => {
            const rect = canvas.getBoundingClientRect();
            const col = Math.floor((event.clientX - rect.left) / cellSize);
            const row = Math.floor((event.clientY - rect.top) / cellSize);

cells[row][col] = !cells[row][col];
            draw();
        });

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