jsquared71.github.io/life2.html at main · jsquared71/jsquared71.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!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 with Species</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: #f0f0f0;
        }
        #controls {
            margin-top: 10px;
        }
        button {
            margin-right: 5px;
        }
    </style>
</head>
<body>

<h1>Conway's Game of Life with Species</h1>
<canvas id="gameCanvas" width="600" height="600"></canvas>
<div id="controls">
    <button onclick="toggleSimulation()">Start / Stop</button>
    <button onclick="clearGrid()">Clear</button>
    <button onclick="randomizeGrid()">Randomize</button>
</div>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const resolution = 20; // Size of each cell
    const COLS = canvas.width / resolution;
    const ROWS = canvas.height / resolution;

    // Define colors for species, where 0 is dead
    const colors = ['white', 'red', 'blue', 'green'];
    const speciesCount = colors.length - 1;

    let grid = createGrid();
    let running = false;

    // Initialize an empty grid
    function createGrid() {
        return new Array(COLS).fill(null)
            .map(() => new Array(ROWS).fill(0));
    }

    // Randomize the grid with different species
    function randomizeGrid() {
        grid = grid.map(col => col.map(() => Math.random() > 0.7 ? getRandomSpecies() : 0));
        drawGrid();
    }

    function getRandomSpecies() {
        return Math.floor(Math.random() * speciesCount) + 1;
    }

    // Clear the grid (make all cells dead)
    function clearGrid() {
        grid = createGrid();
        drawGrid();
    }

    // Toggle the simulation on or off
    function toggleSimulation() {
        running = !running;
        if (running) {
            update();
        }
    }

    // Draw the grid based on the current cell states
    function drawGrid() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let x = 0; x < COLS; x++) {
            for (let y = 0; y < ROWS; y++) {
                ctx.beginPath();
                ctx.rect(x * resolution, y * resolution, resolution, resolution);
                ctx.fillStyle = colors[grid[x][y]];
                ctx.fill();
                ctx.stroke();
            }
        }
    }

    // Calculate the next generation
    function nextGeneration(grid) {
        const newGrid = createGrid();

        for (let x = 0; x < COLS; x++) {
            for (let y = 0; y < ROWS; y++) {
                const species = grid[x][y];
                const neighbors = countNeighbors(grid, x, y);
                const sameSpeciesNeighbors = neighbors[species];
                const totalNeighbors = Object.values(neighbors).reduce((a, b) => a + b, 0);

                // Apply modified Conway's Game of Life rules for each species
                if (species > 0) {
                    if (sameSpeciesNeighbors < 2 || sameSpeciesNeighbors > 3 || totalNeighbors > 6) {
                        newGrid[x][y] = 0; // Cell dies
                    } else {
                        newGrid[x][y] = species; // Cell survives
                    }
                } else {
                    // Dead cells can be reborn if exactly 3 neighbors of the same species surround it
                    for (let s = 1; s <= speciesCount; s++) {
                        if (neighbors[s] === 3) {
                            newGrid[x][y] = s;
                            break;
                        }
                    }
                }
            }
        }
        return newGrid;
    }

    // Count neighbors of each species around a specific cell
    function countNeighbors(grid, x, y) {
        const counts = { 1: 0, 2: 0, 3: 0 }; // Neighbor counts for each species
        for (let i = -1; i <= 1; i++) {
            for (let j = -1; j <= 1; j++) {
                if (i === 0 && j === 0) continue; // Skip the cell itself
                const col = (x + i + COLS) % COLS;
                const row = (y + j + ROWS) % ROWS;
                const neighborSpecies = grid[col][row];
                if (neighborSpecies > 0) {
                    counts[neighborSpecies]++;
                }
            }
        }
        return counts;
    }

    // Update the game state and draw the new generation
    function update() {
        grid = nextGeneration(grid);
        drawGrid();
        if (running) {
            requestAnimationFrame(update);
        }
    }

    // Allow user to toggle cells by clicking, cycling through species
    canvas.addEventListener('click', event => {
        const x = Math.floor(event.offsetX / resolution);
        const y = Math.floor(event.offsetY / resolution);
        grid[x][y] = (grid[x][y] + 1) % (speciesCount + 1); // Cycle through species
        drawGrid();
    });

    drawGrid();
</script>

</body>
</html>