O'Reilly logo

PhoneGap 3.x Mobile Application Development HOTSHOT by Kerri Shotts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drawing on the canvas

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.

Getting on with it

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required