Skip to main content

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.

Comments

Popular posts from this blog

Set The Controls For The Heart Of The Sun

When we last met, I had just started work on a level editor. I'd got as far as adding the ability to select an object and move it around, and then I added an undo/redo system using the command pattern. That was a good start, but dragging items around the level is only fun for so long. What I really want to be doing is.. ..editing the properties of the bullet spawners! And I want to be doing this in realtime as the game plays so that I can immediately see what effect my changes have made to the gameplay of the level.

World In Motion

In the last post I touched on how easy it is to score in this game - you can just camp out on the score bullet spawner and watch the points rack up. I'm going to add a little delay to the score bullets so that they start out in a deactivated and uncollectable state, and then change to active and collectable after a short time - say, half a second. To make it clear what state they are in I'm going to add code to let me change the look of Objects and allow them to be animated.

The Long And Winding Road

I started this blog back in November of last year. My aim was to document the development of a Bullet Hell shoot-em-up, written in JavaScript. Here we are, six months later, and lots has happened. With 20 posts already written, I thought that now would be a good time to take stock of what I've already done, and to look to the future and see what's to come.