Build Reactive Websites with RxJS

Detecting Collisions

This game won’t be any fun if there’s no element of danger. Open up collisions.ts and take a look around. I’ve filled in the math stuff that isn’t as relevant to the Rx core. There’s a checkCollision function that operates much like the other updates you’ve seen. This one’s filled out, since it’s more of the same that you’ve already written. One thing that sticks out is a tracker for how many frames have elapsed since an explosion happened.

gameState.explosions.forEach(e =>
  e.framesSince++;
);

We need to track this value since the explosion is animated. Canvas doesn’t allow traditional gifs, so we need to manually animate. Let’s skip ahead to the render function and see how that plays out:

canvas/rxfighter-complete/collisions.ts ...