@planet-lodder/game-of-life v0.0.7

Conways Game of Life

A JavaScript implementation of Conway's Game of Life.

Features

The main features included in this package:

• A <game-of-life> web component, that you can embed in your own website
• Configurable game settings, including a way to load a preset from an image
• Styled using Tailwind CSS, so look and feel can be easily customized
• Multiple view types can be selected, each implemented as a web component
• The GameEngine can be extended or replaced using GameEngineCore.

View types that are currently included:

• html - A simple view using DIV's to paint cells (uses shadow DOM)
• svg - View is generated as a SVG image (uses shadow DOM)
• canvas - Draw the view directly onto an image canvas
• webgl - Game is rendered as polygons in a WebGL context
• benchmark - A special view type to measure game engine performance

Each view type has it's strengths and weaknesses, for example html and svg performs really well (using the shadow DOM) for smaller game sizes, where as canvas and webgl generally performs better for large and complex games.

By supporting multiple GameEngine's and view types, we can benchmark and compare their performance, given small and very large workloads.

Installation

You can install the npm package into your local project using:

npm i @planet-lodder/game-of-life

Then import the game code and all its dependencies:

// Import the custom web component and register in DOM
import "@planet-lodder/game-of-life/web-component";

Alternatively, you can just embed the minimized javascript file directly into your project or website, using web-component.js.

Usage

Include the required javascript, then you can declare the board game like so:

<script src="/js/web-component.js"></script>

<game-of-life
  title="Demo of Life"
  image="/presets/simple/traffic-circle.gif"
  width="100"
  height="100"
  scale="10"
  delay="0"
  view="svg"
></game-board>

If you want to customize or extend the game logic, you can also use module imports:

import { GameEngineCore, BenchmarkRenderer } from "@planet-lodder/game-of-life"

export class GameEngine extends GameEngineCore {

  load(data) {
    this.data = data;
    if (this.view) this.view.createView(this, data)
  }

  tick() {
    let data = this.data;
    ...
  }
}

// Add view as a new DOM element
let view = new BenchmarkRenderer()
document.body.appendChild(view)

// Attach view to custom game engine and start
let config = {
  image: '/presets/basic/101.gif'
}
let engine = new GameEngine(config, view);
engine.start()

Configuration

The following settings are available:

Local development with web-dev-server

You can download the source code locally and run it in development mode:

git clone git@github.com:planet-lodder/conways-game-of-life.git
cd conways-game-of-life

npm install
npm start

This runs a local development server that serves the game as a web component, located in static/index.html