Conways game of life toch cell turn it on or off.play,stop,refresh,button's game | AI game creator

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

No:48675

81

Conways game of life toch cell turn it on or off.p..ALL
Developer User18896｜Date and time 24/3/2 20:04:09
Build time 11.764 sec｜Game capacity 3.571KB｜

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Conway's Game of Life</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <button id="startButton" onclick="startGame()">Play</button>
    <button id="stopButton" onclick="stopGame()">Stop</button>
    <button id="refreshButton" onclick="refreshGame()">Refresh</button>

<script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const cellSize = 10;
        const numRows = canvas.height / cellSize;
        const numCols = canvas.width / cellSize;
        let gameInterval;

let grid = createGrid();

function createGrid() {
            let grid = new Array(numRows);
            for (let i = 0; i < numRows; i++) {
                grid[i] = new Array(numCols).fill(false);
            }
            return grid;
        }

function drawGrid() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < numRows; i++) {
                for (let j = 0; j < numCols; j++) {
                    if (grid[i][j]) {
                        ctx.fillStyle = 'black';
                    } else {
                        ctx.fillStyle = 'white';
                    }
                    ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
                }
            }
        }

function startGame() {
            gameInterval = setInterval(updateGame, 500);
        }

function stopGame() {
            clearInterval(gameInterval);
        }

function refreshGame() {
            grid = createGrid();
            drawGrid();
        }

function updateGame() {
            let newGrid = createGrid();
            for (let i = 0; i < numRows; i++) {
                for (let j = 0; j < numCols; j++) {
                    let neighbors = countNeighbors(i, j);
                    if (grid[i][j]) {
                        if (neighbors < 2 || neighbors > 3) {
                            newGrid[i][j] = false;
                        } else {
                            newGrid[i][j] = true;
                        }
                    } else {
                        if (neighbors === 3) {
                            newGrid[i][j] = true;
                        }
                    }
                }
            }
            grid = newGrid;
            drawGrid();
        }

function countNeighbors(row, col) {
            let count = 0;
            for (let i = -1; i <= 1; i++) {
                for (let j = -1; j <= 1; j++) {
                    let neighborRow = row + i;
                    let neighborCol = col + j;
                    if (i === 0 && j === 0) {
                        continue;
                    }
                    if (neighborRow >= 0 && neighborRow < numRows && neighborCol >= 0 && neighborCol < numCols) {
                        if (grid[neighborRow][neighborCol]) {
                            count++;
                        }
                    }
                }
            }
            return count;
        }

canvas.addEventListener('click', function(event) {
            let rect = canvas.getBoundingClientRect();
            let x = event.clientX - rect.left;
            let y = event.clientY - rect.top;
            let cellX = Math.floor(x / cellSize);
            let cellY = Math.floor(y / cellSize);
            grid[cellY][cellX] = !grid[cellY][cellX];
            drawGrid();
        });

drawGrid();
    </script>
</body>
</html>