How to Create a Lunar Lander in Your HTML5 Game - dummies

How to Create a Lunar Lander in Your HTML5 Game

By Andy Harris

This is one of the oldest game types. The basic idea is to replicate landing on a planet for your HTML5 game without an atmosphere. The Apollo astronauts had a limited amount of fuel to slow a rapidly moving spacecraft and bring it to the surface safely. This game is a variation of that theme.


The essence of a lunar-lander game is the interplay between thrust and gravity. The game relies heavily on the addVector() method. Gravity imparts a small downward thrust every frame, which can be counteracted by thrust from the arrow keys.

The game features four different lander images (to provide feedback that the user is applying thrust), which are simply swapped with the setImage() method as needed.

Game collisions

The most interesting part of this game is the landing routine. The ordinary collision routine is not specific enough to handle this type of collision, as the landing will be considered a safe landing only if a number of conditions are true. The cleanest way to check for multiple conditions is in a deeply nested if structure, like the following:

  tLander.checkLanding = function(){
   if (this.falling){
   if (this.y > 525){
    if (this.x < platform.x + 10){
    if (this.x > platform.x - 10){
     if (this.dx < .2){
     if (this.dx > -.2){
      if (this.dy < 2){
      this.falling = false;
      message = "Nice Landing!";
      } else {
      message = "too much vertical speed";
      } // end if
     } else {
      message = "too fast to left";
     } // end if
     } else {
     message = "too fast to right";
     } // end if    
    } // end 'x too big' if
    } // end 'x too small' if
   } // end 'y not big enough' if
   } // end 'are we falling?' if
  } // end checkLanding

When you’re checking for several conditions at once, it’s best to create a separate if statement for each. Place each if statement inside the next, so the most deeply nested part of the code represents success.

  1. Determine if you’re falling.

    A Boolean variable called falling was created that describes whether the spacecraft is falling or landed. If falling is true, the gravity force is turned off. It only makes sense to check for a landing state if you’re currently falling.

  2. Check the Y value.

    Because the platform is placed at a Y value of 550, the lander will appear to be landed when its Y value is larger than 525. You’re really only concerned with the bottom of the lander touching the top of the platform. Note that this check happens inside the falling check. If any condition fails, it is not necessary to check the others.

  3. Check the X value.

    You’ll want the center of the lander to be within ten pixels of the center of the platform, so use a pair of nested if statements to check the X locations.

  4. Check horizontal speed.

    For a safe landing, the craft must have a dx value between -0.2 and 0.2. (This is somewhat arbitrary, but upon testing, it feels about right.) This is best checked with a pair of nested if statements.

  5. Check vertical speed.

    If everything else is working well, check to see that the craft is not falling too rapidly. Use the dy property to determine how quickly the spacecraft is falling.

  6. Provide feedback with else clauses.

    A deeply nested structure like this shows you the real value of proper indentation and commenting. Provide feedback in the various else clauses to explain why the landing was considered a failure.

Game text consoles

Another interesting part of the code is the mechanism for displaying text data to the user. The easiest way to do this is through a simple HTML div. Use CSS to place the div exactly where you want it to be. You should rarely use absolute positioning in normal web development, it makes sense in the context of creating a label for a game.

Note that you might need to set the z-index property to a high value to ensure it appears above the canvas, or it may not be visible to the user. Here’s the CSS that makes the label look like output on the screen:

  #stats {
   position: absolute;
   font-family: monospace;
   left: 50px;
   top: 50px;
   z-index: 999;
   color: white;

Ways to enhance your game

This is just a starting point for the game. Many other interesting features could be added:

  • Fuel: Add a fuel variable that is decremented each time the user applies thrust. Vertical thrust should use more fuel than horizontal adjustments. If the fuel level gets below zero, ignore further thrust inputs. This mechanism puts a realistic complication into the game.

  • Powerups: Add some other features the user can earn: bonus fuel, less intense gravity, a wider platform.

  • Multiple landings: Maybe move the landing pad after a successful landing, or have the user carry an object to a second platform.

  • Obstacles: Put space junk or buildings in the way that will crash the player on contact.

  • Change the theme: The same mechanics can easily be used for a helicopter or hot air balloon game.