Build Reactive Websites with RxJS

Tracking User Input

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. First, we need to track keyboard state. Open gameState.ts and add the following:

canvas/rxfighter-complete/gameState.ts

// 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;