+ Please rotate your device to landscape mode +
+ ++ + + +
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + A Massively Multiplayer Adventure + +
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ + + Load your character + +
+
+
+
+
+
+
+
+
+
+
+
+
+ or create a new character
+
+ + + Delete your character? + +
+
+ All your items and achievements will be lost.
+ Are you sure you wish to continue?
+
+ cancel
+
+ + + + Made for Mozilla by Little Workshop + + +
+ + +
+ - click anywhere to close -
+
+ + + + What is BrowserQuest? + + +
++ BrowserQuest is a multiplayer game inviting you to explore a + world of adventure from your Web browser. +
+
+
+
+ + This demo is powered by HTML5 and WebSockets, which allow for real-time gaming and apps on the Web. +
+ + + Learn more about the technology + +
+
+
+ + BrowserQuest is available on Firefox, Chrome, Safari as well as iOS devices and Firefox for Android. +
+ + + Grab the source on Github + +
+ - click anywhere to close -
+
+ You are dead...
+ ++ + Your browser cannot run BrowserQuest! + +
+
+ We're sorry, but your browser does not support WebSockets.
+ In order to play, we recommend using the latest version of Firefox, Chrome or Safari.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/animation.js b/js/animation.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ada1b612036cf8bcdcccf8e47fef72d7fd815fd
--- /dev/null
+++ b/js/animation.js
@@ -0,0 +1,69 @@
+
+define(function() {
+
+ var Animation = Class.extend({
+ init: function(name, length, row, width, height) {
+ this.name = name;
+ this.length = length;
+ this.row = row;
+ this.width = width;
+ this.height = height;
+ this.reset();
+ },
+
+ tick: function() {
+ var i = this.currentFrame.index;
+
+ i = (i < this.length - 1) ? i + 1 : 0;
+
+ if(this.count > 0) {
+ if(i === 0) {
+ this.count -= 1;
+ if(this.count === 0) {
+ this.currentFrame.index = 0;
+ this.endcount_callback();
+ return;
+ }
+ }
+ }
+
+ this.currentFrame.x = this.width * i;
+ this.currentFrame.y = this.height * this.row;
+ this.currentFrame.index = i;
+ },
+
+ setSpeed: function(speed) {
+ this.speed = speed;
+ },
+
+ setCount: function(count, onEndCount) {
+ this.count = count;
+ this.endcount_callback = onEndCount;
+ },
+
+ isTimeToAnimate: function(time) {
+ return (time - this.lastTime) > this.speed;
+ },
+
+ update: function(time) {
+ if(this.lastTime === 0 && this.name.substr(0, 3) === "atk") {
+ this.lastTime = time;
+ }
+
+ if(this.isTimeToAnimate(time)) {
+ this.lastTime = time;
+ this.tick();
+ return true;
+ } else {
+ return false;
+ }
+ },
+
+ reset: function()Â {
+ this.lastTime = 0;
+ this.currentFrame = { index: 0, x: 0, y: this.row * this.height };
+ }
+ });
+
+ return Animation;
+});
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ca7de76d8196b05e6f074f66e874310e079972f
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,534 @@
+
+define(['jquery', 'storage'], function($, Storage) {
+
+ var App = Class.extend({
+ init: function() {
+ this.currentPage = 1;
+ this.blinkInterval = null;
+ this.previousState = null;
+ this.isParchmentReady = true;
+ this.ready = false;
+ this.storage = new Storage();
+ this.watchNameInputInterval = setInterval(this.toggleButton.bind(this), 100);
+ this.$playButton = $('.play'),
+ this.$playDiv = $('.play div');
+ },
+
+ setGame: function(game) {
+ this.game = game;
+ this.isMobile = this.game.renderer.mobile;
+ this.isTablet = this.game.renderer.tablet;
+ this.isDesktop = !(this.isMobile || this.isTablet);
+ this.supportsWorkers = !!window.Worker;
+ this.ready = true;
+ },
+
+ center: function() {
+ window.scrollTo(0, 1);
+ },
+
+ canStartGame: function() {
+ if(this.isDesktop) {
+ return (this.game && this.game.map && this.game.map.isLoaded);
+ } else {
+ return this.game;
+ }
+ },
+
+ tryStartingGame: function(username, starting_callback) {
+ var self = this,
+ $play = this.$playButton;
+
+ if(username !== '') {
+ if(!this.ready || !this.canStartGame()) {
+ if(!this.isMobile) {
+ // on desktop and tablets, add a spinner to the play button
+ $play.addClass('loading');
+ }
+ this.$playDiv.unbind('click');
+ var watchCanStart = setInterval(function() {
+ log.debug("waiting...");
+ if(self.canStartGame()) {
+ setTimeout(function() {
+ if(!self.isMobile) {
+ $play.removeClass('loading');
+ }
+ }, 1500);
+ clearInterval(watchCanStart);
+ self.startGame(username, starting_callback);
+ }
+ }, 100);
+ } else {
+ this.$playDiv.unbind('click');
+ this.startGame(username, starting_callback);
+ }
+ }
+ },
+
+ startGame: function(username, starting_callback) {
+ var self = this;
+
+ if(starting_callback) {
+ starting_callback();
+ }
+ this.hideIntro(function() {
+ if(!self.isDesktop) {
+ // On mobile and tablet we load the map after the player has clicked
+ // on the PLAY button instead of loading it in a web worker.
+ self.game.loadMap();
+ }
+ self.start(username);
+ });
+ },
+
+ start: function(username) {
+ var self = this,
+ firstTimePlaying = !self.storage.hasAlreadyPlayed();
+
+ if(username && !this.game.started) {
+ var optionsSet = false,
+ config = this.config;
+
+ //>>includeStart("devHost", pragmas.devHost);
+ if(config.local) {
+ log.debug("Starting game with local dev config.");
+ this.game.setServerOptions(config.local.host, config.local.port, username);
+ } else {
+ log.debug("Starting game with default dev config.");
+ this.game.setServerOptions(config.dev.host, config.dev.port, username);
+ }
+ optionsSet = true;
+ //>>includeEnd("devHost");
+
+ //>>includeStart("prodHost", pragmas.prodHost);
+ if(!optionsSet) {
+ log.debug("Starting game with build config.");
+ this.game.setServerOptions(config.build.host, config.build.port, username);
+ }
+ //>>includeEnd("prodHost");
+
+ this.center();
+ this.game.run(function() {
+ $('body').addClass('started');
+ if(firstTimePlaying) {
+ self.toggleInstructions();
+ }
+ });
+ }
+ },
+
+ setMouseCoordinates: function(event) {
+ var gamePos = $('#container').offset(),
+ scale = this.game.renderer.getScaleFactor(),
+ width = this.game.renderer.getWidth(),
+ height = this.game.renderer.getHeight(),
+ mouse = this.game.mouse;
+
+ mouse.x = event.pageX - gamePos.left - (this.isMobile ? 0 : 5 * scale);
+ mouse.y = event.pageY - gamePos.top - (this.isMobile ? 0 : 7 * scale);
+
+ if(mouse.x <= 0) {
+ mouse.x = 0;
+ } else if(mouse.x >= width) {
+ mouse.x = width - 1;
+ }
+
+ if(mouse.y <= 0) {
+ mouse.y = 0;
+ } else if(mouse.y >= height) {
+ mouse.y = height - 1;
+ }
+ },
+
+ initHealthBar: function() {
+ var scale = this.game.renderer.getScaleFactor(),
+ healthMaxWidth = $("#healthbar").width() - (12 * scale);
+
+ this.game.onPlayerHealthChange(function(hp, maxHp) {
+ var barWidth = Math.round((healthMaxWidth / maxHp) * (hp > 0 ? hp : 0));
+ $("#hitpoints").css('width', barWidth + "px");
+ });
+
+ this.game.onPlayerHurt(this.blinkHealthBar.bind(this));
+ },
+
+ blinkHealthBar: function() {
+ var $hitpoints = $('#hitpoints');
+
+ $hitpoints.addClass('white');
+ setTimeout(function() {
+ $hitpoints.removeClass('white');
+ }, 500)
+ },
+
+ toggleButton: function() {
+ var name = $('#parchment input').val(),
+ $play = $('#createcharacter .play');
+
+ if(name && name.length > 0) {
+ $play.removeClass('disabled');
+ $('#character').removeClass('disabled');
+ } else {
+ $play.addClass('disabled');
+ $('#character').addClass('disabled');
+ }
+ },
+
+ hideIntro: function(hidden_callback) {
+ clearInterval(this.watchNameInputInterval);
+ $('body').removeClass('intro');
+ setTimeout(function() {
+ $('body').addClass('game');
+ hidden_callback();
+ }, 1000);
+ },
+
+ showChat: function() {
+ if(this.game.started) {
+ $('#chatbox').addClass('active');
+ $('#chatinput').focus();
+ $('#chatbutton').addClass('active');
+ }
+ },
+
+ hideChat: function() {
+ if(this.game.started) {
+ $('#chatbox').removeClass('active');
+ $('#chatinput').blur();
+ $('#chatbutton').removeClass('active');
+ }
+ },
+
+ toggleInstructions: function() {
+ if($('#achievements').hasClass('active')) {
+ this.toggleAchievements();
+ $('#achievementsbutton').removeClass('active');
+ }
+ $('#instructions').toggleClass('active');
+ },
+
+ toggleAchievements: function() {
+ if($('#instructions').hasClass('active')) {
+ this.toggleInstructions();
+ $('#helpbutton').removeClass('active');
+ }
+ this.resetPage();
+ $('#achievements').toggleClass('active');
+ },
+
+ resetPage: function() {
+ var self = this,
+ $achievements = $('#achievements');
+
+ if($achievements.hasClass('active')) {
+ $achievements.bind(TRANSITIONEND, function() {
+ $achievements.removeClass('page' + self.currentPage).addClass('page1');
+ self.currentPage = 1;
+ $achievements.unbind(TRANSITIONEND);
+ });
+ }
+ },
+
+ initEquipmentIcons: function() {
+ var scale = this.game.renderer.getScaleFactor();
+ var getIconPath = function(spriteName) {
+ return 'img/'+ scale +'/item-' + spriteName + '.png';
+ },
+ weapon = this.game.player.getWeaponName(),
+ armor = this.game.player.getSpriteName(),
+ weaponPath = getIconPath(weapon),
+ armorPath = getIconPath(armor);
+
+ $('#weapon').css('background-image', 'url("' + weaponPath + '")');
+ if(armor !== 'firefox') {
+ $('#armor').css('background-image', 'url("' + armorPath + '")');
+ }
+ },
+
+ hideWindows: function() {
+ if($('#achievements').hasClass('active')) {
+ this.toggleAchievements();
+ $('#achievementsbutton').removeClass('active');
+ }
+ if($('#instructions').hasClass('active')) {
+ this.toggleInstructions();
+ $('#helpbutton').removeClass('active');
+ }
+ if($('body').hasClass('credits')) {
+ this.closeInGameCredits();
+ }
+ if($('body').hasClass('about')) {
+ this.closeInGameAbout();
+ }
+ },
+
+ showAchievementNotification: function(id, name) {
+ var $notif = $('#achievement-notification'),
+ $name = $notif.find('.name'),
+ $button = $('#achievementsbutton');
+
+ $notif.removeClass().addClass('active achievement' + id);
+ $name.text(name);
+ if(this.game.storage.getAchievementCount() === 1) {
+ this.blinkInterval = setInterval(function() {
+ $button.toggleClass('blink');
+ }, 500);
+ }
+ setTimeout(function() {
+ $notif.removeClass('active');
+ $button.removeClass('blink');
+ }, 5000);
+ },
+
+ displayUnlockedAchievement: function(id) {
+ var $achievement = $('#achievements li.achievement' + id);
+
+ var achievement = this.game.getAchievementById(id);
+ if(achievement && achievement.hidden) {
+ this.setAchievementData($achievement, achievement.name, achievement.desc);
+ }
+ $achievement.addClass('unlocked');
+ },
+
+ unlockAchievement: function(id, name) {
+ this.showAchievementNotification(id, name);
+ this.displayUnlockedAchievement(id);
+
+ var nb = parseInt($('#unlocked-achievements').text());
+ $('#unlocked-achievements').text(nb + 1);
+ },
+
+ initAchievementList: function(achievements) {
+ var self = this,
+ $lists = $('#lists'),
+ $page = $('#page-tmpl'),
+ $achievement = $('#achievement-tmpl'),
+ page = 0,
+ count = 0,
+ $p = null;
+
+ _.each(achievements, function(achievement) {
+ count++;
+
+ var $a = $achievement.clone();
+ $a.removeAttr('id');
+ $a.addClass('achievement'+count);
+ if(!achievement.hidden) {
+ self.setAchievementData($a, achievement.name, achievement.desc);
+ }
+ $a.find('.twitter').attr('href', 'http://twitter.com/share?url=http%3A%2F%2Fbrowserquest.mozilla.org&text=I%20unlocked%20the%20%27'+ achievement.name +'%27%20achievement%20on%20Mozilla%27s%20%23BrowserQuest%21&related=glecollinet:Creators%20of%20BrowserQuest%2Cwhatthefranck');
+ $a.show();
+ $a.find('a').click(function() {
+ var url = $(this).attr('href');
+
+ self.openPopup('twitter', url);
+ return false;
+ });
+
+ if((count - 1) % 4 === 0) {
+ page++;
+ $p = $page.clone();
+ $p.attr('id', 'page'+page);
+ $p.show();
+ $lists.append($p);
+ }
+ $p.append($a);
+ });
+
+ $('#total-achievements').text($('#achievements').find('li').length);
+ },
+
+ initUnlockedAchievements: function(ids) {
+ var self = this;
+
+ _.each(ids, function(id) {
+ self.displayUnlockedAchievement(id);
+ });
+ $('#unlocked-achievements').text(ids.length);
+ },
+
+ setAchievementData: function($el, name, desc) {
+ $el.find('.achievement-name').html(name);
+ $el.find('.achievement-description').html(desc);
+ },
+
+ toggleCredits: function() {
+ var currentState = $('#parchment').attr('class');
+
+ if(this.game.started) {
+ $('#parchment').removeClass().addClass('credits');
+
+ $('body').toggleClass('credits');
+
+ if(!this.game.player) {
+ $('body').toggleClass('death');
+ }
+ if($('body').hasClass('about')) {
+ this.closeInGameAbout();
+ $('#helpbutton').removeClass('active');
+ }
+ } else {
+ if(currentState !== 'animate') {
+ if(currentState === 'credits') {
+ this.animateParchment(currentState, this.previousState);
+ } else {
+ this.animateParchment(currentState, 'credits');
+ this.previousState = currentState;
+ }
+ }
+ }
+ },
+
+ toggleAbout: function() {
+ var currentState = $('#parchment').attr('class');
+
+ if(this.game.started) {
+ $('#parchment').removeClass().addClass('about');
+ $('body').toggleClass('about');
+ if(!this.game.player) {
+ $('body').toggleClass('death');
+ }
+ if($('body').hasClass('credits')) {
+ this.closeInGameCredits();
+ }
+ } else {
+ if(currentState !== 'animate') {
+ if(currentState === 'about') {
+ if(localStorage && localStorage.data) {
+ this.animateParchment(currentState, 'loadcharacter');
+ } else {
+ this.animateParchment(currentState, 'createcharacter');
+ }
+ } else {
+ this.animateParchment(currentState, 'about');
+ this.previousState = currentState;
+ }
+ }
+ }
+ },
+
+ closeInGameCredits: function() {
+ $('body').removeClass('credits');
+ $('#parchment').removeClass('credits');
+ if(!this.game.player) {
+ $('body').addClass('death');
+ }
+ },
+
+ closeInGameAbout: function() {
+ $('body').removeClass('about');
+ $('#parchment').removeClass('about');
+ if(!this.game.player) {
+ $('body').addClass('death');
+ }
+ $('#helpbutton').removeClass('active');
+ },
+
+ togglePopulationInfo: function() {
+ $('#population').toggleClass('visible');
+ },
+
+ openPopup: function(type, url) {
+ var h = $(window).height(),
+ w = $(window).width(),
+ popupHeight,
+ popupWidth,
+ top,
+ left;
+
+ switch(type) {
+ case 'twitter':
+ popupHeight = 450;
+ popupWidth = 550;
+ break;
+ case 'facebook':
+ popupHeight = 400;
+ popupWidth = 580;
+ break;
+ }
+
+ top = (h / 2) - (popupHeight / 2);
+ left = (w / 2) - (popupWidth / 2);
+
+ newwindow = window.open(url,'name','height=' + popupHeight + ',width=' + popupWidth + ',top=' + top + ',left=' + left);
+ if (window.focus) {newwindow.focus()}
+ },
+
+ animateParchment: function(origin, destination) {
+ var self = this,
+ $parchment = $('#parchment'),
+ duration = 1;
+
+ if(this.isMobile) {
+ $parchment.removeClass(origin).addClass(destination);
+ } else {
+ if(this.isParchmentReady) {
+ if(this.isTablet) {
+ duration = 0;
+ }
+ this.isParchmentReady = !this.isParchmentReady;
+
+ $parchment.toggleClass('animate');
+ $parchment.removeClass(origin);
+
+ setTimeout(function() {
+ $('#parchment').toggleClass('animate');
+ $parchment.addClass(destination);
+ }, duration * 1000);
+
+ setTimeout(function() {
+ self.isParchmentReady = !self.isParchmentReady;
+ }, duration * 1000);
+ }
+ }
+ },
+
+ animateMessages: function() {
+ var $messages = $('#notifications div');
+
+ $messages.addClass('top');
+ },
+
+ resetMessagesPosition: function() {
+ var message = $('#message2').text();
+
+ $('#notifications div').removeClass('top');
+ $('#message2').text('');
+ $('#message1').text(message);
+ },
+
+ showMessage: function(message) {
+ var $wrapper = $('#notifications div'),
+ $message = $('#notifications #message2');
+
+ this.animateMessages();
+ $message.text(message);
+ if(this.messageTimer) {
+ this.resetMessageTimer();
+ }
+
+ this.messageTimer = setTimeout(function() {
+ $wrapper.addClass('top');
+ }, 5000);
+ },
+
+ resetMessageTimer: function() {
+ clearTimeout(this.messageTimer);
+ },
+
+ resizeUi: function() {
+ if(this.game) {
+ if(this.game.started) {
+ this.game.resize();
+ this.initHealthBar();
+ this.game.updateBars();
+ } else {
+ var newScale = this.game.renderer.getScaleFactor();
+ this.game.renderer.rescale(newScale);
+ }
+ }
+ }
+ });
+
+ return App;
+});
\ No newline at end of file
diff --git a/js/area.js b/js/area.js
new file mode 100644
index 0000000000000000000000000000000000000000..eaca1e2cbdac48635cd660accfe17d3e21ea49a7
--- /dev/null
+++ b/js/area.js
@@ -0,0 +1,25 @@
+
+define(function() {
+
+ var Area = Class.extend({
+ init: function(x, y, width, height) {
+ this.x = x;
+ this.y = y;
+ this.width = width;
+ this.height = height;
+ },
+
+ contains: function(entity) {
+ if(entity) {
+ return entity.gridX >= this.x
+ && entity.gridY >= this.y
+ && entity.gridX < this.x + this.width
+ && entity.gridY < this.y + this.height;
+ } else {
+ return false;
+ }
+ }
+ });
+
+ return Area;
+});
\ No newline at end of file
diff --git a/js/audio.js b/js/audio.js
new file mode 100644
index 0000000000000000000000000000000000000000..3c4ca4ffc944f47f8ae0a6c72c9d0a0eedf89341
--- /dev/null
+++ b/js/audio.js
@@ -0,0 +1,250 @@
+
+define(['area'], function(Area) {
+
+ var AudioManager = Class.extend({
+ init: function(game) {
+ var self = this;
+
+ this.enabled = true;
+ this.extension = Detect.canPlayMP3() ? "mp3" : "ogg";
+ this.sounds = {};
+ this.game = game;
+ this.currentMusic = null;
+ this.areas = [];
+ this.musicNames = ["village", "beach", "forest", "cave", "desert", "lavaland", "boss"];
+ this.soundNames = ["loot", "hit1", "hit2", "hurt", "heal", "chat", "revive", "death", "firefox", "achievement", "kill1", "kill2", "noloot", "teleport", "chest", "npc", "npc-end"];
+
+ var loadSoundFiles = function() {
+ var counter = _.size(self.soundNames);
+ log.info("Loading sound files...");
+ _.each(self.soundNames, function(name) { self.loadSound(name, function() {
+ counter -= 1;
+ if(counter === 0) {
+ if(!Detect.isSafari()) { // Disable music on Safari - See bug 738008
+ loadMusicFiles();
+ }
+ }
+ });
+ });
+ };
+
+ var loadMusicFiles = function() {
+ if(!self.game.renderer.mobile) { // disable music on mobile devices
+ log.info("Loading music files...");
+ // Load the village music first, as players always start here
+ self.loadMusic(self.musicNames.shift(), function() {
+ // Then, load all the other music files
+ _.each(self.musicNames, function(name) {
+ self.loadMusic(name);
+ });
+ });
+ }
+ };
+
+ if(!(Detect.isSafari() && Detect.isWindows())) {
+ loadSoundFiles();
+ } else {
+ this.enabled = false; // Disable audio on Safari Windows
+ }
+ },
+
+ toggle: function() {
+ if(this.enabled) {
+ this.enabled = false;
+
+ if(this.currentMusic) {
+ this.resetMusic(this.currentMusic);
+ }
+ } else {
+ this.enabled = true;
+
+ if(this.currentMusic) {
+ this.currentMusic = null;
+ }
+ this.updateMusic();
+ }
+ },
+
+ load: function (basePath, name, loaded_callback, channels) {
+ var path = basePath + name + "." + this.extension,
+ sound = document.createElement('audio'),
+ self = this;
+
+ sound.addEventListener('canplaythrough', function (e) {
+ this.removeEventListener('canplaythrough', arguments.callee, false);
+ log.debug(path + " is ready to play.");
+ if(loaded_callback) {
+ loaded_callback();
+ }
+ }, false);
+ sound.addEventListener('error', function (e) {
+ log.error("Error: "+ path +" could not be loaded.");
+ self.sounds[name] = null;
+ }, false);
+
+ sound.preload = "auto";
+ sound.autobuffer = true;
+ sound.src = path;
+ sound.load();
+
+ this.sounds[name] = [sound];
+ _.times(channels - 1, function() {
+ self.sounds[name].push(sound.cloneNode(true));
+ });
+ },
+
+ loadSound: function(name, handleLoaded) {
+ this.load("audio/sounds/", name, handleLoaded, 4);
+ },
+
+ loadMusic: function(name, handleLoaded) {
+ this.load("audio/music/", name, handleLoaded, 1);
+ var music = this.sounds[name][0];
+ music.loop = true;
+ music.addEventListener('ended', function() { music.play() }, false);
+ },
+
+ getSound: function(name) {
+ if(!this.sounds[name]) {
+ return null;
+ }
+ var sound = _.detect(this.sounds[name], function(sound) {
+ return sound.ended || sound.paused;
+ });
+ if(sound && sound.ended) {
+ sound.currentTime = 0;
+ } else {
+ sound = this.sounds[name][0];
+ }
+ return sound;
+ },
+
+ playSound: function(name) {
+ var sound = this.enabled && this.getSound(name);
+ if(sound) {
+ sound.play();
+ }
+ },
+
+ addArea: function(x, y, width, height, musicName) {
+ var area = new Area(x, y, width, height);
+ area.musicName = musicName;
+ this.areas.push(area);
+ },
+
+ getSurroundingMusic: function(entity) {
+ var music = null,
+ area = _.detect(this.areas, function(area) {
+ return area.contains(entity);
+ });
+
+ if(area) {
+ music = { sound: this.getSound(area.musicName), name: area.musicName };
+ }
+ return music;
+ },
+
+ updateMusic: function() {
+ if(this.enabled) {
+ var music = this.getSurroundingMusic(this.game.player);
+
+ if(music) {
+ if(!this.isCurrentMusic(music)) {
+ if(this.currentMusic) {
+ this.fadeOutCurrentMusic();
+ }
+ this.playMusic(music);
+ }
+ } else {
+ this.fadeOutCurrentMusic();
+ }
+ }
+ },
+
+ isCurrentMusic: function(music) {
+ return this.currentMusic && (music.name === this.currentMusic.name);
+ },
+
+ playMusic: function(music) {
+ if(this.enabled && music && music.sound) {
+ if(music.sound.fadingOut) {
+ this.fadeInMusic(music);
+ } else {
+ music.sound.volume = 1;
+ music.sound.play();
+ }
+ this.currentMusic = music;
+ }
+ },
+
+ resetMusic: function(music) {
+ if(music && music.sound && music.sound.readyState > 0) {
+ music.sound.pause();
+ music.sound.currentTime = 0;
+ }
+ },
+
+ fadeOutMusic: function(music, ended_callback) {
+ var self = this;
+ if(music && !music.sound.fadingOut) {
+ this.clearFadeIn(music);
+ music.sound.fadingOut = setInterval(function() {
+ var step = 0.02;
+ volume = music.sound.volume - step;
+
+ if(self.enabled && volume >= step) {
+ music.sound.volume = volume;
+ } else {
+ music.sound.volume = 0;
+ self.clearFadeOut(music);
+ ended_callback(music);
+ }
+ }, 50);
+ }
+ },
+
+ fadeInMusic: function(music) {
+ var self = this;
+ if(music && !music.sound.fadingIn) {
+ this.clearFadeOut(music);
+ music.sound.fadingIn = setInterval(function() {
+ var step = 0.01;
+ volume = music.sound.volume + step;
+
+ if(self.enabled && volume < 1 - step) {
+ music.sound.volume = volume;
+ } else {
+ music.sound.volume = 1;
+ self.clearFadeIn(music);
+ }
+ }, 30);
+ }
+ },
+
+ clearFadeOut: function(music) {
+ if(music.sound.fadingOut) {
+ clearInterval(music.sound.fadingOut);
+ music.sound.fadingOut = null;
+ }
+ },
+
+ clearFadeIn: function(music) {
+ if(music.sound.fadingIn) {
+ clearInterval(music.sound.fadingIn);
+ music.sound.fadingIn = null;
+ }
+ },
+
+ fadeOutCurrentMusic : function() {
+ var self = this;
+ if(this.currentMusic) {
+ this.fadeOutMusic(this.currentMusic, function(music) {
+ self.resetMusic(music);
+ });
+ this.currentMusic = null;
+ }
+ }
+ });
+
+ return AudioManager;
+});
diff --git a/js/bubble.js b/js/bubble.js
new file mode 100644
index 0000000000000000000000000000000000000000..d83df82f9f9f0f65f1499de2cc093e859a37ecd3
--- /dev/null
+++ b/js/bubble.js
@@ -0,0 +1,102 @@
+
+define(['jquery', 'timer'], function($, Timer) {
+
+ var Bubble = Class.extend({
+ init: function(id, element, time) {
+ this.id = id;
+ this.element = element;
+ this.timer = new Timer(5000, time);
+ },
+
+ isOver: function(time) {
+ if(this.timer.isOver(time)) {
+ return true;
+ }
+ return false;
+ },
+
+ destroy: function() {
+ $(this.element).remove();
+ },
+
+ reset: function(time) {
+ this.timer.lastTime = time;
+ }
+ });
+
+ var BubbleManager = Class.extend({
+ init: function(container) {
+ this.container = container;
+ this.bubbles = {};
+ },
+
+ getBubbleById: function(id) {
+ if(id in this.bubbles) {
+ return this.bubbles[id];
+ }
+ return null;
+ },
+
+ create: function(id, message, time) {
+ if(this.bubbles[id]) {
+ this.bubbles[id].reset(time);
+ $("#"+id+" p").html(message);
+ }
+ else {
+ var el = $("