Conways game of life touch canvas to turn cell on or off and start button stop button refresh button's game

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

No:48218

←

Prev Next

→

Conways game of life touch canvas to turn cell on ..ALL
Developer User18896｜Date and time 24/3/1 19:31:19
Build time 14.411 sec｜Game capacity 4.255KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Conway's Game of Life</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <br>
    <button onclick="startGame()">Start</button>
    <button onclick="stopGame()">Stop</button>
    <button onclick="refreshGame()">Refresh</button>

let grid = new Array(numRows).fill(null).map(() => new Array(numCols).fill(0));

function drawCell(row, col) {
            ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
        }

function clearCell(row, col) {
            ctx.clearRect(col * cellSize, row * cellSize, cellSize, cellSize);
        }

function refreshGrid() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            grid = new Array(numRows).fill(null).map(() => new Array(numCols).fill(0));
        }

function startGame() {
            if (isPlaying) return;

isPlaying = true;
            gameInterval = setInterval(updateGame, 100);
        }

function stopGame() {
            clearInterval(gameInterval);
            isPlaying = false;
        }

function updateGame() {
            let newGrid = new Array(numRows).fill(null).map(() => new Array(numCols).fill(0));

for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    let neighbors = countNeighbors(row, col);
                    if (grid[row][col] === 1) {
                        if (neighbors < 2 || neighbors > 3) {
                            newGrid[row][col] = 0;
                        } else {
                            newGrid[row][col] = 1;
                        }
                    } else {
                        if (neighbors === 3) {
                            newGrid[row][col] = 1;
                        }
                    }
                }
            }

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) {
                        count += grid[neighborRow][neighborCol];
                    }
                }
            }

return count;
        }

function getCursorPosition(event) {
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

const row = Math.floor(y / cellSize);
            const col = Math.floor(x / cellSize);
            
            if (row >= 0 && row < numRows && col >= 0 && col < numCols) {
                grid[row][col] = (grid[row][col] === 1) ? 0 : 1;
                clearCell(row, col);
                if (grid[row][col] === 1) {
                    drawCell(row, col);
                }
            }
        }

canvas.addEventListener('click', getCursorPosition);

function refreshGame() {
            refreshGrid();
            drawGrid();
        }
    </script>
</body>
</html>