Skip to content

A simple 2d web based implmentation of the Conway's game of life

Notifications You must be signed in to change notification settings

ShavinAnjithaAlpha/game-of-life

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Conway's Game of Life Simulation

A web based implementation of Conway's Game of Life
Explore the docs »

View Demo · Report Bug · Request Feature

Official Website: gol.shavin.live

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. License
  7. Contact
  8. Acknowledgments

About The Project

image

Official Website: gol.shavin.live

About the game of life

Game of Life Demo

The Game of Life, also known as Life, is a cellular automaton that was created by British mathematician John Horton Conway in 1970. It is a zero-player game, which means that its evolution is determined by its initial state and requires no further input. To interact with the game of life, one creates an initial configuration and observes how it evolves. It is Turing complete and capable of simulating a universal constructor or any other Turing machine.

The game consists of 2d infinite grid of cells, each of which can be in one of two states, alive or dead. Every cell interacts with its neighbours, which are the cells that are horizontally, vertically, or diagonally adjacent. At each step in time, the following transitions occur:

  1. Any live cell with fewer than two live neighbours dies, as if by underpopulation.
  2. Any live cell with two or three live neighbours lives on to the next generation.
  3. Any live cell with more than three live neighbours dies, as if by overpopulation.
  4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

The first generation is created by applying the above rules simultaneously to every cell in the initial state. The rules continued to be applied to create further generations.

Patterns in the game of life

From variety of patterns generated in the game of life, there are some patterns that can e classified into one of these categories most of the time:

  • Still lifes: Patterns that do not change from one generation to the next.

  • Oscillators: Patterns that repeat after a certain number of generations.

  • Spaceships: Patterns that move across the grid.

  • Methuselahs: Patterns that take a large number of generations to stabilize before becoming a combination of still lifes, oscillators, and spaceships.

  • Guns: Patterns that shoot out spaceships.

  • Puffers: Patterns that leave debris behind as they move.

  • Rakes: Patterns that leave behind a trail of still lifes.

  • Wickstretchers: Patterns that leave behind a trail of oscillators.

  • Breeders: Patterns that leave behind a trail of spaceships.

  • Agars: Patterns that grow indefinitely.

    image image image

Design and Implementation of the project

This project is a web-based version of the game of life, running entirely on the client-side (in the browser), without the need for server-side processing. The game is implemented purely using HTML, CSS, and JavaScript, with the core of the game being written in JavaScript and the interface being built using HTML and CSS. The project utilizes the HTML5 Canvas low-level API for 2D rendering purposes.

The game is consists of three main components.

  1. The Game Engine

    The game engine is responsible for the core logic of the game. It is responsible for managing other major components of the game and maintain consistent communication betweenn those components. Some of the task of the game engine are:

    • Initialize the game
    • Initialize other components of the game
    • Handle user events and interactions such as drawing, erasing, game controlling events etc...
    • Update the game state
    • Render the game state
    • Handle the game loop
    • Handle the game state transitions
  2. The Game Model

    The game model is in charge of keeping track of the entire state of the game as an abstract mathematical model. Its core functionality makes use of a custom hash map implementation to rapidly store and retrieve the game's cell states.

  3. 2D Rendering Engine

    The 2D rendering engine is in charge of drawing the game state on the canvas at a low level. It utilizes the HTML5 Canvas API to draw the game state on the canvas. The rendering engine is responsible for drawing the cells, grid, and other game elements on the canvas.

  4. Grid System

    The grid system acts as a bridge between the abstract game model and the rendering engine by providing a structured, standardized representation of the game world. The game engine utilizes the grid system to accurately reflect the game model on the canvas, allowing the rendering engine to create a visual representation of the game that is true to the underlying data.

    ++++++++++++++++                +++++++++++++++++                +++++++++++++++++++++++++
    +              +                +               +                +                       +
    +              +                +               +                +                       +
    +  Game Model  + <------------> +  Game Engine  + <------------> +  2D Rendering Engine  + <------------> User Interface
    +              +                +               +                +                       +
    +              +                +               +                +                       +
    ++++++++++++++++                +++++++++++++++++                +++++++++++++++++++++++++
                                           |
                                           |
                                           |
                                           |
                                    +++++++++++++++++
                                    +               +
                                    +               +
                                    +  Grid System  +
                                    +               +
                                    +               +
                                    +++++++++++++++++
    

    The game of life is deployed on the official website Game of Life

(back to top)

Built With

  • JavaScript
  • HTML
  • CSS

(back to top)

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

  1. Node.js (for live server)
  2. NPM (for live server)

Installation

  1. Clone the repo

    git clone https://github.com/ShavinAnjithaAlpha/game-of-life
  2. Install NPM packages

    npm install
  3. Run the project

    npm start

    Thats all for the installation. The project will be running on your local server.

(back to top)

Usage

image image image image image

The game of life is a zero-player game, which means that its evolution is determined by its initial state and requires no further input. To interact with the game of life, one creates an initial configuration and observes how it evolves. The game of life has a few controls that can be used to interact with the game.

For more informations on how to play the game, please refer to the Help page of the official website Game of Life

(back to top)

Roadmap

  • Create the project struture
  • Implement the hash list data structure
  • Implement the game model
  • Implement the rendering engine
  • Implement the grid system
  • Implement the game of engine
    • Implement the core of the game engine
    • Implement the event hadling with user controls
    • Implement the canvas event handling like drawing, erasing etc...
    • Implement the logic for displaying game statistics in the chart
  • Implement the user interface
    • Implement the game controls
    • Implement the game state controls
    • Implement the game speed controls
    • Implement the game size controls
    • Implement the game pattern controls
    • Add chart to display the game statistics
  • Add feature to add custom initial configuration patterns to the game via json file

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

(back to top)

Acknowledgments

(back to top)