Recently, I worked on making a video game with my niece. Link to heading

I happened to own the catlasers.net domain, and wanted to do something with it.

Other than the superficial, I’d been avoiding JavaScript for far too long. I wanted to challenge myself by applying my existing knowledge from working with other languages to build a basic game engine from scratch, without any other frameworks or components - using pure, vanilla JavaScript, HTML and CSS only.

The graphics parts were relatively easy. If I had to do it again I’d do it better, and at some point there might be a bit of refactoring in the works. But part of the purpose of the project was: how far can we get building this in one weekend while my family was visiting?

As I write this, my niece is 12. She is a very talented artist. But I knew that staring at lines of code would be boring for her, so I took a few shortcuts to get something moving on the screen as quickly as possible.

While you can’t take shortcuts on bigger projects, for smaller personal ones, I’ve found that seeing your own work in action can really be a self-reinforcing motivator. A short iteration cycle with visible ongoing improvements can help provide more steam to keep going.

But I encountered something I wasn’t really used to: race conditions.

Please be logical 🧮 Link to heading

I noticed that about 30% of the time on desktop, and 70% of the time on mobile, certain images would fail to display in the game or menus until I performed some action, such as moving the mouse or resizing the window.

To the layperson, you’d expect a computer to behave consistently: given the same inputs, the resultant output should be consistent. One of the characteristics of computers that I’ve always appreciated is that they behave in a logical, orderly fashion (unlike virtually all humans, myself included). But that wasn’t what was happening. Instead, at that moment my computer seemed as though it was behaving in a rather illogical manner.

Race you to the finish line 🏁 Link to heading

A lot of simple programs and scripts run in a largely sequential order. When I’m automating processes with bash scripts, powershell, or using PHP to generate content dynamically, I can largely assume that the program will read and perform my instructions in the sequential order in which I defined them.

JavaScript and modern browsers, however, have various events and triggers that can cause execution of code while other code is still running - sometimes interacting with data while it’s in the middle of being processed. And this leads to what is known in computer science as a race condition.

The Heisenbug 🪲 Link to heading

When I added a bunch of console logging and verbose output on the screen to trace the issue, it seemed to go away. But making a problem go away isn’t the same thing as fixing it!

Most academically-inclined folks have at least heard in passing of “Heisenberg’s Uncertainty Principle.” This is often confused with the Obeserver effect but it’s still a useful construct for describing the problem at hand.

Basically: the very act of watching and attempting to debug this bug was, well, impacting the bug. It was Schrodinger’s bug.

Lock and load. Link to heading

It was fun working on this project, and while it didn’t end up quite as polished as I’d hoped, it was still a great outcome considering it was done over a single weekend.

Maybe next time the family visits, we can add some more levels and graphics. :)