https://github.com/jafb321/game-life

Customizable Conway's "Game of life" cellular automat Library
https://github.com/jafb321/game-life

canvas game-of-life npm-package typescript

Last synced: 6 months ago
JSON representation

Customizable Conway's "Game of life" cellular automat Library

• Host: GitHub
• URL: https://github.com/jafb321/game-life
• Owner: JAFB321
• License: mit
• Created: 2021-07-27T02:01:50.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2025-01-02T08:39:15.000Z (10 months ago)
• Last Synced: 2025-04-21T06:58:40.532Z (6 months ago)
• Topics: canvas, game-of-life, npm-package, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/game-life
• Size: 850 KB
• Stars: 14
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  


    

  

  


     Customizable Conway's "Game of life" cellular automat generator

  

  


[![NPM version](https://img.shields.io/npm/v/game-life?style=flat-square)](https://www.npmjs.com/package/game-life)

[![Package size](https://img.shields.io/bundlephobia/min/game-life?style=flat-square)](https://www.npmjs.com/package/game-life)

![npm](https://img.shields.io/npm/dt/game-life?style=flat-square)

![GitHub](https://img.shields.io/github/license/jafb321/game-life?style=flat-square)

![GitHub Repo stars](https://img.shields.io/github/stars/jafb321/game-life?style=social)

[![Twitter](https://img.shields.io/twitter/follow/jafb321.svg?label=Follow&style=social)](https://twitter.com/jafb321)

  



---

#### Content

- [Features](#features-)

- [Install](#install-)

- [Usage](#usage-)

- [API](#api-)

## Features ✨

- Easy to use

- Work with canvas element (cooming soon with DOM)

- No dependencies

- Scalable performance

- Made with love <3

## Install 🐱‍💻

There are 2 ways to install it in your project:

#### 1. Install npm package (ES6 Import)

```bash

npm install game-life

```

#### 2. Or add Script CDN

```html

```

## Usage 💡

Depending on how you installed, there are two ways to use it:

#### 1. ES6 Import

```javascript

import GameLife from "game-life";

const canvas = document.querySelector("canvas");

const game = GameLife(canvas);

```

#### 2. or with script CDN

```javascript

const canvas = document.querySelector("canvas");

const game = GameLife(canvas);

```

##### Result:

![Game life dark demo](https://raw.githubusercontent.com/JAFB321/JAFB321/main/game-life-dark.gif)

#### How to use

- Drag to explore the board

- Double click to spawn/kill cells

- Mouse wheel to zoom in/out

- Enter to start/pause evolution

- +/- keys to speed up/down

###### You can also pass a **default config** to the game:

```javascript

const game = GameLife(canvas, {

  graphics: {

    board: { width: 1900, height: 800 },

    colors: { background: "#FFFFFF", grid: "#E0E0E0" },

    cells: { size: 20 },

  },

  game: { delay: 1000 },

});

```

##### Result:

![Game life white demo](https://raw.githubusercontent.com/JAFB321/JAFB321/main/game-life-white.gif)

#### Manual actions

```javascript

const game = GameLife(canvas);

game.bornCell({ x: 10, t: 10 }); // Spawn cell

game.killCell({ x: 10, y: 10 }); // Kill cell

game.startEvolution(); // Start

game.stopEvolution(); // Stop

game.speedUp(1.5); // Speed up 1.5x

game.speedDown(0.8); // Speed down 0.8x

game.graphics.setConfig({

  // Change graphics config

  colors: { background: "#F0F0F0", cell: "#000000" },

});

// and more

```

## API 👩‍💻

Cooming soon... 🚧

---