Search⌘ K
AI Features
Home
Courses
Reactive Programming with RxJS

Creating the Starfield of the Spaceship Game Using Range Operator

Explore how to generate and animate a starfield using the RxJS range operator as part of building a reactive spaceship game. Understand how to create star objects with randomized coordinates and sizes, update their positions continuously, and render them on a canvas to simulate traveling through space.

We'll cover the following...

The first things we need to create for a game set in space are stars. We’ll create a starfield that scrolls down to give the player a feeling of traveling through space. For this, we’ll first generate the stars using the range operator:

Javascript (babel-node)
var SPEED = 40;
var STAR_NUMBER = 250;
var StarStream = Rx.Observable.range(1, STAR_NUMBER)
.map(function() 
{ 
  return {
      x: parseInt(Math.random() * canvas.width),
      y: parseInt(Math.random() * canvas.height),
      size: Math.random() * 3 + 1
}; })

Each star will be represented by an object that contains random coordinates and sizes between 1 and 4. ...