Lunar Lander LANDING LIGHTS OPTION

In this version of the game you use the landing lights on the landing pad to make a smooth touchdown!

Create our different landing pads
Find and Replace the LANDING PAD image data, in the PRELOAD of the MainMenuState, with the code below.
This code will create three different version of our landing pad. one green, one yellow and one red.

                 
        // image data for GREEN LANDING PAD
        // ---------------------------------------------------------------
        var pad_green_Data = [
  	    'BBBBBBBB',
  	    '99999999',
  	    '9.9..9.9',
  	    '9.9..9.9'
        ];
        game.create.texture('pad_green', pad_green_Data, 3, 3, 0);
        
        // image data for YELLOW LANDING PAD
        // ---------------------------------------------------------------
        var pad_yellow_Data = [
  	    '88888888',
  	    '99999999',
  	    '9.9..9.9',
  	    '9.9..9.9'
        ];
        game.create.texture('pad_yellow', pad_yellow_Data, 3, 3, 0);
        
        // image data for RED LANDING PAD
        // --------------------------------------------------------------
        var pad_red_Data = [
  	    '33333333',
  	    '99999999',
  	    '9.9..9.9',
  	    '9.9..9.9'
        ];
        game.create.texture('pad_red', pad_red_Data, 3, 3, 0);

        

Create our landing pad
In the CREATE function of the Level1State, find the '//create a landing pad' code.
Replace the line with the line below, which will create our first pad with the green pad image.

                 
    this.pad_a = game.add.sprite(550, 450, 'pad_green');

        

Run Your Code and check for errors.
The pad should be green.
Remember to Press F12 to open the Developer Tools, click Console tab and make sure there are no errors.

Change color of Landing Pad
Add this code to the end of the UPDATE function of the Level1State. This code will change the image of the landing pad, depending on the current velocity of our rocket.

    // change landing pad color depending on velocity of rocket
    //---------------------------------------------------------------------
    if (this.rocket.body.velocity.y > 100){
      
       // change the pad image to the red pad
       this.pad_a.loadTexture('pad_red', 0);
       
    }
    if (this.rocket.body.velocity.y < 20){
      
       // change the pad image to the yellow pad
       this.pad_a.loadTexture('pad_yellow', 0);
       
    }
    if (this.rocket.body.velocity.y < 10){
      
       // change the pad image to the green pad
       this.pad_a.loadTexture('pad_green', 0);
       
    }

                
        

Run Your Code and check for errors.
Check that the pad changes color depending on how fast the rocket is falling.

Show Rockets Velocity
Add this code to the end of the CREATE function of the Level1State.
This code will add a new text object to the game which we can use to show the rockets velocity.

    // show rockets current velocity
    this.velocity = game.add.text(0,20,'Velocity: ' + this.rocket.body.velocity.y, {font: '15px Arial', fill: '#02f20e' });
                
        

Add this code to the end of the end of the UPDATE function of the Level1State.
This code will continously update the velocity object's text with the current speed.

                 
    // as long as level is not over, continously show rockets current velocity
    if (Level1State.ThisLevelIsOverDude === false) {
      this.velocity.text = 'Velocity: ' + this.rocket.body.velocity.y; 
    }

        

Run Your Code and check for errors.
Check that you can see the rockets velocity change.

Check if soft landing
Replace the function touchDown with the new touchDown code below.
This new function will check the velocity of the rocket to see if it had a smooth landing.

     
  touchDown: function(_rocket, _pad_a) {

    // check if the rocket touched down softly
    if (_rocket.body.velocity.y < 80) { 

        // stop all rocket motion
        _rocket.body.enable = false;
        
        // display game over and instructions
        game.add.text(50,30,'PERFECT TOUCH DOWN!!', {font: '50px Arial', fill: '#02f20e' });
        
        // display game over and instructions
        game.add.text(50,100,'Restart? \npress spacebar', {font: '40px Arial', fill: '#ffffff' });

        // this level is over
        Level1State.ThisLevelIsOverDude = true;
        
    } else {
     
        // stop all rocket motion
        _rocket.body.enable = false;
      
        // display game over and instructions
        game.add.text(50,100,'LANDING TOO HARD! GAME OVER \n Restart? \n press spacebar', {font: '40px Arial', fill: '#ffffff' });
      
        // this level is over
        Level1State.ThisLevelIsOverDude = true;

    }

  },
                
        

Run Your Code and check for errors.
Try to make a soft landing.

You're done! You are a coder!!
What other things can you add to this game?
What other games can you make up using this code!?