How to Create a Mail Pilot in Your HTML5 Game - dummies

How to Create a Mail Pilot in Your HTML5 Game

By Andy Harris

This is a type of a scrolling racer game you can use in your HTML5. This type of game has long been a staple of the video game universe because there can be so many interesting variations.

In this particular iteration, you’re a pilot flying a plane over an island archipelago. Your job is to fly over the islands and avoid the clouds. The game features user control of the airplane’s X position and an endlessly scrolling world.


  • Identify the key variables: In this game, the main variables are the airplane, the islands, and the clouds. All are implemented sprite objects.

  • Create each object in isolation: Identify what each object should do and implement those basic features.

  • Build a single element; then convert it to an array: The clouds object is really an array. It’s very common to have arrays of objects. The key is to build a single element first that does what you want and then convert that object to an array.

    Typically, when you do so, you’ll build two custom functions. The first function creates the array and uses a for loop to initialize each object in the array. The second function also has a for loop that steps through each object, invoking any of its event functions and updating each object on the screen.

  • Manage interactions: Most of the interesting things that happen in an arcade game occur when objects collide, so collision routines are an important part of game development.

How to build an “endless” game background

One interesting feature of this game is the endless tiled background. The user avatar doesn’t move forward at all. Instead, the illusion of motion comes from having a background that moves down perpetually, making it look like the plane is moving up.

Of course, it’s impossible to create a truly endless background, but you can do a couple of tricks to produce a believable illusion:

  1. Build a sprite for the background.

    The easiest way to get the moving background behavior is to simply make the background a very large sprite.

  2. Create an image larger than the scene.

    As this particular graphic is meant to tile vertically, it has been made the width of the scene (800px) but much taller than the scene (1440px tall for a 600px tall scene). Larger sizes lead to less-obvious repetition but will be more resource-intensive. If you want horizontal scrolling, make your image larger on the X axis than the scene.

  3. Duplicate the top and the bottom.

    The key to an “endless” scrolling effect is to have the top and bottom (or left and right of a horizontal image) identical to each other. Use the copy and paste tool of your graphics package with the Clone and Smudge tools to get this effect.

  4. Overwrite the checkBounds function.

    The background sprite will need custom boundary behavior, so overwrite the sprite’s checkBounds method.

  5. Check to be sure the background never leaves the screen.

    In the Mail Pilot example, the sprite starts far above the scene and moves downward. With some testing (and the console.log() command), The background begins to leave the scene at a Y value of 720. Use an if statement to check for when that happens.

  6. Move the background so the identical section is showing.

    The top and bottom of the ocean gif are the same, so when the ocean is about to leave the scene, the user is seeing the top of the large ocean gif. Change the Y value so the user is now seeing the identical bottom of the same .GIF, and keep it moving. You may need to use console.log() and some testing to get it to work like you want.

Here’s the code for the checkBounds() method so you can see it in action. Note that you’ll have to change the specific values to match your image size.

  tOcean.checkBounds = function(){
   //seamless ocean gif repeats
   if (this.y > 720){
    this.setPosition(400, -120)
   } // end if
  } // end checkBounds

Improve your game’s top-down racer

This type of game is very popular because it’s easy to write and can be modified in a number of simple ways to get many different types of games. Here are a few suggestions:

  • Add a scoring mechanism. The most obvious improvement is to add some sort of scoring system. Award points for touching the islands and take away life for touching clouds.

  • Build up the difficulty level. Consider adding more clouds, changing the size of the various elements, or changing the speed.

  • Add powerups. Powerups are simple sprites that provide some sort of benefit or disadvantage when they’re activated (usually by shooting or running over the powerup). The options are nearly limitless but here are a few starter ideas: Temporarily allow vertical as well as horizontal motion, change the speed, and make the plane larger or smaller.

  • Change the motion. Right now, the plane moves only on the horizontal axis. Allowing motion on the vertical axis as well will dramatically change the gameplay.

  • Add weapons. Add bullets for an interesting twist. If you want a lot of bullets, you’ll need to create an array.

  • Switch to horizontal scrolling. You can switch to horizontal scrolling quite easily. You can also allow scrolling in either axis, but you’ll have to really think through the boundary-checking aspects.