Keyboard Movement

With just a little more work you can build a simple system to control a sprite using the keyboard. To simplify your code, I suggest you use this custom function called keyboard that listens for and captures keyboard events.

  1. function keyboard(value) {
  2.   let key = {};
  3.   key.value = value;
  4.   key.isDown = false;
  5.   key.isUp = true;
  6.   key.press = undefined;
  7.   key.release = undefined;
  8.   //The `downHandler`
  9.   key.downHandler = event => {
  10.     if (event.key === key.value) {
  11.       if (key.isUp && key.press) key.press();
  12.       key.isDown = true;
  13.       key.isUp = false;
  14.       event.preventDefault();
  15.     }
  16.   };
  18.   //The `upHandler`
  19.   key.upHandler = event => {
  20.     if (event.key === key.value) {
  21.       if (key.isDown && key.release) key.release();
  22.       key.isDown = false;
  23.       key.isUp = true;
  24.       event.preventDefault();
  25.     }
  26.   };
  28.   //Attach event listeners
  29.   const downListener = key.downHandler.bind(key);
  30.   const upListener = key.upHandler.bind(key);
  32.   window.addEventListener(
  33.     "keydown", downListener, false
  34.   );
  35.   window.addEventListener(
  36.     "keyup", upListener, false
  37.   );
  39.   // Detach event listeners
  40.   key.unsubscribe = () => {
  41.     window.removeEventListener("keydown", downListener);
  42.     window.removeEventListener("keyup", upListener);
  43.   };
  45.   return key;
  46. }

The keyboard function is easy to use. Create a new keyboard object like this:

  1. let keyObject = keyboard(keyValue);

Its one argument is the key value that you want to listen for. Here’s a list of keys.

Then assign press and release methods to the keyboard object like this:

  1. keyObject.press = () => {
  2.   //key object pressed
  3. };
  4. keyObject.release = () => {
  5.   //key object released
  6. };

Keyboard objects also have isDown and isUp Boolean properties that you can use to check the state of each key.

Don’t forget to remove event listeners by using the unsubscribe method :

  1. keyObject.unsubscribe();

Take a look at the keyboardMovement.html file in the examples folder to see how you can use this keyboard function to control a sprite using your keyboard’s arrow keys. Run it and use the left, up, down, and right arrow keys to move the cat around the stage.

Keyboard movement

Here’s the code that does all this:

  1. //Define any variables that are used in more than one function
  2. let cat, state;
  4. function setup() {
  6.   //Create the `cat` sprite 
  7.   cat = new Sprite(resources["images/cat.png"].texture);
  8.   cat.y = 96; 
  9.   cat.vx = 0;
  10.   cat.vy = 0;
  11.   app.stage.addChild(cat);
  13.   //Capture the keyboard arrow keys
  14.   let left = keyboard("ArrowLeft"),
  15.       up = keyboard("ArrowUp"),
  16.       right = keyboard("ArrowRight"),
  17.       down = keyboard("ArrowDown");
  19.   //Left arrow key `press` method
  20.   left.press = () => {
  21.     //Change the cat's velocity when the key is pressed
  22.     cat.vx = -5;
  23.     cat.vy = 0;
  24.   };
  26.   //Left arrow key `release` method
  27.   left.release = () => {
  28.     //If the left arrow has been released, and the right arrow isn't down,
  29.     //and the cat isn't moving vertically:
  30.     //Stop the cat
  31.     if (!right.isDown && cat.vy === 0) {
  32.       cat.vx = 0;
  33.     }
  34.   };
  36.   //Up
  37.   up.press = () => {
  38.     cat.vy = -5;
  39.     cat.vx = 0;
  40.   };
  41.   up.release = () => {
  42.     if (!down.isDown && cat.vx === 0) {
  43.       cat.vy = 0;
  44.     }
  45.   };
  47.   //Right
  48.   right.press = () => {
  49.     cat.vx = 5;
  50.     cat.vy = 0;
  51.   };
  52.   right.release = () => {
  53.     if (!left.isDown && cat.vy === 0) {
  54.       cat.vx = 0;
  55.     }
  56.   };
  58.   //Down
  59.   down.press = () => {
  60.     cat.vy = 5;
  61.     cat.vx = 0;
  62.   };
  63.   down.release = () => {
  64.     if (!up.isDown && cat.vx === 0) {
  65.       cat.vy = 0;
  66.     }
  67.   };
  69.   //Set the game state
  70.   state = play;
  72.   //Start the game loop 
  73.   app.ticker.add(delta => gameLoop(delta));
  74. }
  76. function gameLoop(delta){
  78.   //Update the current game state:
  79.   state(delta);
  80. }
  82. function play(delta) {
  84.   //Use the cat's velocity to make it move
  85.   cat.x += cat.vx;
  86.   cat.y += cat.vy
  87. }