Conway’s Game of Life is a famous game which requires only little user interaction but is fascinating to look at and allows for rabbit-hole-style wasting time on the internet. Perfect!

I thought it would be a good way to develop my JavaScript skills. From zero to more than zero. So here it is: futiledevices.be/game-of-life.

Turns out it’s quite fun to play with the combination of HTML/CSS/JavaScript. As a starting point, I used this MDN tutorial for a simple game in JavaScript.

I learned about things like Flexbox, where this tutorial was quite helpful. Using Flexbox, it becomes really easy to make a page that works well on a computer screen as well as on a phone. I hope.

I also learned the hard way that you can’t easily check if a particular array is inside an array. In Python you would do something like:

array = [[0,0], [0,1]]
[0,0] in array
>  True

But something similar doesn’t work in JavaScript since it checks if the exact same object is in the array. So you have to write your own function that checks if all the elements of the array in the array are the same.

Anyhow, once you have the basic elements, then it’s quite easily put together. I think I used all the different ways I found online to do the same thing, but hey, if it works, it works.

Initially I had the source for the html and js in a separate repository on GitHub but in order to integrate it into this site, I moved it to the mtyt.github.io repository. If you’d like to make your own improved version, you only need these three files and perhaps update the links between them:

E.g. in game.html you’ll find these lines:

<head>
<meta charset="utf-8" />
<title>Game of Life</title>
<link href="/styles/game.css" rel="stylesheet" type="text/css">
</head>

And

<script src="/scripts/game_of_life.js"></script>

So just make sure those point to the correct location.

For debugging, you can just use your browser! For Firefox, you can find the instructions here. For other browsers, see here.

Here’s a screenshot and if you click it, you go straight to the game! Game of Life screenshot