HTML and CSS Reference
In-Depth Information
This is a neat technique that is common in rendering engines that only need to redraw themselves when changes
happen to the display. In this case, you want to render only once and not render when nothing is happening on the
screen. Rogue is turn based, so taking advantage of the invalid flag is a great way to control manually when something
renders to the screen. Run the example in the browser, and you should see that
console.log
gets called only once
(see Figure
19-11
).
Figure 19-11.
Now, your draw call happens only once
Also, make sure to set invalid to
true
by default so that the first time
update
gets called,
draw
does as well. After
a draw happens, it sets the invalid flag back to
false
and turns off the renderer. It's important to note that
update
is
still being called, but that is okay. You always want to be calculacting what the next frame should be doing, such as
accepting user input, calculating artificial intelligence (AI), or performing other processor-intensive tasks, while there
is no need to update the display. Now, all you have to do is to create your map and a way to render it.
To start, above the
game.ts
constructor, add the following property:
tiles: any[];
Then, before the render loop, create the following simple, two-dimensional array:
this.tiles = [["#","#","#","#","#","#","#","#","#"],
["#"," "," "," ","#"," "," "," ","#"],
["#"," "," "," "," "," "," "," ","#"],
["#"," "," "," ","#"," "," "," ","#"],
["#","#","#","#","#","#","#","#","#"]
]
