My most recent HTML5 game is called BOTNIK: The benevolent bomber.

The name is intended to be a mix of robot and Sputnik-I, the first ever satellite launched by the USSR in 1957. Anyway, the idea is to drop snow bombs on snow monsters. The benevolent part is that the bombs don’t kill the monsters but actually supply them with fuel so that they can float up and escape from Earth.

Play BOTNIK the benevolent bomber

If you want to play the game, click on the button above. This post summarizes some of the new things I learned while making this game. You will note that this game reuses some code from my earlier SPACE RACE game, especially the background image (starfield) and the cute little space ship.

Adding transparency to part of your image

In this game, I wanted a fixed background image of stars and wanted a second image (buildings in a city) in “front” of it that moved to the left and right depending on which direction the UFO was going.

I made the city buildings using Keynote and then used the Preview application on my Mac to select and crop the “sky” above the buildings. This essentially makes everything above the buildings completely transparent. In the future, this might also come in handy when working with sprites.

Panning background images

A simple way to implement a background that scrolls to the left and right forever is to offset the background image suitably and then draw the same background image (the city buildings in this case) to the right or left respectively.

This idea is sometimes referred to as tiling. You essentially copy the same pattern along the X-direction in this case. Note that you should be careful to make the background image “periodic” so that the player does not detect sharp gradients between the end of one image and the beginning of the next image.

Turning off default key behavior

In this game, hitting the down arrow key on the keyboard causes the UFO to drop a snow-bomb. However, since we are playing the game in a browser, the down arrow key also implements scrolling of the web-page. We can disable this “default behavior” by using the JavaScript preventDefault() method.

    // down arrow - drop a bomb
    if(e.keyCode == 40)
    {  
        e.preventDefault();
        down_arrow_pressed = true;
    }

Adding gravity

This is relevant for the snow-bomb once it has been dropped. If you want to make the trajectory of the bomb realistic, you need to incorporate the right physics here. Essentially, the horizontal velocity of the bomb continues to be identical to what it was when the bomb was dropped. The vertical velocity (pointing downwards) is initially zero (in this case) and then increases linearly with time because of a constant gravitational acceleration. The path of the bomb turns out to be a parabola.

—

Hope you have fun playing! I’ll be back with more games soon.