You can be a Winner at the Game of Life!

But you can enjoy the animations and learn about lots of stuff through it!

Wikipedia - Conway's Game of Life

Conway's Game of life is a special cellular automaton program/game of sorts designed in the 70s. I first learned about it at one of those sciencey kids' museums of sorts back when I was a kid, and... I hated it. It didn't seem like any kind of game to me. It just didn't make sense. Where's Mario?

In adulthood, I've learned to appreciate the beauty of it. I use it as a learning tool whenever I need to learn a new programming language, paradigm, etc. I've written a C++ version that was hyper-fast using SDL, and a Python version where I experimented with a GUI and made the output into .gifs, among others. In fact, somewhere in the aether exists a QBasic version I did as a youngster in text mode. I find it's a great way to get used to the specifics of working in a new language: at first the syntax and data structures, next the challenge of displaying/drawing the output, etc.

So now in my Javascript learning, I've been putting together a vanilla JS version of the Game of Life for about 10 days now.

So far, I've made a robust version of the program. The algorithm it uses to calculate is naive, but fast enough for the purposes of this exercise, and always under improvement. I found the challenge in working in the javascript/HTML/CSS pipeline, interacting with the dom, etc. this time, but it's coming together.

Available Here on Github

The designs and animations... they beautiful! Color selections, speed selections, resizing the cells, it's all there in a relatively small codebase.

I ran into challenges: my very first version wasn't very robust and only worked for fixed-sized displays, but now the display canvas is dynamically resized and recalculated for the device it's being used on. Cells 'wrap' toroidally around the board to make the animations more interesting.

This is still a work in progress, but I highly recommend to beginners, or those switching languages, to find projects like this: one's that you may have already tackled one way, to tackle in a new manner. You'll find new quirks of the language, and new paradigms to work in, and just in general it's a great learning experience.

So, what is it exactly?

Conway's game of life is played on a grid. Those 'live' cells that have 2 or 3 live neighbors survive to the next generation. Any dead cell with 3 live neighbors becomes alive itself. All other live cells die, and all other dead cells stay dead.

That's the entirety of the rule set. My version uses both clicking on the board to alter/draw on patterns, and a randomizer to randomize the initial states of the boards, and the speed and size of cells can be adjusted. Try it out, you can find some fun stuff! (And some pesky bugs, I'm sure)

TRY IT on Netlify

As the program grows bigger, it became more and more important to refactor: my initial version displayed on a fixed-size display and used global variables (ew). This is tackled now by having both a StateManager object and a Boards object to hold much of the data we need when working with the game rules. This class system feels a bit not-Javascripty (like how some code is non-pythonic) but it works and I have my reasons for doing it in this way.

So what to do if you want to make your own?

I highly recommend every beginner use the Game of Life as an early project in their learning experience. Just look up the rules and try to figure out how best to implement them. It's fun! And there are so many options with colors, speed, cell size, board size, etc. that you can make these animations almost into art of sorts.

So try it out! Everybody's made a drum machine and a calculator. Make a game of life! Some good ol classic Computer Sciencey goodness.