Introduction to TypeScript: Building a Rogue-like Engine - HTML5 Game Development Insights - page 305

You also must add the following property above it:
target: CanvasRenderingContext2D;
What this means is that your CanvasMapRenderer needs a reference to the canvas in your HTML file as well as
the dimensions of the tiles. You now create a new class, called Rectangle , which will be one of two geometry classes
required in your game engine. Create a new file, called geom.ts , in your rogue folder inside src, and put in it the
following content:
module rogue.geom {
export class Point{
constructor(public x:number = 0, public y:number = 0){}
clone():Point{
return new Point(this.x, this.y);
}
}
As you can see, you have a new package, called geom , and a class called Point . Point is a very simple class:
it affords you an easy way to type against an x, y coordinate in your game. Now, whenever you want to represent a
position, such as the player's x, y values, you can create a new point and access its public x, y properties. Next, you
need to create your Rectangle . Following your Point class, add this:
export class Rectangle extends Point{
constructor(x:number, y:number, public width: number = 0, public height:number = 0){
super(x,y);
}
}
This may be new to you if you have never worked with inheritance before in a language. Just as the
CanvasMapRenderer implemented your IMapRenderer interface, so, too, one class can actually inherit logic from
another class. To do this, you use the keyword “extends” when defining the class. From here, you can not only set up
your own additional logic, but also pass values up to the parent class from which it extends. In this case, Rectangle
needs to store the x, y width and height values for your game. It would be silly just to retype your properties for x
and y , so you have Rectangle build onto the Point class, take its constructor's x, y values, and pass them up to the
“super” class, which in this case is Point . Super is what you use to access a parent method. Because your Point class
automatically creates an x, y property with its value defaulting to 0, you just pass those up to the super class and add
the width and height arguments to the constructor. This allows you to do some very cool things as you get deeper into
inheritance. TypeScript also supports method overriding and overloading.
Now that you have your Rectangle class, it's time to go back into your renderer and add the rest of the logic.
Add the following content in the CanvasMapRenderer draw method:
this.clearMap();
var row: number;
var column: number;
var total: number = tiles.length;
var rowWidth: number = tiles[0].length;
var currentTile: string;