// event listeners canvas.addEventListener('click', handleCanvasClick); startBtn.addEventListener('click', () => if(!isRunning) startSimulation(); ); pauseBtn.addEventListener('click', () => if(isRunning) pauseSimulation(); ); stepBtn.addEventListener('click', manualStep); randomBtn.addEventListener('click', () => randomizeGrid(0.16); ); clearBtn.addEventListener('click', clearGrid); gliderBtn.addEventListener('click', placeGliderGun); speedSlider.addEventListener('input', updateSpeed);
: If you use CodePen or GitHub, keep the raw JavaScript and HTML code panels open next to the grid to make your screen look like an active development project.
These patterns never change from one generation to the next because they perfectly satisfy the survival rules. A simple 2x2 square of live cells. The Beehive: A small, horizontal hexagon of six cells. The Loaf: A slightly asymmetrical seven-cell structure. Oscillators (Repeating Patterns)
To help you get the best setup, tell me a bit more about your workspace:
Created by British mathematician , the "Game of Life" is not a traditional video game. It is a cellular automaton —a simulation that operates on a zero-player basis. This means that after the initial setup, the user does not interact with the game. Instead, the simulation evolves based on a set of simple, pre-defined rules [1]. conways game of life unblocked work
They are usually:
Google built a literal version of the game directly into its search engine.
(best for guaranteed access)
If you are worried about a supervisor walking past your desk while the simulation runs, you can customize the aesthetic of the game to mimic professional software. // event listeners canvas
These patterns never change form across generations unless an outside object hits them. A simple 2x2 square of live cells. Beehive: A six-cell hexagon shape. Loaf: An asymmetrical seven-cell loop. Oscillators (Repeating Patterns)
button:hover background: #2d3b54; color: white; transform: scale(0.97); box-shadow: 0 1px 3px black;
: Patterns that cycle back and forth between two or more states, such as the Blinker (a line of 3 cells) or the Toad.
// Draw living cells for(let row = 0; row < ROWS; row++) for(let col = 0; col < COLS; col++) if(grid[row][col]) // neon green / cyan living cells const gradient = ctx.createRadialGradient( col * CELL_SIZE + 2, row * CELL_SIZE + 2, 2, col * CELL_SIZE + 4, row * CELL_SIZE + 4, CELL_SIZE/1.5 ); gradient.addColorStop(0, '#6eff9e'); gradient.addColorStop(1, '#1f9e4a'); ctx.fillStyle = gradient; ctx.fillRect(col * CELL_SIZE, row * CELL_SIZE, CELL_SIZE-0.5, CELL_SIZE-0.5); // subtle inner highlight ctx.fillStyle = '#b9ffcf'; ctx.globalAlpha = 0.3; ctx.fillRect(col * CELL_SIZE + 1, row * CELL_SIZE + 1, CELL_SIZE-2, CELL_SIZE-2); ctx.globalAlpha = 1; else // dead cell faint dot ctx.fillStyle = '#11161f'; ctx.fillRect(col * CELL_SIZE, row * CELL_SIZE, CELL_SIZE-0.5, CELL_SIZE-0.5); The Beehive: A small, horizontal hexagon of six cells
These four rules are all there is. They are the entire code of this digital universe. Yet, from these simple instructions, an infinite variety of patterns emerge, ranging from static blobs to traveling spaceships and even structures that produce infinite growth.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Game of Life — Local</title> <style> body font-family: Arial, sans-serif; display:flex; gap:16px; padding:16px; canvas border:1px solid #333; cursor:pointer; #controls display:flex; flex-direction:column; gap:8px; width:220px; button,input padding:8px; </style> </head> <body> <canvas id="board" width="600" height="600"></canvas> <div id="controls"> <div><button id="play">Play</button> <button id="step">Step</button> <button id="clear">Clear</button></div> <div><label>Speed: <input id="speed" type="range" min="50" max="1000" value="200"></label></div> <div><label>Cell size: <input id="cellSize" type="number" min="4" max="40" value="10"></label></div> <div><button id="random">Randomize</button></div> <div><button id="glider">Place Glider</button> <button id="lwss">Place LWSS</button></div> <div>Click canvas to toggle cells.</div> </div>
Use an HTML file you can run locally in a browser — no internet required. Save the code below as game_of_life.html and open it in your browser.
Do you prefer a version that lets you , or an automated generator ?
them like chess and go sometimes complexity can hide in the most unexpected. places i'm Aran Zukon. and in this short documentary. YouTube·Alan Zucconi