audventure/scripts/game.js

var fontDeferred = Q.defer();
WebFontConfig = {
  google: { families: [ 'Quicksand::latin' ] },
  active: function() {
    fontDeferred.resolve();
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

var soundDeferred = Q.defer();
soundManager.setup({
  url: 'swf/',
  flashVersion: 9,
  onready: function() {
    soundDeferred.resolve(this);
  }
});

var Game = {
  canvas: document.getElementById('game'),
  context: document.getElementById('game').getContext('2d'),
  keysDown: {},
  start: function() {
    addEventListener('keydown', function(e) {
      Game.keysDown[e.keyCode] = true;
    }, false);

    addEventListener('keyup', function(e) {
      delete Game.keysDown[e.keyCode];
    }, false);

    var fontPromise = fontDeferred.promise.timeout(5000);
    var soundPromise = soundDeferred.promise.then(function() {
      return [
        createSound('confirm', 'sound/confirm.mp3'),
        createSound('back', 'sound/back.mp3'),
        createSound('pause', 'sound/pause.mp3'),
        createSound('cursor', 'sound/cursor.mp3')
      ]
    });

    Game.sceneManager.push(SplashScreen);
    Q.allResolved([fontPromise, soundPromise]).done(function(s, f) {
      Game.sceneManager.pop();
      Game.sceneManager.push(MainMenu);
    });

    Ticker.start();
    Ticker.addListener(function(dt) {
      Game.sceneManager.update(dt);
      Game.sceneManager.draw();
    });
  },
  pause: function() {
    Game.sceneManager.push(PauseScreen);
  },
  sceneManager: {
    sceneStack: [],
    currentScene: null,
    update: function(delta) {
      if(this.currentScene) this.currentScene._update(delta);
    },
    draw: function() {
      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;
    },
    pop: function() {
      var scene = this.sceneStack.pop();
      scene.unload();
      if(this.sceneStack.length > 0) {
        this.currentScene = this.sceneStack[this.sceneStack.length-1];
        this.currentScene.resume();
      }
      else {
        this.currentScene = null;
      }
    }
  }
};

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;
};

Scene.prototype.load = function() {};
Scene.prototype.unload = function() {};
Scene.prototype.resume = function() {};
Scene.prototype.pause = function() {};

var SplashScreen = new Scene();
(function() {
  var ctx = Game.context;
  var x = Game.canvas.width / 2;
  var y = Game.canvas.height / 2;
  var position = {x: x, y: y};
  var RADIUS = 8;
  var RIPPLE_SIZE = 10;
  var RIPPLE_SPEED = 10;

  var rippleCounter = 0;

  SplashScreen.color = function(p) {
    return color(255, 255, 255, p);
  };

  SplashScreen.update = function(dt) {
    rippleCounter += RIPPLE_SPEED * dt;
    if(rippleCounter > RIPPLE_SIZE) {
      rippleCounter = 0;
    }
  };

  SplashScreen.draw = function() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, Game.canvas.width, Game.canvas.height);

    ctx.fillStyle = 'white';
    drawCircle(position, RADIUS, 3, this.color(1));
    drawCircle(position, 2, 3, this.color(1));

    // ripples
    var p = lerp(1, 0, ease(rippleCounter/RIPPLE_SIZE));
    drawCircle(position, RADIUS+7+rippleCounter, 1, this.color(p));
    drawCircle(position, RADIUS+4+rippleCounter, 1, this.color(p*0.8));
    drawCircle(position, RADIUS+1+rippleCounter, 1, this.color(p*0.5));
  };
})();

var MainMenu = new Scene();
(function() {
  var ctx = Game.context;
  var canvasW = Game.canvas.width;
  var canvasH = Game.canvas.height;
  var selected = 0;
  var alternate = false;

  var notYetDone = {
    name: '???',
    alt: '???',
    start: function() {}
  };

  var games = [
    {
      name: 'sound safari',
      alt: 'sound catcher',
      start: function() {
        var beats = [
          {url: 'sound/b1.mp3', duration: 4000},
          {url: 'sound/b2.mp3', duration: 4000},
          {url: 'sound/b3.mp3', duration: 4000},
          {url: 'sound/b4.mp3', duration: 4000},
          {url: 'sound/b5.mp3', duration: 4000}
        ];

        Game.sceneManager.push(new SoundSafari(beats));
      }
    },
    notYetDone,
    notYetDone,
    notYetDone,
    notYetDone,
    notYetDone,
    notYetDone
  ];

  function onKeyUp(e) {
    switch(e.keyCode) {
      case 66:
        alternate = !alternate;
        document.title = alternate ? 'SoundVoyager' : 'audventure';
        break;
      case 38:
        e.preventDefault();
        soundManager.play('cursor');
        selected = (selected + games.length -1) % games.length;
        break;
      case 40:
        e.preventDefault();
        soundManager.play('cursor');
        selected = (selected + 1) % games.length;
        break;
      case 32:
        e.preventDefault();
      case 13:
        soundManager.play('confirm');
        games[selected].start();
    }
  }

  MainMenu.update = function() {};
  MainMenu.draw = function() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvasW, canvasH);
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    var canvasWM = canvasW/2;
    var canvasHM = canvasH/2;
    ctx.font = font(48);
    ctx.fillText(alternate ? 'SoundVoyager' : 'audventure', canvasWM, canvasHM - 50);
    ctx.font = font(12);
    games.forEach(function(game, index) {
      var y = canvasHM + 10 + index * 20;
      var name = alternate ? game.alt : game.name;
      ctx.fillText(name, canvasWM, y);
      if(index == selected) {
        var offset = ctx.measureText(name).width / 2 + 10;
        drawTriangle(canvasWM - offset, y - 4, 10, 7);
        drawTriangle(canvasWM + offset, y - 4, 10, -7);
      }
    });
  };
  MainMenu.load = MainMenu.resume = function() {
    addEventListener('keydown', onKeyUp);
  };
  MainMenu.unload = MainMenu.pause = function() {
    removeEventListener('keydown', onKeyUp);
  };
})();

var PauseScreen = new Scene();
(function() {
  var onKeyUp = function(e) {
    switch(e.charCode) {
      case 81:
      case 113:
      case 27:
        Game.sceneManager.pop();
      case 80:
      case 112:
      case 32:
        Game.sceneManager.pop();
        soundManager.play('back');
    }
  };
  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';
    Game.context.textAlign = 'center';
    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);
  };
})();

Game.start();