How to Make a Game with JavaScript

I have long been thinking about creating a multi-player online game, which is currently called Cat Chess but might end up being called Cat Defence in the spirit of the Tower Defence genre of games.

For the backend I am pretty sure I will use Python, but for now we need to look at how the front-end can be made.

Game Engines

My success criteria for the game (outside of it being enjoyable to play) is for it to be a fun process for me – to learn more than I know now, and for it to be “pick up and play” for as many people as possible. Even if I don’t succeed in it being popular, I will still “win” if I can learn a whole bunch while failing.

This means, at least in the beginning, it shouldn’t be a desktop or native mobile app, even though as already mentioned, Python is my go-to language, and there are also many things like Game Maker especially for this purpose.

Those systems would require the game to be downloaded and installed, restricting who can (or will be bothered) to play the game and also how much effort I need to put in just to bootstrap it. Especially if I need to contend with app stores, eww. I can always do versions for target systems later, but for now, I need to see if I have a good game idea first with a Minimum Viable Product.

The most widely accessible system would be an HTML5 browser-based game. I could make my own game engine using the Canvas object, but people have done that heavy lifting already.

Seeing as I won’t be making money from the game, I don’t want to buy a license, so that leaves me with $free, and open-source free.

Two I looked at but ended up not going with are …

• I have done a lot of work with AOZ.Studio, a basic->JavaScript transpiler – it is a very nice system. It does, however, currently require a splash screen.
• Phazer is well respected and Object-Oriented.

The one I chose though was Kaboom from the Replit folks. It’s quite new, light, and made immediate sense when I went through the example code, but the main thing is it provides the features that the majority of 2D games (at least those I will make) require:

• Sprites and animation
• Movement
• Collision detection
• Sounds
• Scenes, Maps/Levels
• Viewport/Camera
• Etc

Coding a Platformer with Kaboom

You can grab the Kaboom JavaScript library at kaboomjs but for now, for speed, I went with Replit and their Kaboom starter blueprint.

Using their provided game assets I built a simple platformer:

The idea of the game is to get you (the ball) to the key by jumping on platforms and avoiding the bomb. You score bonus points for eating the apple.

Very, very simple stuff that I put together in a couple of hours from having never worked with the game engine before, showing the ease of use and clarity of their system.

Scenes

In Kaboom the player experience is partitioned into “Scenes”.

For example, I need to have a title page, the game itself, then a screen to show you lost and another to show that you won.

They are constructed very simply:

scene("title", () => 
{
  add([
  text("Click to start"), { 
    width: width()
  }])

  // on mouse click
  onClick(() => {
    go("game")
  })
})

To move to another screen, you use the command go("scene-name") so my title screen moves to the game after the player clicks anywhere on the screen.

Sprites

Sprites are simply regular graphics that you find on the web. I am using PNG files because they were included already but also because they are crisp, colourful and have a transparent background.

We load the sprite first:

loadSprite("bomb", "sprites/bomb.png")

then we add them to the scene:

    // Bomb
    var bomb = add([
      // list of components
      sprite("bomb"),
      pos(500, 340),
      area(),
      body(),
      origin("bot"),
      "deadly","item"
    ])

You will notice that our added object has the graphic and the X, Y coordinate specified, as you would expect, but also by specifying “Area” we tell the game engine to check for collisions, and “Body” we tell it that gravity affects this object.

We then get to “Origin”, which defines the origin point of the object’s position. By default pos() defines the top-left point of the shape, here we change it because I want my objects to sit on platforms or the floor.

Finally, we have tags, which allow grouping and organization of our objects. For example I say that the bomb is deadly, so I can tell the engine what to do with anything deadly rather than duplicate code for everything that could kill the player.

Collision Detection

Using the tags we can have multiple objects play the same role in the game, for example, I said the Apple object is a prize, and prizes give bonus points. Using the same collision detection statement I can also have bananas and a cherry just by adding them to the scene.

   player.onCollide("prize", (prize) => {
      destroy(prize)
      burp();
      score.text = parseInt(score.text) +10
    })

When we collide with the prize, it is removed from the playfield, and we increase the player’s score.

Burp is a special sound effect, but we have other sounds using the built-in features …

Audio and Sound Effects

Like Sprites, we must load the audio asset before using it:

loadSound("music", "/sounds/music.mp3")

To play a sound we can simply use play("music") but by assigning a variable we then get to control it later, so music=play("music") allows us to stop the music using music.stop()

Controls

Kaboom makes controlling your player very easy, for keyboard control you can simply provide functions for each key, with a special Jump function especially for platformers:

    onKeyDown("left", () => {player.move(-SPEED, 0)})
    onKeyDown("right", () => {player.move(SPEED, 0)})
    onKeyDown("up", () => {
      if(player.grounded()) 
      {
        player.jump(JUMP_FORCE);
      }
    })

Complete Game in Action

As I said, it is a very basic game, but it allowed me to learn the majority of what I needed to evaluate the game engine before putting too much time and energy into something that might not have worked out.