Desktop mouse and keyboard controls

Let's think about implementing pure JavaScript keyboard/mouse controls in the game first, to see how it would work. First, we'd need an event listener to listen for the pressed keys:

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

Whenever any key is pressed down, we're executing the keyDownHandler function, and when press finishes we're executing the keyUpHandler function, so we know when it's no longer pressed. To do that, we'll hold the information on whether the keys we are interested in are pressed or not:

let rightPressed = false;
let leftPressed = false;
let upPressed = false;
let downPressed = false;

Then we will listen for the keydown and keyup events and act accordingly in both handler functions. Inside them we can get the code of the key that was pressed from the keyCode property of the event object, see which key it is, and then set the proper variable. There are no helpers so you have to remember what the given codes are (or look them up); 37 is the left arrow:

function keyDownHandler(event) {
  if (event.keyCode === 39) {
    rightPressed = true;
  } else if (event.keyCode === 37) {
    leftPressed = true;
  }
  if (event.keyCode === 40) {
    downPressed = true;
  } else if (event.keyCode === 38) {
    upPressed = true;
  }
}

The keyUpHandler looks almost exactly the same as the keyDownHandler above, but instead of setting the pressed variables to true, we would set them to false. If the left arrow is pressed (⬅︎; key code 37), we can set the leftPressed variable to true and in the draw function perform the action assigned to it — move the ship left:

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (rightPressed) {
    playerX += 5;
  } else if (leftPressed) {
    playerX -= 5;
  }

  if (downPressed) {
    playerY += 5;
  } else if (upPressed) {
    playerY -= 5;
  }

  ctx.drawImage(img, playerX, playerY);
  requestAnimationFrame(draw);
}

The draw function first clears the whole Canvas — we draw everything from scratch on every single frame. Then the pressed key variables are checked and the playerX and playerY variables (that we define earlier just after leftPressed and the others) holding the position of the ship are adjusted by a given amount, let's say 5 pixels. Then the player's ship is drawn on the screen and the next draw is called from within the requestAnimationFrame.

We could write our own KeyCode object containing the key codes. For example:

const KeyboardHelper = { left: 37, up: 38, right: 39, down: 40 };

That way instead of using the codes to compare the input in the handler functions, we could do something like this, which is arguably easier to remember:

leftPressed = event.keyCode === KeyboardHelper.left;

You can see this example in action online at end3r.github.io/JavaScript-Game-Controls and the full source code can be found at github.com/end3r/JavaScript-Game-Controls.

As I mentioned before, you can write everything on your own, but you can also take advantage of built-in functions in frameworks like Phaser. These will make your life easier and development a lot faster. All the edge cases--differences between browser implementations, etc.--are handled by the framework, so you can focus on the actual task you want to do.

The mouse interactions in the game are focused on clicking the buttons. In Phaser, the buttons you create will take any type of input, whether it's a touch on mobile or a click on desktop. That way, if you already implemented the buttons as shown in the Mobile touch controls article, it will work out of the box on the desktop too:

const buttonEnclave = this.add.button(
  10,
  10,
  "logo-enclave",
  this.clickEnclave,
  this
);

The button will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and will execute the clickEnclave() function when clicked. We can assign actions directly to the buttons:

this.buttonShoot = this.add.button(
  this.world.width * 0.5,
  0,
  "button-alpha",
  null,
  this
);
this.buttonShoot.onInputDown.add(this.shootingPressed, this);
this.buttonShoot.onInputUp.add(this.shootingReleased, this);

The button used for shooting works perfectly fine on both the mobile and desktop approach.

If you want to use the mouse's cursor position on the screen, you can do so with this.game.input.mousePointer. Let's assume you'd like to shoot a bullet when the right half of the screen is clicked with a mouse, it would be done something like this:

if (this.game.input.mousePointer.isDown) {
  if (this.game.input.mousePointer.x > this.world.width * 0.5) {
    // shoot
  }
}

If you'd like to differentiate the mouse buttons being pressed, there are three defaults you can pick from:

this.game.input.mousePointer.leftButton.isDown;
this.game.input.mousePointer.middleButton.isDown;
this.game.input.mousePointer.rightButton.isDown;

Keep in mind that instead of mousePointer, it's better to use activePointer for platform-independent input, if you want to keep the support for mobile touch interactions.

The whole game can be controlled with just the keyboard and nothing else. The built-in this.game.input.keyboard object manages the input from the keyboard, and has a few helpful methods like addKey() and isDown(). There's also the Phaser.KeyCode object, which contains all the available keyboard keys:

In the main menu of the game, we can add an extra way to begin playing. The Start button can be clicked to do so, but we can use the Enter key to do the same:

const keyEnter = this.game.input.keyboard.addKey(Phaser.KeyCode.ENTER);
keyEnter.onDown.add(this.clickStart, this);

You can use addKey() to add any key the Phaser.KeyCode object has to offer. The onDown() function is executed whenever the Enter key is pressed. It will launch the clickStart() method, which starts a new game.

It's useful to provide an option to play the game on desktop without using a mouse, so you don't have to take your hands off the keyboard.

We can support keyboard input in games built with Phaser by enabling the basic cursor keys in the create() function using the createCursorKeys() function:

this.cursors = this.input.keyboard.createCursorKeys();

This creates four directional arrow keys for us:

this.cursors.left;
this.cursors.right;
this.cursors.up;
this.cursors.down;

You can also define the keys on your own and offer an alternative, W A S D control mechanism. For example:

this.keyLeft = this.input.keyboard.addKey(Phaser.KeyCode.A);
this.keyRight = this.input.keyboard.addKey(Phaser.KeyCode.D);
this.keyUp = this.input.keyboard.addKey(Phaser.KeyCode.W);
this.keyDown = this.input.keyboard.addKey(Phaser.KeyCode.S);

To support both the cursor and W A S D keys, we need to do this:

if (this.cursors.left.isDown || this.keyLeft.isDown) {
  // move left
} else if (this.cursors.right.isDown || this.keyRight.isDown) {
  // move right
}

if (this.cursors.up.isDown || this.keyUp.isDown) {
  // move up
} else if (this.cursors.down.isDown || this.keyDown.isDown) {
  // move down
}

In the update() function we can now move the player's ship in any direction using one of the two sets of movement key options.

We can also offer firing control alternatives. For cursor keys the natural shooting button would be on the other side of the keyboard, so the player can use the other hand — for example the X key. For W A S D keys it can be the Space bar:

this.keyFire1 = this.input.keyboard.addKey(Phaser.KeyCode.X);
this.keyFire2 = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);

In the update() function we can easily check if any of those two were pressed on each frame:

if (this.keyFire1.isDown || this.keyFire2.isDown) {
  // fire the weapon
}

If yes, then it's time to shoot some bullets!

We can even define a secret cheat button:

this.keyCheat = this.input.keyboard.addKey(Phaser.KeyCode.C);

And then in the update() function, whenever C is pressed we'll do this:

if (this.keyCheat.isDown) {
  this.player.health = this.player.maxHealth;
}

We can set the health of the player to maximum. Remember: it's a secret, so don't tell anyone!

We've implemented the controls, and now we should inform the player about their options to control the game. They wouldn't know about them otherwise! When showing the how to play screen where the various ways to control the ship in the game are shown, instead of showing them all to everyone, we can detect whether the game is launched on desktop or mobile and just show the appropriate controls for the device:

if (this.game.device.desktop) {
  moveText = "Arrow keys or WASD to move";
  shootText = "X or Space to shoot";
} else {
  moveText = "Tap and hold to move";
  shootText = "Tap to shoot";
}

If the game is running on desktop, the cursor and W A S D keys message will be shown. If not, then the mobile touch controls message will be.

To skip the how to play screen, we can listen for any key being pressed and move on:

this.input.keyboard.onDownCallback = function () {
  if (this.stateStatus === "intro") {
    this.hideIntro();
  }
};

This hides the intro and starts the actual game without us having to set up another new key control just for this.

To make the game fully playable with the keyboard, it should be possible to go back to the main menu, continue playing, or restart the game from the pause and game over screens. It can be done exactly the same as before, by capturing key codes and performing actions. For example, by specifying Phaser.KeyCode.Backspace or Phaser.KeyCode.Delete you can hook up an action to fire when the Delete/Backspace button is pressed.

Ok, we've dealt with touch, keyboard, and mouse controls. Now let's move on to look at how to set up the game to be controlled using a console gamepad, using the Gamepad API.

• Previous
• Overview: Control mechanisms
• Next