A Vue component to render a John Conway's Game of Life

Demo

Install

npm install vue-game-of-life --save

How to use

Import and register the plugin as usual

import GameOfLife from 'vue-game-of-life'

Vue.use(GameOfLife);

Then use it as you would with any component

<game-of-life></game-of-life>

Configuration

The following props can be sent to the component:

Name	Type	Default	Desctiption
cols	Number	100	Number of columns
rows	Number	100	Number of rows
cellWidth	Number	5	Width of each cell
tickInterval	Number	100	Time between each 'tick' in milliseconds
color	String	#ddd	Color to display the alive cells
alivePercent	Number	10	Initial percent of alive cells

Getting data out

You can also get some data out of the component, such as number of ticks, cells alive and dead cells.

Do that using a slot scope

example:

<GameOfLife v-slot:default="{ ticks, cellsAlive, cellsDead }">
    Tick: {{ ticks }}, Alive: {{ cellsAlive }}, Dead: {{ cellsDead }}
</GameOfLife>