Step 8

Let's implement the Sprite class:

import Block from "./Block.js";

class Sprite extends Block {
  constructor(x, y, width, height, color, dx, dy) {
    super(x, y, width, height, color);
    this.dx = dx;
    this.dy = dy;
  }

  move() {
    this.x += this.dx;
    this.y += this.dy;
  }
}

export default Sprite;

Notice the use of the extends keyword to create sub-class. Yes! JavaScript supports Inheritance. Also, note the use of the keyword super to invoke the parent class's constructor.

The dx and dy represent the (constant) velocity vector of the Sprite. The move() method updates the sprite's coordinates according to its velocity.