super fast on mobile

classes/Fish.js

@@ -9,10 +9,33 @@ function Fish(ctx, x, y, radius, color, tailLength, tailWidth) {
   // pixels per second
   this.velY = 15;
   this.velX = 15; 
-  this.tailLength = tailLength;
-  this.tailWidth = tailWidth;			
+  this.tailLength = Math.round(tailLength);
+  this.tailWidth = Math.round(tailWidth);
   this.ticks = 0;
   this.direction = 1;
+  this.el = null; // optional
+}
+
+Fish.createRandomCanvasFish = function(startX, startY) {
+  var c = document.createElement('canvas');
+  var ctx = c.getContext("2d");
+  var fish = Fish.createRandomFish(ctx, startX, startY);
+  c.width = fish.radius * 2 + fish.tailLength;
+  c.height = fish.radius * 2 + fish.tailWidth;
+  fish.el = c;
+  var oldX = fish.x;
+  var oldY = fish.y
+
+  // weird stuff to correct drawing location on smaller canvas
+  fish.x = c.width / 2;
+  fish.y = c.height / 2;
+  fish.el.className = "fish";
+  fish.draw(true);
+
+  // restore position
+  fish.x = oldX;
+  fish.y = oldY;
+  return fish;
 }
 
 Fish.createRandomFish = function(ctx, startX, startY) {
@@ -45,7 +68,15 @@ Fish.prototype.tick = function() {
   this.draw();
 }
 
-Fish.prototype.draw = function() {
+Fish.prototype.drawEl = function() {
+  var translate = "translate3d(" + this.x + "px," + this.y + "px, 0)";
+  var style = this.el.style;
+  style.WebkitTransform = style.MozTransform = style.transform = translate;
+}
+
+Fish.prototype.draw = function(force) {
+
+  if (!force && this.el) return this.drawEl();
 
 	// setup
 	this.ctx.beginPath();
@@ -97,5 +128,8 @@ Fish.prototype.move = function() {
 }
 
 Fish.prototype.kill = function() {
+  this.el.className += " dead";
+  this.y = -200;
+  this.draw();
   this.dead = true;
 }

classes/Shark.js

@@ -11,6 +11,7 @@ function Shark(ctx, x, y, height, length, color, fin_width, fin_height, tail_len
 	this.tail_width = tail_width;
 	this.mouth_open = false;
 	this.count = 0;
+	this.el = null;
 }
 
 Shark.prototype.tick = function() {
@@ -29,8 +30,16 @@ Shark.prototype.detectBoundaries = function() {
 	var boundary =  new CollissionBoundary(boundaryX, boundaryY, boundaryWidth, boundaryHeight);
 	return boundary;
 }
+
+Shark.prototype.drawEl = function() {
+  var translate = "translate3d(" + this.x + "px," + this.y + "px, 0)";
+  var style = this.el.style;
+  style.WebkitTransform = style.MozTransform = style.transform = translate;
+}
 
-Shark.prototype.draw = function() {
+Shark.prototype.draw = function(force) {
+
+  if (!force && this.el) return this.drawEl();
 
 	// setup
 	this.ctx.fillStyle = this.color;

fishes.css

@@ -28,6 +28,7 @@ h1 {
 	margin:0;
 	padding:0;
 	background: white;
+	position: relative;
 }
 
 #controls {
@@ -151,4 +152,30 @@ a:active {
 	-webkit-box-shadow: 2px 2px 10px rgba(255, 255, 255, .7);
 	-moz-box-shadow: 2px 2px 10px rgba(255, 255, 255, .7);
 	box-shadow: 2px 2px 10px rgba(255, 255, 255, .7);
+}
+
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#shark {
+  z-index: 2;
+  pointer-events: none;
+}
+
+#thesea {
+  z-index: -1;
+}
+
+.fish {
+  z-index: 1;
+  pointer-events: none;
+}
+
+.dead {
+  -webkit-transition: all 1.75s ease-in;
+  -moz-transition: all 1.75s ease-in;
+  transition: all 1.75s ease-in;
 }

fishes.js

@@ -11,21 +11,22 @@ var FPS = 100;
 // variables
 var $fps = $("#fps");
 var $time = $("#time");
-var $canvas = $("#canvas");
+var $canvas = $("#play");
 var $menu = $("#menu");
 var $name = $("#name");
 var $score = $("#score");
+var shark = $("#shark").get(0);
+var sea = $("#thesea").get(0);
 var $gameOver = $("#gameOver");
 var $links = $menu.find("a");
 var $body = $("body");
 var $scoreList = $("#scoreList");
-var canvas = $canvas.get(0);
-var ctx = canvas.getContext('2d');
-var	height = canvas.height;
-var	width = canvas.width;
+var	height = $canvas.height();
+var	width = $canvas.width();
 var lastTime = Date.now();
 var actors = [];
 var fishes = [];
+var sharky;
 var smasher;
 var score = 0;
 var ticks = 0;
@@ -94,17 +95,25 @@ function startGame() {
   $gameOver.addClass("isHidden");
   reset();
 
+  var c;
+  var fish = null;
 	var fishStartY = height / 2;
-	var fishStartX = width;
+	var fishStartX = width / 2;
 
 	// create a sea
-	var thesea = new Sea(ctx, 0, 100, width, height, "blue", true);
-	sharky = new Shark(ctx, 50, 250, 20, 100, "gray", 15, 25, 25, 25);
-  actors = [sharky, thesea];
+	var thesea = new Sea(sea.getContext("2d"), 0, 100, width, height, "blue", true);
+	thesea.draw();
+	sharky = new Shark(shark.getContext("2d"), 0, 50, 20, 100, "gray", 15, 25, 25, 25);
+	sharky.el = shark;
+	sharky.draw(true);
+  actors = [sharky];
+  thesea.dead = true; // only draw once
 
   // create a bunch of fishes
 	for (var i = 0; i < NUM_FISHES; i++) {
-    fishes.push(new Fish.createRandomFish(ctx, fishStartX + i * 13, fishStartY));
+  	fish = new Fish.createRandomCanvasFish(fishStartX + i * 13, fishStartY);
+  	$canvas.prepend(fish.el);
+    fishes.push(fish);
 	}
 	actors = actors.concat(fishes);
 
@@ -129,26 +138,21 @@ function gameOver() {
 }
 
 function drawAll() {
-  for (var i = actors.length - 1; i > -1 ; i--) {
+  for (var i = 0; i < actors.length; i++) {
     if (actors[i].dead) continue;
     actors[i].draw();
   }
 }
 
-function clearScreen() {
-	ctx.clearRect(0, 0, width, height);
-}
-
 function drawScreen() {
   if (paused) return;
 	calculateFps();
-  clearScreen();
+  updateFishes();
   drawAll();
 	if (gameOver()) {
     return endGame();
   }
   $time.text(time() + "ms");
-  updateFishes();
   requestAnimationFrame(drawScreen);
 }
 
@@ -159,12 +163,14 @@ function updateFishes() {
     if (fishes[i].x < 0) {
       fishes[i].x = width;
     }
+
 		// collission detection
 		if (Smasher.detectCollision(fishes[i].detectBoundaries(), sharky.detectBoundaries())) {
-			score++;
-			$score.text(NUM_FISHES - score + " left!");
-      fishes[i].kill();
+			 score++;
+			 $score.text(NUM_FISHES - score + " left!");
+			 fishes[i].kill();
 		}
+
   }	
 }
 

index.html

@@ -31,7 +31,8 @@ <h1>High Scores</h1>
 
     <!-- game -->
     <div id="play" class="screen">
-  		<canvas id="canvas" width="800" height="600"></canvas>
+  		<canvas id="thesea" width="800" height="600"></canvas>
+  		<canvas id="shark" width="400" height="100"></canvas>
   		<div id="gameOver" class="isHidden">
             <span id="name" contenteditable>Anonymous</span>
     		<a href="#replay">Re-Play</a>