Changed physics to include rotation and jazzing up ships

example/public/javascripts/game.js

@@ -3,7 +3,10 @@ $(function () {
     "use strict";
 
     var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState(),
-        playerSize = 0, entitySize = 0;
+        playerSize = 0, entitySize = 0, 
+        image = new Image(),
+        shipNumber = Math.floor(Math.random() * 9) + 1;
+        image.src = '../images/' + shipNumber + '.png';
 
     window.addEventListener('resize', resizeCanvas, false);
 
@@ -33,7 +36,7 @@ $(function () {
                 var playerStates = GarageServerIO.getPlayerStates(),
                     entityStates = GarageServerIO.getEntityStates();
                 playerStates.forEach(function (player) {
-                    ctxCanvas.fillRect(player.state.x, player.state.y, playerSize, playerSize);
+                    drawRotatedImage(player.state.ang, player.state.x, player.state.y, image);
                 });
                 entityStates.forEach(function (entity) {
                     ctxCanvas.fillRect(entity.state.x, entity.state.y, entitySize, entitySize);
@@ -59,4 +62,12 @@ $(function () {
             }
         );
     }
+    
+    function drawRotatedImage(angle, x, y, img) {
+        ctxCanvas.save();
+        ctxCanvas.translate(x + img.width / 2, y + img.height / 2);
+        ctxCanvas.rotate(angle * (Math.PI / 180));
+        ctxCanvas.drawImage(img, 0, 0, img.width, img.height, -img.width / 2, -img.height / 2, img.width, img.height);
+        ctxCanvas.restore();
+    }
 });