Improve timer and keyhandling

scripts/game.js

@@ -17,14 +17,15 @@ var Game = {
     sceneStack: [],
     currentScene: null,
     update: function(delta) {
-      if(this.currentScene) this.currentScene.update(delta);
+      if(this.currentScene) this.currentScene._update(delta);
     },
     draw: function() {
-      if(this.currentScene) this.currentScene.draw();
+      if(this.currentScene) this.currentScene._draw();
     },
     push: function(scene) {
       if(this.currentScene) this.currentScene.pause();
       this.sceneStack.push(scene);
+      if(!scene.hasTicker) scene._init();
       scene.load();
       this.currentScene = scene;
     },
@@ -61,18 +62,28 @@ var Game = {
   });
 })();
 
-var MainMenu = {
-  update: function() {},
-  draw: function() {
-    Game.context.fillStyle = 'black';
-    Game.context.fillRect(0, 0, Game.canvas.width, Game.canvas.height);
-    Game.context.fillStyle = 'white';
-    Game.context.textAlign = 'center';
-    Game.context.fillText('Audventure', Game.canvas.width/2, Game.canvas.height/2 - 20);
-    Game.context.fillText('Press any key to start', Game.canvas.width/2, Game.canvas.height/2 + 20);
-  }
+function Scene() {}
+
+Scene.prototype._init = function() {
+  makeObservable(this);
 };
 
+Scene.prototype._update = function(dt) {
+  this.notify(dt);
+  this.update(dt);
+};
+
+Scene.prototype._draw = function() {
+  this.draw();
+};
+
+Scene.prototype.tween = function(from) {
+  var tween = new DeferredTween(from);
+  tween.ticker = this.ticker;
+  return tween;
+};
+
+var MainMenu = new Scene();
 (function() {
   function onKeyUp() {
     var beats = [
@@ -85,26 +96,45 @@ var MainMenu = {
 
     Game.sceneManager.push(new SoundSafari(beats));
   }
+  MainMenu.update = function() {};
+  MainMenu.draw = function() {
+    Game.context.fillStyle = 'black';
+    Game.context.fillRect(0, 0, Game.canvas.width, Game.canvas.height);
+    Game.context.fillStyle = 'white';
+    Game.context.textAlign = 'center';
+    Game.context.fillText('Audventure', Game.canvas.width/2, Game.canvas.height/2 - 20);
+    Game.context.fillText('Press any key to start', Game.canvas.width/2, Game.canvas.height/2 + 20);
+  };
   MainMenu.load = MainMenu.resume = function() {
-    addEventListener('keyup', onKeyUp);
+    addEventListener('keypress', onKeyUp);
   };
   MainMenu.unload = MainMenu.pause = function() {
-    removeEventListener('keyup', onKeyUp);
+    removeEventListener('keypress', onKeyUp);
   };
 })();
 
-var PauseScreen = {
-  onKeyUp: function(e) {
-    if(e.keyCode == 80) Game.sceneManager.pop();
-    if(e.keyCode == 81) {
-      Game.sceneManager.pop();
-      Game.sceneManager.pop();
+var PauseScreen = new Scene();
+(function() {
+  var onKeyUp = function(e) {
+    switch(e.keyCode) {
+      case 81:
+      case 113:
+      case 27:
+        Game.sceneManager.pop();
+      case 80:
+      case 112:
+      case 32:
+        Game.sceneManager.pop();
     }
-  },
-  load: function() {addEventListener('keyup', this.onKeyUp)},
-  unload: function() {removeEventListener('keyup', this.onKeyUp)},
-  update: function() {},
-  draw: function() {
+  };
+  PauseScreen.load = PauseScreen.resume = function() {
+    addEventListener('keypress', onKeyUp);
+  };
+  PauseScreen.unload = PauseScreen.pause = function() {
+    removeEventListener('keypress', onKeyUp);
+  };
+  PauseScreen.update = function() {};
+  PauseScreen.draw = function() {
     Game.context.fillStyle = 'black';
     Game.context.fillRect(0, 0, Game.canvas.width, Game.canvas.height);
     Game.context.fillStyle = 'white';
@@ -112,8 +142,5 @@ var PauseScreen = {
     Game.context.fillText('Paused', Game.canvas.width/2, Game.canvas.height/2 - 30);
     Game.context.fillText('P to unpause', Game.canvas.width/2, Game.canvas.height/2);
     Game.context.fillText('Q to quit', Game.canvas.width/2, Game.canvas.height/2 + 20);
-
-  },
-  pause: this.unload,
-  resume: this.load
-};
+  };
+})();

scripts/games/safari.js

@@ -464,16 +464,20 @@ function SoundSafari(beatInfo) {
   };
 
   var onKeyUp = function(e) {
-    if(e.keyCode == 80) {
-      Game.pause();
-    }
-    else if(e.keyCode == 68) {
-      debug = !debug;
+    switch(e.keyCode) {
+      case 80:  // P
+      case 112: // p
+      case 32:  // space
+        Game.pause();
+        break;
+      case 68:  // D
+        debug = !debug;
+        break;
     }
   };
 
   this.load = function() {
-    addEventListener('keyup', onKeyUp);
+    addEventListener('keypress', onKeyUp);
     beats = [];
     var soundPromises = beatInfo.map(function(elem, index) {
       var beat = { info: elem, rounds: 0 };
@@ -485,15 +489,13 @@ function SoundSafari(beatInfo) {
     });
     soundPromises.push(createSound('get', 'sound/get.mp3'));
 
-    this.textAlphaTween = Tween
-      .from(0)
+    this.textAlphaTween = this.tween(0)
       .to(1, 1.5)
       .wait(1)
       .waitFor(Q.all(soundPromises))
       .to(0, 1.5)
       .animate();
-    this.coverAlphaTween = Tween
-      .from(1)
+    this.coverAlphaTween = this.tween(1)
       .waitFor(this.textAlphaTween.promise)
       .to(0, 1)
       .animate();
@@ -503,18 +505,20 @@ function SoundSafari(beatInfo) {
   };
 
   this.unload = function() {
-    removeEventListener('keyup', onKeyUp);
+    removeEventListener('keypress', onKeyUp);
     soundManager.destroySound('get');
     beats.forEach(function(beat) {beat.sound.destruct()});
   };
 
   this.pause = function() {
-    removeEventListener('keyup', onKeyUp);
+    removeEventListener('keypress', onKeyUp);
     currentBeats.map(function(beat) {beat.sound.pause()});
   };
 
   this.resume = function() {
-    addEventListener('keyup', onKeyUp);
+    addEventListener('keypress', onKeyUp);
     currentBeats.map(function(beat) {beat.sound.resume()});
   };
-}
+}
+
+SoundSafari.prototype = new Scene();

scripts/util.js

@@ -31,19 +31,31 @@ function color(r,g,b,a) {
   return 'rgba('+r+','+g+','+b+','+a.toFixed(5)+')';
 }
 
-// Ticker
-var Ticker = {};
-(function(Ticker) {
+function makeObservable(o) {
   var listeners = [];
 
-  Ticker.addListener = function(listener) {
+  o.hasTicker = true;
+
+  o.addListener = function(listener) {
     listeners.push(listener);
-  }
+  };
 
-  Ticker.removeListener = function(listener) {
+  o.removeListener = function(listener) {
     var index = listeners.indexOf(listener);
     listeners.splice(index, 1);
-  }
+  };
+
+  o.notify = function(dt) {
+    listeners.forEach(function(listener) {
+      listener(dt);
+    })
+  };
+}
+
+// Ticker
+var Ticker = {};
+(function(Ticker) {
+  makeObservable(Ticker);
 
   var nextFrame =
     window.requestAnimationFrame ||
@@ -58,9 +70,7 @@ var Ticker = {};
   var then = Date.now();
   function tick(now) {
     var delta = (now - then) / 1000;
-    listeners.forEach(function(listener){
-      listener(delta);
-    })
+    Ticker.notify(delta);
     then = now;
     nextFrame(tick);
   }
@@ -72,20 +82,22 @@ var Ticker = {};
 
 // Tweens
 function BaseTween() {}
-BaseTween.prototype.animate = function() {
+BaseTween.prototype.animate = function(scene) {
   var self = this;
   function tick(dt) {
     self.update(dt);
   }
-  Ticker.addListener(tick);
+  var ticker = Ticker;
+  if(this.ticker) ticker = this.ticker;
+  ticker.addListener(tick);
   self.promise.then(function() {
-    Ticker.removeListener(tick);
+    ticker.removeListener(tick);
   });
   self.update(0);
   return self;
 };
 
-function Tween(duration, start, end, easing) {
+function SimpleTween(duration, start, end, easing) {
   this.duration = duration;
   this.start = start;
   this.end = end;
@@ -95,9 +107,9 @@ function Tween(duration, start, end, easing) {
   this.promise = this.deferred.promise;
 };
 
-Tween.prototype = new BaseTween();
+SimpleTween.prototype = new BaseTween();
 
-Tween.prototype.update = function(dt) {
+SimpleTween.prototype.update = function(dt) {
   this.timer += dt;
   if(this.timer >= this.duration) {
     this.timer = this.duration;
@@ -153,7 +165,7 @@ DeferredTween.prototype.addTween = function(tween) {
 
 DeferredTween.prototype.to = function(target, duration, easing) {
   easing = easing || easeLinear;
-  this.addTween(new Tween(duration, this.lastTarget, target, easing));
+  this.addTween(new SimpleTween(duration, this.lastTarget, target, easing));
   this.lastTarget = target;
   return this;
 };
@@ -170,7 +182,3 @@ DeferredTween.prototype.update = function(dt) {
   this.tween.update(dt);
   this.value = this.tween.value;
 };
-
-Tween.from = function(start) {
-  return new DeferredTween(start);
-};