HTML and CSS Reference
In-Depth Information
Figure 19-9.
By logging the value of the display to the console, you can see that the value has been correctly set
Now, you are ready to move on to something a little more exciting: drawing to the canvas.
Drawing to Canvas
If you have ever worked with the canvas, which I assume you have, as you made it this far in the topic, you will find
that everything is the same in TypeScript. Just think of TypeScript as JavaScript with some extra features, and typing,
of course, which you can choose to use or ignore. That is perhaps the best thing about TypeScript: you can revert
to writing normal JavaScript at any point, and the compiler will simply ignore TypeScript. If you want the added
protection of compiler checking, just add types, and you are good to go.
Before you start rendering to the canvas, you are going to need to set up a basic game loop. In your
game.ts
file,
remove your console log, and add the following code in its place:
// Create and start the game loop
var gameloop = () => {this.update(); requestAnimationFrame(gameloop);}
gameloop();
Here, you are simply setting up an anonymous function, called
gameloop
. Inside it, you will notice that you are
calling an
update
method (which you will set up next). Then, you use
requestAnimationFrame
, which requires a
callback method to in turn call
gameloop
. This establishes a continuous loop that you can use to poll for input and
render graphics to your canvas. One thing to note is that your game is going to be turn based, so you don't do much
in the way of monitoring frames per second (FPS )or adjusting for slowdown between frames to calculate the time
between each loop. Let's assume that your game runs its render and that everything works fine in a single frame, so in
a real game, you may want to make adjustments with a little more logic. Finally, you call the
gameloop
function, which
starts the loop.
