SmoothDaddyG - State Functions

In this version of the game you will change the input from touching the screen to using the keyboard.

Capture Keyboard Inputs
In the playlevel1.js file's UPDATE function, find the code comments called "// make bob move".

Replace the "// make bob move" and the "// make bob jump" lines of code with the code below.

The code below captures the A, D and UP arrow keyboard inputs instead of the touch screen.



    // make bob move
    // -------------------------------------------------------------------

    // first stop bob
    this.bob.body.velocity.x = 0;

    if (game.input.keyboard.isDown(Phaser.Keyboard.A)) {
      this.bob.body.velocity.x = -200;
    }
    if (game.input.keyboard.isDown(Phaser.Keyboard.D)) {
      this.bob.body.velocity.x = 200;
    }


    // make bob jump
    // -------------------------------------------------------------------
    
    // check if bob is sitting on an immovable object
    this.onTheGround = this.bob.body.touching.down;

    // bob is only allowed to jump when he is on the ground
    if (this.onTheGround) {
      if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
        this.bob.body.velocity.y = -900; 
        this.bob.body.velocity.x = 0;
      }
    }

Run Game and Check for Errors
Press F12 to check console for any problems. Play It! Use A and D keys to move left and right and UP arrow to jump.

Change our GameOver screen to also use keyboard Input
In the gameover.js file's UPDATE function, replace the code with the code below.



     // goto menu state when user taps screen
     if (game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) { 
        game.state.start('menu');
     }

Run Game and Check for Errors
Press F12 to check console for any problems. Play It and Die to test the gameover code! Press SPACEBAR to restart game.

Change our Main Menu to use keyboard Input
In the menu.js file's UPDATE function, replace the code with the code below.



     // when user presses spacebar, play game
     if (game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) { 
        game.state.start('playlevel1');
     }

Add Instructions
In the menu.js file's CREATE function, replace the code with the code below. This code will add some instructions on how to use the keyboard to play.



    // change the background color 
    game.stage.backgroundColor = '#2a5699';


    // fill: means inside color of font
    // stroke: means outside color of font
    txtTitle = game.add.text(game.world.centerX, game.world.centerY / 2, '', { font: "30pt Courier", fill: "#f442d9", stroke: "#119f4e", strokeThickness: 10 });
    txtTitle.anchor.set(0.5);
    txtTitle.text = 'Run Bob Run';

    txtPlay = game.add.text(game.world.centerX, game.world.centerY - game.world.centerY / 3, '', { font: "15pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtPlay.anchor.set(0.5);
    txtPlay.text = 'Press Spacebar to Play!';

    txtPlay = game.add.text(game.world.centerX, game.world.centerY - game.world.centerY / 4, '', { font: "12pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtPlay.anchor.set(0.5);
    txtPlay.text = 'Use keys A and D for left and right, UP Arrow Jumps.';


    txtCredit = game.add.text(game.world.centerX, game.world.centerY / 8 + game.world.centerY, '', { font: "10pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtCredit.anchor.set(0.5);
    txtCredit.text = 'This game designed and built by bob at Cedar Park Middle School';

Run Game and Check for Errors
Press F12 to check console for any problems. Play It!

code on plnkr

Run Bob Run - Keyboard Input