Game of Life Retrospective


The game of life project is my take on Conway's Game of Life. This project really pushed my mind in doing complicated loops and calculations based on the status of surrounding cells. The moniker "game" is a little misleading in this case. There is very little for the player to do other than watch the simulation of life unfold. It isn't a game in the sense of TicTacToe or Simon, or even the other Game of Life!

I used the HTML canvas for the first time in this project. I found that I enjoy making things on a canvas though I did not expect to. I am glad I chose to use it for this project as it helped prepare meta for another canvas project right after that was a bit more complex.

If you are unfamiliar with Conway's Game of Life and want to learn about the rules for the simulation, check out this youtube video for an explanation by John Conway himself.

Code Review

The first thing to mention here is that there is very little Angular going on here. I used it to bootstrap the project and I used two of Angular's lifecycle hooks to do things on component initialization and then another to do things upon change detection. Everything else in this project is just JavaScript/TypeScript.

The logic works by first creating a random array of values that correspond to the cells on the canvas. Then, the rules of the Game of Life dictate that if a cell is dead and there are exactly 3 neighbors around that cell that are alive, then the cell becomes alive. If the cell is alive, and it has less than 2 or more than 3 alive neighbors, then it must die. I did this by running each cell through a nested loop to loop over each of its 8 neighbors and keeping track of the number of live or dead cells and taking action on the center cell as appropriate.

One big flaw that jumps out is that I couldn't figure out how to compare two arrays to one another since [1, 2] !== [1, 2] in JavaScript land. So I ended up converting all of my arrays to JSON using JSON.stringify() and comparing strings. I've since figured out a better approach to this because I had to do something very similar in the project right after Game of Life by comparing the values of each index of the arrays that I want to compare.

Future Improvements

Admittedly, this project was a slog. I really didn't have any interest in building it in the first place. It just seems to serve no purpose other than as a learning exercise. I likely won't rewrite this app in the future. If I did, I'd change a few things:

  • Find a more efficient way of comparing my arrays of dead and alive cells rather than JSON.stringify()-ing them and comparing strings
  • I have a cell component in the project that I thought I would need, but ended up not using, so I'd remove that.
  • I should have chosen a less bold color scheme.