2.2.2 Cycle 2 - Adding Controls

Design

Objectives

In this cycle I'm aiming to add the controls to the player, as this is one of the core mechanics of the game and is essential to debugging and adding other features later in the game.

• Add controls

• Get keyboard inputs to move the sprite

Usability Features

Key Variables

Variable Name	Use
leftKey	This is the variable that detects when the left key is pressed.
rightKey	This is the variable that detects when the right key is pressed.
player.body.velocity.x	This is the variable that holds the speed at which the player moves side to side.
playerMovement	This is a function that moves the player automatically if the player isn't pressing any keys.

Pseudocode

procedure update
    playerMovement
    if leftKey is pressed
        velocityX = -200
    else if rightKey is pressed
        velocityX = 200
end procedure

procedure playerMovement
    if game time > 500
        game input is down = false
        player x = player x * -1
    end if
end procedure

Development

Outcome

Game.js

Game.js

create() {
    // Set keys to keyboard input
    game.leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT) && game.input.keyboard.addKey(Phaser.Keyboard.A);
    game.rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT) && game.input.keyboard.addKey(Phaser.Keyboard.D);
 }
 
function update() {
  if (game.input.activePointer.isDown) {
    playerMovement();
  }

  if (game.leftKey.isDown) {
    player.body.velocity.x = -200;
  } else if (game.rightKey.isDown) {
    player.body.velocity.x = 200;
}
  
function playerMovement() {
  if (game.time.now > 500) {
    game.input.activePointer.isDown = false;
    player.body.velocity.x = player.body.velocity.x * -1;
  }
}

Challenges

This cycle wasn't too challenging but I did run into some issues with getting the controls to work and be detected, but this didn't take too long to fix, and was simply that I hadn't initialised the keys in the create function.

Testing

Evidence for testing

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Press arrow keys	Arrow keys allow basic movement of sprite on page.	The arrow keys allow for the movement of the player.	Pass
2	Press A D Keys	Player moves side to side with each press of the key.	The sprite moves side to side.	Pass

Evidence

The player being able to move side to side

What next?

• I'd like to add boundaries to the game so that player can't move off the side of the screen.

• I'd also like to make sure the camera doesn't move.