Conways Game of Life in HTML5/JavaScript
This is a curiosity / learning experience project based on some work I did at University; Conway's Game of Life in C++ using the Windows Graphics API. It was a fairly fun project and it allowed me to explorer new topics (mostly cellular automata) that I then went onto use in my Honours Project in the form of Lindenmeyer Systems.
I'm a Games Programmer by education with a background in C++ and C# but work in Test Automation Software with, in particular, web-based software. This essentially meant that from time to time I have to work in web technologies (HTML, JavaScript, etc) and piqued my interest for getting more involved and learning it properly in my spare time and this fit in rather nicely as a 'hello world' project.
- Click on the grid to switch a cells state between dead and alive.
- Click the 'Simulate!' button to start the simulation. Note that the grid cannot be interacted with whilst the simulation is running.
- Click the 'Stop!' button to stop the simulation and enable interaction.
- Click the 'Clear!' button to stop the simulation and enable interaction.
- Select your own choice of 'Dead' and 'Alive' colours using the colour select boxes.
Like any cellular automata system, Conway's Game of Life uses a set of rules to define how the simulations runs. This simulation uses the following rules:
- If a cell is alive and has less than 2 neighbours who are also alive, it dies from loneliness.
- If a cell is alive and has more than 3 neighbours who are also alive, it dies from overcrowding.
- If a cell is alive and has exactly 2 or 3 neighbours who are also alive, it stays alive.
- If a cell is dead and has exactly 3 neighbours who are alive, it becomes alive through reproduction.