HTML and CSS Reference
You can extend the CanvasMapRenderer to use images, or sprites, instead of just drawing colors. Follow these
Create a preloader to handle loading in images before the game runs.
Extend the CanvasMapRenderer with a new SpriteMapRenderer .
Override the drawTile method with a way to look up sprites and paint them to the canvas.
Replace the reference to the old CanvasMapRenderer with the new SpriteMapRenderer ;
everything should work just the same, but with new images instead of colored boxes.
Rendering Larger Maps
Right now, the map renderer simply draws every tile you give it. It doesn't even follow the player around. This could
be really bad for performance and gameplay. If you want to have much larger maps, create a MapSelection class that
can capture a range of tiles from the map and better manage how you render it. Here is what that would look like:
Create a MapSelection class that wraps the map class and that can access and manipulate
the tile data.
Add new methods onto the map class to make it easier to select tiles from rows by range,
for example, getting five tiles around a center point, which would represent the player.
Update the selection class's center point, based on the player's position as it moves
through the levels.
Use the MapSelection tiles instead of all the tiles from the map when you call the renderer.
As you can see, this engine is easily extensible, and you have set up enough of the foundation to allow you to
continue to build on top of it and make the game your own. Rogue games are great engines to build when you are
starting out making games in a new language. Hopefully, you now have greater insight into how TypeScript can be
code and making sure that you don't make easy-to-overlook mistakes.