Angular Game of Life Background

Background component playing Conway's Game of Life for Angular 19+

Demo page

https://astgenne4922.github.io/ng-game-of-life/

Overview

• Install
• Usage
• Options

Install

Angular >= 19

npm install ngx-game-of-life-bg

Usage

Add GameOfLifeBgComponent to your imports

import { Component } from "@angular/core";
import { GameOfLifeBgComponent } from "ngx-game-of-life-bg";

@Component({
    selector: "app-root",
    imports: [GameOfLifeBgComponent],
    templateUrl: "./app.component.html",
    styleUrl: "./app.component.css",
})
export class AppComponent {}

And then use it in your template

<ngx-game-of-life-bg cellSize="5" fps="60" showGrid="true" gridColor="#FFFFFF" advanceGame="true" preset="lightspeedoscillator3" />

Options

• [showGrid]
• [gridColor]
• [backgroundColor]
• [cellSize]
• [cellColor]
• [fps]
• [isToroidal]
• [spawnRate]
• [advanceGame]
• [preset]

[showGrid]

Property	Type	Required	Default
[showGrid]	boolean	Optonal	false

If true a grid is displayed over the board.

<ngx-game-of-life-bg showGrid="true" />

[gridColor]

Property	Type	Required	Default
[gridColor]	string	Optonal	#000000

The color used for the grid when displayed. Accepts only HEX color formats (#ffffff).

<ngx-game-of-life-bg gridColor="#ffffff" />

[backgroundColor]

Property	Type	Required	Default
[backgroundColor]	string	Optonal	#001a44

The color for the background of the board. Accepts only HEX color formats (#ffffff).

<ngx-game-of-life-bg backgroundColor="#001a44" />

[cellSize]

Property	Type	Required	Default
[cellSize]	number	Optonal	5

The size in pixels of the cells displayed. Changing this value while running causes the game state to be reset.

<ngx-game-of-life-bg cellSize="20" />

[cellColor]

Property	Type	Required	Default
[cellColor]	string	Optonal	#ffffff

The color used for live cells. Accepts only HEX color formats (#ffffff).

<ngx-game-of-life-bg cellColor="#ffffff" />

[fps]

Property	Type	Required	Default
[fps]	number	Optonal	60

The framerate of the simulation. Every frame the game is advanced by 1 step and the board is redrawn.

<ngx-game-of-life-bg fps="20" />

[isToroidal]

Property	Type	Required	Default
[isToroidal]	boolean	Optonal	true

With true the board is treated as if opposing sides are connected, with false the board is treated as a closed grid and every cell outside the borders is considered dead. Changing this value while running causes the game state to be reset.

<ngx-game-of-life-bg isToroidal="true" />

[spawnRate]

Property	Type	Required	Default
[spawnRate]	number	Optonal	0.3

Controls the percentage of live cells when creating a random board. The percentage is represented with values between 0 and 1. Changing this value while running causes the game state to be reset.

<ngx-game-of-life-bg spawnRate="0.3" />

[advanceGame]

Property	Type	Required	Default
[advanceGame]	boolean	Optonal	true

If true the game state is advanced by one step every frame.

<ngx-game-of-life-bg advanceGame="true" />

[preset]

Property	Type	Required	Default
[preset]	string	Optonal	''

Setting this attribute to a valid preset name specifies automatically a value for cellSize, fps, and isToroidal if they haven't been already set and creates the initial board state from a determined pattern. If preset is invalid the board is created with random live cells. Changing this value while running causes the game state to be reset.

A list of every valid pattern name can be found in PATTERN_NAMES. Simply import it in your component file.

import { PATTERN_NAMES } from "ngx-game-of-life-bg";

<ngx-game-of-life-bg preset="lightspeedoscillator3" />

License

ngx-game-of-life-bg is MIT licensed.