Let's discuss ways to render a grid-based game

Here’s a tris example (live demo) that uses signal + canvas and should be pretty adaptable to GoL.

There are a few more examples in the cookboook’s recipe table. Search for “behaviors”, “signal”, and “tictactoe”. The behaviors library seems more appropriate for modeling continuous-time stuff (e.g. physics simulation), rather than something with discrete time steps like GoL.

Another option is using svg elements (example with halogen) which can be convenient if you want to add a unique clickable event to oddly-shaped elements. But for grids, calculating the cell based on canvas click coordinates is simple enough. I think there can also be situations where modifying individual SVG elements and relying on DOM diffs can be faster than redrawing the canvas, but the overhead is probably not worth it for game of life. You can also investigate optimizing the canvas approach by only redrawing over what’s changed, instead of completely redrawing everything from scratch after each update.

As a side note, there’s an excellent Rust + Wasm tutorial which covers building GoL (live demo). Curious to see how performance compares to a reasonable PS implementation and a JS-only version.

5 Likes