HTML and CSS Reference
In-Depth Information
Figure 19-5. The browser should automatically open with your new game's index page; open your browser's console to
see the log message
And there you have it! TypeScript is fully configured, and you have an automated workflow for compiling and
testing your game's code. Now, let's dig into the language and build out your game.
Creating Your Game Class
In your src folder, you will want to start setting up the location where your rogue game's code will live. You are going
to make all your game code live inside its own module, called rogue . Modules are a great way to help encapsulate the
scope of your code so that it doen't sit in the global scope or conflict with other JavaScript code, which you may have
running on the page. To help you better organize this, you will need to create a rogue folder inside src and a game.ts
file, as demonstrated in Figure 19-6 .
Figure 19-6. You will be keeping all your rogue game .ts files in their own folder inside your src directory
Next, put the following content inside the folder:
module rogue {
export class Game {
constructor (public display: HTMLCanvasElement) {
console.log("display", display);
Search WWH ::

Custom Search