Game of Life Web Component

I made a web component 🔗 to render Conway’s Game of Life in an offscreen canvas.

You can install from NPM 🔗 or download the game-of-life.js 🔗 JavaScript file manually and add it to your site.

npm install @jedidiah/game-of-life-wc --save

Once you have the script on your page then you can use it in html as an element like this:

<game-of-life fps="6" cellSize="4"></game-of-life>
<game-of-life fps="6" color1="white" color1Tick="rgba(255,255,255,0.5)"  color2="rebeccapurple" cellSize="4"></game-of-life>

Settings

  • fps - The game can run a bit too quickly, this attribute will limit the max speed to a given fps (frames per second). Note if prefers reduced motion is set on the users device then this attribute is ignored and the fps is limited to 1.
    Default: fps=“12”

  • cellSize - How many pixels wide should each cell be drawn on the canvas.
    Default: cellSize=“1”

  • color1 - This is the colour of the background and dead cells
    Default: color1=“rgba(0, 20, 0, 1)“

  • color1Tick - To allow cells to fade out when they die this colour is overlayed each tick/frame of the animation. If you want dead cells to disappear straight away then set this to the same value as color1
    Default: color1Tick=“rgba(0, 20, 0, 0.3)“

  • color2 - This is the colour the live cells will be drawn in
    Default: cellSize=“rgba(0, 200, 0, 1)“

  • width - The width of the canvas (not the width it will be rendered)
    Default: width=“300”

  • height - The height of the canvas (not the height it will be rendered)
    Default: height=“150”

  • hueRotate - Instead of setting color2 you can just have all the colours
    Default: hueRotate=“false”

<game-of-life fps="60" height="600" hueRotate color1="white" color1Tick="transparent" cellSize="2"></game-of-life>

I love the effect you get when you enable hueRotate and set the the tick colour to transparent. It’s like a living ink running round a page.

I hope you have fun having a playing with it and let me know if you have any questions or feedback. If there’s interest I can write a bit about the making of the web component.



Game of Life Web Component © 2025 by Jedidiah Broadbent is licensed under CC BY-SA 4.0

If you have any comments, suggestions or feedback about this post please do send them to me. Mention the title of the post or include a link so I know what you're talking in relation to.