added lower res logo for small screens

bindings.js

@@ -15,9 +15,10 @@ var userInput = []
 var mouseDown = false
 var initializeOnUp = false
 
-window.onresize = function() {
-  $canv.width = window.innerWidth
-  $canv.height = window.innerHeight
+window.onresize = resizeWindow
+function resizeWindow() {
+  $canv.width = window.innerWidth * quality/10
+  $canv.height = window.innerHeight * quality/10
   ctx = $canv.getContext('2d')
   ctx.lineJoin = 'round'
 

main.js

@@ -7,6 +7,9 @@ function setGlobals() {
   ctx.lineJoin = 'round'
   debug =  false //true
 
+  // this probably shouldnt be a global...
+  usingSmallLogo = false
+
   // window.ext is set by cocoonjs
   isMobile = !!window.ext
   // color pallet // blue        l blue        l green         orange         d orange
@@ -26,8 +29,9 @@ function setGlobals() {
   }
   // game loop
   MS_PER_UPDATE = 16
-  previousTime = 0.0
+  previousTime = Date.now()
   lag = 0.0
+  quality = 10
 }
 
 setGlobals()
@@ -43,9 +47,18 @@ function init() {
   GAME.levelBalls = new LevelBalls($canv.width, $canv.height)
   GAME.levelBallParticles = []
   GAME.endGameParticles = []
+  previousTime = Date.now() - previousTime
   requestAnimFrame(draw)
 }
 
+function lowerQuality() {
+  if(!isMobile) return
+  if(quality >= 7) {
+    quality -= 1
+    resizeWindow()
+  }
+}
+
 // main game loop
 function draw(time) {
   var i, l, j, dist, nextStage, fish, fish2
@@ -67,13 +80,17 @@ function draw(time) {
   var endGameParticles = GAME.endGameParticles
 
   if(debug) stats.begin()
-  var MAX_CYCLES = 15
+  var MAX_CYCLES = 20
   while(lag >= MS_PER_UPDATE && MAX_CYCLES) {
     physics()
     lag -= MS_PER_UPDATE
     MAX_CYCLES--
   }
 
+  if(MAX_CYCLES === 0) {
+    // adaptive quality
+    lowerQuality()
+  }
   // if 5 frames behind, jump
   if(lag/MS_PER_UPDATE > 75) {
     lag = 0.0
@@ -279,6 +296,7 @@ function draw(time) {
 function loadAssets(cb) {
   var imgs = [
     { name: 'logo', src: 'assets/logo.png' },
+    { name: 'logoSmall', src: 'assets/logo-small.png' },
     { name: 'soundOn', src: 'assets/sound-on.png' },
     { name: 'soundOff', src: 'assets/sound-off.png' },
     {name: 'enter', src: 'assets/enter.png'}

menu.js

@@ -1,6 +1,7 @@
 function drawMenu() {
   sizeMenu()
 
+
   // background
   ctx.fillStyle = '#111'
   ctx.fillRect(0, 0, $canv.width, $canv.height)
@@ -11,11 +12,10 @@ function drawMenu() {
 
 function drawMenuLogo() {
   var title = GAME.MENU.title
-  ctx.drawImage(ASSETS.logo, title.x, title.y, title.width, title.height)
+  ctx.drawImage(ASSETS[usingSmallLogo ? 'logoSmall' : 'logo'], title.x, title.y, title.width, title.height)
 }
 
 function fadeInMenu() {
-console.log('Roar', ASSETS)
   GAME.state = 'menu'
   GAME.MENU.opacity = 0
   requestAnimFrame(menuFade)
@@ -54,10 +54,10 @@ function drawMenuButton(hitting) {
 
 function sizeMenu() {
   var title = {
-    width : ASSETS.logo.width,
-    height : ASSETS.logo.height,
-    minPaddingX : 100,
-    minPaddingY : 30,
+    width : ASSETS[usingSmallLogo ? 'logoSmall' : 'logo'].width,
+    height : ASSETS[usingSmallLogo ? 'logoSmall' : 'logo'].height,
+    minPaddingX : 50,
+    minPaddingY : 15,
     x: null,
     y: null
   }
@@ -79,4 +79,13 @@ function sizeMenu() {
 
   GAME.MENU.title = title
   GAME.MENU.button = button
+
+  // check to see if we should use lower resolution logo
+  if(title.width <= 300 && !usingSmallLogo) {
+    usingSmallLogo = true
+    sizeMenu()
+  } else if(scale === 1 && usingSmallLogo){
+    usingSmallLogo = false
+    sizeMenu()
+  }
 }