Constant Craving

In this post I'm going to do some housekeeping on the game and add four small things that each make the development process a little bit nicer:

1. A constants file to keep all the configuration magic numbers in one place
2. A script to serve the game files up to your browser from your machine, so you can build and test the game locally and very quickly
3. A better way to see the debug console output without having to open up the browser debug console
4. A favicon to stop the browser complaining that it can't find one

Constants

We all know that using magic numbers in code is bad, right? Well, I've used them in a few places in the game so far. Now that the code has grown beyond a few dozen lines it's time to move those numbers to a better place. I've added a configuration file where all of these numbers are stored together in one place. This makes some of the other code easier to read (using names instead of magic numbers) but it also makes it easier to go in and tweak those values if and when I need to.

Here's the code to the config file. It uses the enumerated types class I created earlier to prevent the values from being changed at runtime:

Local Server

To run the game you need to use a webserver. The way to do this is to install a webserver (or get an online webspace provider), copy the contents of the source directory there and then open the page in your browser. That's a bit long-winded. I want to keep the development-test-iterate cycle as short as possible. I could install a webserver locally on my machine to do this, but there's an even easier solution: use Python. Python comes with a built-in simple webserver. In fact, it's as simple as opening a console in the source directory, typing "python -m http.server" and then browsing to http://localhost:8000.

To make it a little easier to manage, I've added a small Python script that you can just double-click (or execute in whatever way you like) to start serving the game on http://localhost:8000. Here's the code:

Once the server is running, you can edit the code, save it, then just refresh the page in your browser to see the changes. Fast iteration time is a cornerstone of good development.

Debug Console

Logging is super important in debugging any application, and just using console.log() doesn't really cut it. I've previously written about a simple method for debugging JavaScript by writing the messages to the webpage so that you can see them more easily. I'll be using that same method here, but I'll be adding a couple of severity levels to the logging system. Severity levels make it easier to differentiate the trivial (things that are normal behaviour) from the serious (things that are actually errors).

Here's the code for the log manager:

There are four different severity levels defined, and here are some examples of how I might use them:


Note that the fatal severity level will also open an alert dialog in the browser, effectively stopping execution of the page.

Favicon

When you load the game up in a browser, you'll notice that there's no favicon and no page title. If you look in the browser's debug console, you can see that the browser is missing the favicon too:

Both of these are trivial to fix. For the favicon I uploaded the player sprite image to https://www.favicon.cc/, downloaded the favicon.ico file that it generated and saved it in the source directory. To add the page title I just added a Title element to index.html.

Wrapping Up

In this post I tidied up and fixed a number of small issues in the game. All of them make the game easier to work on, but none of them were really big enough for their own post.

You can see the new code here and the playable online version is here.

Next

So, what's up next? I've been concentrating on tech so far, and I think it's time to switch over to working on the gameplay a little. I'm going to add some way to score points, and then I'll use that as a way to start tuning the gameplay - it needs to be fun to score big.

Feel free to leave comments to let me know where you think I should go next.