Conways game of life color cell wars touch the cell to turn on/off use primery colors play,stop and refresh button.color block count above canvas change color o of cell button's game

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

No:48252

←

Prev Next

→

Conways game of life color cell wars touch the cel..ALL
Developer User18896｜Date and time 24/3/1 20:23:31
Build time 13.492 sec｜Game capacity 3.778KB｜

Script

Color Block Count: 0

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conway's Game of Life: Color Cell Wars</title>
<style>
    canvas {
        border: 1px solid #000;
    }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<button onclick="startGame()">Play</button>
<button onclick="stopGame()">Stop</button>
<button onclick="refreshGame()">Refresh</button>
<button onclick="changeColor()">Change Color</button>
<p id="blockCount">Color Block Count: 0</p>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    let size = 10;
    let interval;
    let color = 'rgb(255, 0, 0)';
    let blockCount = 0;

const rows = canvas.width / size;
    const cols = canvas.height / size;
    let grid = new Array(cols).fill(null).map(() => new Array(rows).fill(false));

canvas.addEventListener('click', (event) => {
        const x = event.clientX - canvas.getBoundingClientRect().left;
        const y = event.clientY - canvas.getBoundingClientRect().top;

const i = Math.floor(x / size);
        const j = Math.floor(y / size);

grid[j][i] = !grid[j][i];

if (grid[j][i]) {
            blockCount++;
        } else {
            blockCount--;
        }

updateBlockCount();
        drawGrid();
    });

function startGame() {
        interval = setInterval(updateGeneration, 100);
    }

function stopGame() {
        clearInterval(interval);
    }

function refreshGame() {
        grid = new Array(cols).fill(null).map(() => new Array(rows).fill(false));
        blockCount = 0;
        updateBlockCount();
        drawGrid();
    }

function changeColor() {
        color = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
        drawGrid();
    }

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

for (let i = 0; i < cols; i++) {
            for (let j = 0; j < rows; j++) {
                const neighbors = countNeighbors(i, j);

if (grid[i][j]) {
                    if (neighbors < 2 || neighbors > 3) {
                        newGrid[i][j] = false;
                        blockCount--;
                    } else {
                        newGrid[i][j] = true;
                    }
                } else {
                    if (neighbors === 3) {
                        newGrid[i][j] = true;
                        blockCount++;
                    }
                }
            }
        }

grid = newGrid;
        updateBlockCount();
        drawGrid();
    }

function countNeighbors(x, y) {
        let sum = 0;

for (let i = -1; i < 2; i++) {
            for (let j = -1; j < 2; j++) {
                const row = (x + i + cols) % cols;
                const col = (y + j + rows) % rows;

sum += grid[row][col];
            }
        }

sum -= grid[x][y];
        return sum;
    }

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

for (let i = 0; i < cols; i++) {
            for (let j = 0; j < rows; j++) {
                ctx.beginPath();
                ctx.rect(j * size, i * size, size, size);
                if (grid[i][j]) {
                    ctx.fillStyle = color;
                    ctx.fillRect(j * size, i * size, size, size);
                }
                ctx.stroke();
            }
        }
    }

function updateBlockCount() {
        document.getElementById('blockCount').textContent = `Color Block Count: ${blockCount}`;
    }

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