Of course, it does no good to generate a level if we don't display it to the player. That's what we'll be doing in this task.
We've already set our canvas up in a prior section. Now, however, we need to define the code that actually draws a frame. We need this code to be quick; however, we have to do it in 16 milliseconds if we hope to approach 60 fps. The drawing code is in the _doAnim method in www/js/app/views/gameView.js. Let's start with the following code:
if (typeof timestamp == "undefined") {
timestamp = (new Date()).getTime(); }
var diff = timestamp - self._startTime;The very first step is to determine the difference between the current time (or the time passed in to the function) and the time the last frame was rendered. This is critical in order to keep the game speed from lagging when frames are dropped.
var ctx = self._context;
Next, we copy the context to a shorter, local variable, because we're going to be using it a lot to draw lines...