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

and clearMap methods to manipulate text on the page instead. This is where the true power of TypeScript lies. You
can take advantage of interfaces to help abstract your code base in ways that encourage extensibility, composition,
and inheritance as it grows. This is critical when you are working in larger teams and need to make sure that you have
structure and balance in your code base, an inherent problem with JavaScript, as each developer may have his or her
own ways of implementing classes or have problems reading other developers' code.
Handling Movement
You now have the basic engine up and running for creating a map and displaying tiles. Let's add a player to the map
and deal with registering input from the user as well as basic collision detection. But, before you do that, you are going
to need to abstract your map a little more to make it easier to work with. Right now, it's simply a multidimensional
array. Let's create a map class and expose some APIs to access the underlying data. You will do this by making a new
file, called map.ts , with the following content:
module rogue.map {
export interface IMap{
getWidth(): number;
getHeight(): number;
getTiles(): any[];
getTileType(point: geom.Point): string;
}
}
Again, you will see that you start with a simple interface to define your map's public properties: getWidth ,
getHeight , getTiles , and getTileType . Let's build out the map below your interface:
export class TileMap implements IMap {
constructor (private tiles: any[]) {}
public getTileType(point: geom.Point): string {
return this.tiles[point.y][point.x];
}
public getWidth(): number {
return this.tiles[0].length;
}
public getHeight(): number {
return this.tiles.length;
}
public getTileID(row: number, column: number): number {
return row * this.getWidth() + column;
}
public getTiles(): any[] {
return this.tiles;
}
}