???

game.js

@@ -94,6 +94,8 @@ Sprite = function () {
 
   this.children = {};
 
+  this.color    = 'black';
+  this.solid    = false;
   this.visible  = false;
   this.reap     = false;
   this.bridgesH = true;
@@ -233,6 +235,9 @@ Sprite = function () {
       this.children[child].draw();
     }
 
+    this.context.strokeStyle = this.color;
+    this.context.fillStyle = this.color;
+
     this.context.beginPath();
 
     this.context.moveTo(this.points[0], this.points[1]);
@@ -244,6 +249,9 @@ Sprite = function () {
 
     this.context.closePath();
     this.context.stroke();
+    if (this.solid) {
+      this.context.fill();
+    }
   };
   this.findCollisionCanidates = function () {
     if (!this.visible || !this.currentNode) return [];
@@ -371,7 +379,12 @@ Ship = function () {
               0, -11,
               6,   7]);
 
+  this.color = 'navy';
+  this.solid = true;
+
   this.children.exhaust = new Sprite();
+  this.children.exhaust.solid = true;
+  this.children.exhaust.color = 'red';
   this.children.exhaust.init("exhaust",
                              [-3,  6,
                                0, 11,
@@ -408,7 +421,6 @@ Ship = function () {
     }
     if (KEY_STATUS.space) {
       if (this.delayBeforeBullet <= 0) {
-        this.delayBeforeBullet = 10;
         for (var i = 0; i < this.bullets.length; i++) {
           if (!this.bullets[i].visible) {
             SFX.laser();
@@ -648,6 +660,8 @@ Asteroid = function () {
               -4, -10,
               -4,  -5]);
 
+  this.color = 'lightgray';
+  this.solid = true;
   this.visible = true;
   this.scale = 6;
   this.postMove = this.wrapPostMove;
@@ -695,6 +709,7 @@ Explosion = function () {
   this.draw = function () {
     if (this.visible) {
       this.context.save();
+      this.context.strokeStyle = 'red';
       this.context.lineWidth = 1.0 / this.scale;
       this.context.beginPath();
       for (var i = 0; i < 5; i++) {
@@ -917,7 +932,7 @@ Game = {
       this.state = 'waiting';
     },
     waiting: function () {
-      Text.renderText(ipad ? 'Touch Sreen to Start' : 'Press Space to Start', 36, Game.canvasWidth/2 - 270, Game.canvasHeight/2);
+      Text.renderText(window.ipad ? 'Touch Screen to Start' : 'Press Space to Start', 36, Game.canvasWidth/2 - 270, Game.canvasHeight/2);
       if (KEY_STATUS.space || window.gameStart) {
         KEY_STATUS.space = false; // hack so we don't shoot right away
         window.gameStart = false;
@@ -1096,6 +1111,8 @@ $(function () {
   extraDude.children = [];
 
   var i, j = 0;
+
+  var paused = false;
   var showFramerate = false;
   var avgFramerate = 0;
   var frameCount = 0;
@@ -1106,6 +1123,22 @@ $(function () {
   var elapsed;
   var delta;
 
+  var canvasNode = canvas[0];
+
+  // shim layer with setTimeout fallback
+  // from here:
+  // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+  window.requestAnimFrame = (function () {
+    return  window.requestAnimationFrame       ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame    ||
+            window.oRequestAnimationFrame      ||
+            window.msRequestAnimationFrame     ||
+            function (/* function */ callback, /* DOMElement */ element) {
+              window.setTimeout(callback, 1000 / 60);
+            };
+  })();
+
   var mainLoop = function () {
     context.clearRect(0, 0, Game.canvasWidth, Game.canvasHeight);
 
@@ -1166,23 +1199,27 @@ $(function () {
       avgFramerate = frameCount;
       frameCount = 0;
     }
+
+    if (paused) {
+      Text.renderText('PAUSED', 72, Game.canvasWidth/2 - 160, 120);
+    } else {
+      requestAnimFrame(mainLoop, canvasNode);
+    }
   };
 
-  var mainLoopId = setInterval(mainLoop, 25);
+  mainLoop();
 
   $(window).keydown(function (e) {
     switch (KEY_CODES[e.keyCode]) {
       case 'f': // show framerate
         showFramerate = !showFramerate;
         break;
       case 'p': // pause
-        if (mainLoopId) {
-          clearInterval(mainLoopId);
-          mainLoopId = null;
-          Text.renderText('PAUSED', 72, Game.canvasWidth/2 - 160, 120);
-        } else {
+        paused = !paused;
+        if (!paused) {
+          // start up again
           lastFrame = Date.now();
-          mainLoopId = setInterval(mainLoop, 10);
+          mainLoop();
         }
         break;
       case 'm': // mute

index.html

@@ -6,7 +6,6 @@
     <script src="game.js"></script>
     <style>
       #canvas { border:1px solid black; top:0px; left:0px; }
-      #game-container { position:relative; top:0px; left:0px; }
       .button { position:absolute; border:1px solid black; }
       #left-controls { position:absolute; left:1px; bottom:0px; display:none; }
       #right-controls { position:absolute; right:1px; bottom:0px; display:none; }

ipad.js

@@ -4,8 +4,8 @@ if (ipad) {
   $(function () {
     $('#left-controls, #right-controls').show();
     $('body > *').hide();
-    $('body').css('margin', '0px').css('background', 'black');
-    $('#game-container').width(1024).css('top', 26).show();
+    $('body').css('margin', '0px').css('background', 'black').prepend($('#game-container').remove());
+    $('#game-container').width(1024).css('margin-top', 26).show();
     $('#canvas').attr('width', 1020).attr('height', 660).css('background', 'white').css('margin', '0 1');
 
     $('head').prepend($('<meta/>').attr('name', 'viewport').attr('content', 'width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'));