Getting started with coding new games in JavaScript

Introduction

Hello everyone, and welcome to a new blog post… I know I haven’t written in a very, very long time.

This post is for aspiring developers, as well as curious people who have been wondering just how that awesome cyclepath game was done, or why the hell Oriol updated beatstar to run on this weird thing called Electron and why it now runs on mac.

The answer is quite simple: Javascript.

When my friend Guillem first told me about audiogames written in Javascript, and showed me a weird prototype of something called dark Defender (yes, that game where you have a bunch of enemy space ships, motherships, falling screaming humanoids and other miscellaneous aerial parafernalia, I felt overwelmed because, even though I wanted to make cross platform games, Dark Defender’s code was complicated, I had 0 Javascript knowledge, and there was no standard way to do things as everyone was still experimenting.
Besides, isn’t JS a language for the web? How can you guys even think of coding audiogames like that?
However, I was pleasantly surprised to see that JS is not only a valid option, but a very interesting one at that. Not only is JS very fast, but it also has packages for anything you can think of (by the use of node and NPM).
There are many things you will need to learn that are quite different to BGT, and for this I suggest you to look at other audiogames written in JS such as Cyclepath, or the new upcoming version of Danger on the Wheel.
I suggest not to learn from JS from the new Beatstar, as much of the code uses unorthodox functions to access the filesystem which are typically not available in Javascript unless you use Electron (more on that later), but the coding style is a bit bgt-ish. The 2 main reasons for this are the following:
Firstly, I wanted to write Beatstar in JS as quickly as possible, so I took a bit of the bgt code and turned it around with the fewest code changes possible. Secondly, it was my first experiment in JS and thus I consciously ignored most of the advice I received from more experienced JS developers such as my friends Talon and Guillem.

With this in mind, Let’s move on to what really matters. The new audiogame coding template I am about to release for you all to start building games from.

A brief explanation about the development process

To download the game building template, you will have to get it via git clone by issuing the following command from the command line.
You will need to have git installed for this to work:
git clone https://code.oriolgomez.com:9900/ogomez92/template.git

There are two main ways to develop Javascript audiogames: My preferred option is to use Electron, a Chromium based browser which runs the game locally on my machine.
This is going to be your preferred way if you are planning to release your game as an Electron app rather than a web browser link. This is good for sound-intensive games like Beatstar which load a bunch of music, etc because loading from the hard drive is usually faster than downloading from the internet, unless the sounds have stayed in your cache. Either way, playing from the internet obviously requires an internet connection and thus, if your game doesn’t need one, an Electron app is just fine.
Developing via Electron is good if you don’t want to bother opening your web browser just to test a game. I know other people who prefer using the http server bundled with express, which creates a server pointing to port 3000 (usually) which you can then point to via your web browser by going to http://localhost:3000
Express is not installed via my template, so if you want to use it, you will have to install it via npm (npm install express) and read the documentation to get started.

NPM

NPM is a package manager for Javascript. It can be used to install, update, and remove unneeded JS modules that can be useful for your game. It contains everything you could think of, from sound libraries to maze generators, card decks, physics engines and much more.

when you first download the template from git, the NPM modules are not included to save some space. Before running the game you will need to install these modules by running the following command:
npm install

This command installs all the necessary modules needed to run the template.
You can add new modules by typing npm install modulename –save
The –save switch puts that module in the package.json, which is the container for all your dependencies. This means that, the next time someone downloads your cool new game from a git repository or you use it on another computer, that new module you are installing will also be taken into account.

About Parcel-bundler

Parcel-bundler is a handy tool which compiles your game, modules and all your imports so they are optimized and harder to read by people who want to look at your code with electron archive extractors. In always include it in my games because it lets me use imports in an eficient manner. For this reason, if you use my template you will have to run the following command before starting the game:
npm run watch
npm run watch tells parcel that hey, start looking for changes in the code, whenever a file is modified rebuild my game.

Once this is done, you can type npm run start to tell electron to open index.html, which you will not need to modify until you know the name for your new game. The name for your new game is in the html’s title tag.

Once Electron runs, you can check that the template is working by hitting control shift i (control option i on a mac). This will display the developer options. Click on console, and the console window should pop up saying: Setup success!

A note about sound libraries

Hey, I see some confusing files here! sonoSource.js, soundSource.js, soundObject.js… Why!

There are two main libraries for sound playback in Javascript: Howler and Sono.
The conclusion I came up with is that Howler is best for games which do not require HRTF, as it is much more lightweight. However, Sono has a bunch of effects, and both me and Talon have used it for games like Cyclepath and Danger on the wheel.

Conclusion

If you have done all these steps and it works, congratulations! You are ready to start experimenting with your new Javascript audiogame environment.
Please take a look at the explanations found in the file game.js, inside the client folder, and the sound playback example as well as the game timer.

If this post is well received, I will write more posts like this one explaining other things.

I hope this helps someone in their pursuit of audiogame development!

Leave a Reply

Your email address will not be published. Required fields are marked *