Moving TypeScript Canvas Objects

We're going to add a little code to our game loop, that will move our two circles off the screen to the right and down. Once the circle has moved off the screen, we're going to reset it's position so it appears back on the left or top of the screen.

Here's what the new game loop will look like:

function gameLoop() {
   requestAnimationFrame(gameLoop);
   ctx.fillStyle = "black";
   ctx.fillRect(0, 0, 1280, 720);

   if (circle1.x++ >= 1280 + circle1.radius) {
      circle1.x = -circle1.radius;
   }


   if (circle2.y++ >= 720 + circle2.radius) {
      circle2.y = -circle2.radius;
   }


   circle1.draw();
   circle2.draw();
}

For circle1 we are adding 1 to the x axis each frame (using circle1.x++). This has the effect of moving the red circle 1 pixel to the right every frame. The "if" statement checks to see if the circle has moved completely off the screen to the right. If it has, we then change the x position of the circle to be off the screen to the left by the number of pixels in the circle's radius. The circle then continues to shift to the right, coming into view from the left side of the canvas.

We are doing something similar for circle2. The difference is we are moving the circle along the y axis so the circle will be moving down the canvas instead of to the right. We are then checking to see if the circle has moved off the canvas on the bottom and moving it back up above the canvas.

Drawing more Shapes

At this point you might be wondering why we bothered creating an iShape interface. Well, we are about to add more types of shapes to our game. I guess at this point it's not much of a game, as fun as it is to watch a few circles moving across the screen. ;-) Let's try to do something interesting like adding a rectangle to the mix. We'll create our Rectangle using the iShape interface we used when we created the circle.

Here's what the rectangle class will look like:

class cRectangle implements iShape {
   public x: number = 0;
   public y: number = 0;
   public lineWidth: number = 5;
   public width: number = 0;
   public height: number = 0;
   public color: string = "blue";

   constructor(x: number, y: number, width: number, height: number, color: string = "blue", line_width: number = 2) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.color = color;
      this.lineWidth = line_width;
   }

   public draw = (): void => {
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = this.color;
      ctx.lineWidth = this.lineWidth;
      ctx.rect(this.x, this.y, this.width, this.height);
      ctx.stroke();
      ctx.restore();
   }

}

The cRectangle implements all the iShape methods and attributes. Like cCircle it has a "draw" method, it also has "x" and "y" attributes for the position of the object, a "color" and a "lineWidth". Unlike a circle, which has a radius, a rectangle has a width and height.

Part 4 - Drawing and moving asteroids on the canvas

Part 2 - TypeScript classes and interfaces