Zakaria/Conways_Game_of_life
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: drawing dots, making a better spark

Browse Source
This commit is contained in:
Zakaria
2026-06-07 16:53:40 -04:00
parent 0891453912
commit 2352a003b8
3 changed files with 86 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -4
View File
@@ -24,7 +24,7 @@
<div>
<div class="eyebrow">Family science-project showcase</div>
<h1 id="title">A tiny universe where patterns wake up.</h1>
<p class="lede">Click cells to build a creature, press play, and watch simple rules turn into crawlers, fireworks, traffic jams, and quiet little islands.</p>
<p class="lede">Click or drag cells to build a creature, press play, and watch simple rules turn into crawlers, fireworks, traffic jams, and quiet little islands.</p>
</div>
<ul class="rules" aria-label="Game of Life rules">
<li><b>2-3</b><span><strong>Living cells stay alive</strong> when they have two or three neighbors nearby.</span></li>
@@ -36,13 +36,13 @@
<section class="lab-card" aria-label="Interactive Game of Life board">
<div class="board-shell">
<div class="board-header">
<p class="board-title">LIVE CELL GRID - TAP OR CLICK TO DRAW</p>
<p class="board-title">LIVE CELL GRID - TAP, CLICK, OR DRAG TO DRAW</p>
<button class="button primary" id="randomBtn" type="button">Seed a tiny universe</button>
</div>
<div class="canvas-wrap">
<canvas id="lifeCanvas" width="960" height="720" aria-label="Conway's Game of Life cell board"></canvas>
</div>
<p class="caption">Tip: pause the universe, draw a few cells, then press play. The board wraps around at the edges like a donut-shaped planet.</p>
<p class="caption">Tip: pause the universe, drag across the grid to draw a shape, then press play. The board wraps around at the edges like a donut-shaped planet.</p>
</div>
</section>
</section>
@@ -55,7 +55,7 @@
<button class="button primary" id="playBtn" type="button">Play</button>
<button class="button" id="stepBtn" type="button">Step once</button>
<button class="button" id="clearBtn" type="button">Clear board</button>
<button class="button" id="sparkBtn" type="button">Make sparkles</button>
<button class="button" id="sparkBtn" type="button">Make fireworks</button>
</div>
<div class="slider-row">