Build Reactive Websites with RxJS: Master Observables and Wrangle/

...

/

Tracking User Input

Tracking User Input

Let's see how we can track the keyboard state to manage the player movement in the game and render the player on our screen.

We'll cover the following...

Tracking and updating the stars was fairly simple, every frame required the same update. Let’s try something more challenging. Our game needs a player, otherwise, it’ll be pretty boring.

Instead of the same update every time, our player update function needs to figure out what keys are currently being pressed and move the player’s ship around.

Tracking keyboard state

First, we need to track keyboard state. Open gameState.ts and add the following:

Press + to interact
// Keep track of the state of all movement keys
let keyStatus = {};
fromEvent(document, 'keydown')
.subscribe((e: any) => {
  keyStatus[e.keyCode] = true;
});
fromEvent(document, 'keyup')
.subscribe((e: any) => {
  keyStatus[e.keyCode] = false;
});

This keyStatus object tracks the state of the entire keyboard. We create it outside of the ...