Source:

https://github.com/jzohdi/portfolio/blob/main/src/lib/utils/experiments/conways-2d-html.ts

This implementation of Conway’s Game of Life uses TypeScript in a Svelte component to create a grid-based simulation. The GameManager class encapsulates the logic for managing the grid, applying Conway's rules, and controlling the animation loop. Below is a breakdown of how it works, focusing on key sections and technical details.

Every cell is a <div> element with an id of cell-${x}-${y} then switching alive or dead uses css styles.

Alive (cell-on) and Dead (cell-off) States:

setOn: Styles a cell as "alive" (black background).

setOff: Styles a cell as "dead" (white background).

1. Initialization and Setup

The GameManager manages the grid, its dimensions, the state of each cell, and the animation loop. It initializes cells on a grid that scales with the window size and adjusts their size dynamically based on the number of columns (numberOfCols).

2. Initial State and Cell Updates

The initLife(density) function populates the grid with live and dead cells based on the provided density (percentage of live cells). This uses randomization (Math.random()) to decide whether a cell should start alive or dead.