Game Development

Let’s build out animations as well as a simple game using the canvas element. As part of the game, you'll build a small, RxJS-based framework of your own.

We'll cover the following

Before starting let’s see some important questions:

  • Why do I want to read this?
    • At this point, you’ve learned a ton about Rx in many situations, why not have a little fun?
  • What will I learn?
    • How to build a spaceship game with an Rx backbone
  • What will I be able to do that I couldn’t do before?
    • Impress your friends with your amazing game-making skills
  • Where are we going next, and how does this fit in?
    • After this, you will ride off into the sunset on an Rx-powered horse, ready to take on any trouble the frontend world gives you.

HTML5 canvas game

Frontend development doesn’t have to be dreary forms on repeat. It’s always good to take a step back from the day-to-day and stretch yourself, especially if you learn new techniques along the way.

In this chapter, you’ll depart from typical web app-based development and build a game using the <canvas> API defined by HTML5.

As part of that, you’ll learn about new Rx techniques to handle the rapid-fire state changes a game brings. Games also involve many moving objects, and you’ll see how to use Rx’s to create animations of all kinds.

You’ll also move beyond what the library provides and create your own operators. Long-time game developers and complete video game beginners will both learn something new from this chapter.

Get hands-on with 1400+ tech skills courses.