Update memory-manager-concurrent

games/mario/super-mario-bros/artifacts.js

@@ -0,0 +1,103 @@
+(function() {
+
+  /**
+   *
+   * Backbone Game Engine - An elementary HTML5 canvas game engine using Backbone.
+   *
+   * Copyright (c) 2014 Martin Drapeau
+   * https://github.com/martindrapeau/backbone-game-engine
+   *
+   */
+   
+  Backbone.Pennie = Backbone.AnimatedTile.extend({
+    defaults: {
+      name: "pennie",
+      type: "artifact",
+      width: 32,
+      height: 32,
+      spriteSheet: "tiles",
+      state: "idle",
+      collision: true
+    },
+    animations: {
+      idle: {
+        sequences: [52, 52, 53, 54, 53, 52],
+        delay: 50
+      }
+    },
+    initialize: function(attributes, options) {
+      Backbone.AnimatedTile.prototype.initialize.apply(this, arguments);
+      this.on("hit", this.hit, this);
+      this.on("squish", this.hit, this);
+    },
+    hit: function(sprite, dir, dir2) {
+      if (sprite.get("hero")) {
+        sprite.trigger("hit", this);
+        _.defer(this.world.remove, this);
+      }
+    }
+  });
+
+  Backbone.PennieUg = Backbone.Pennie.extend({
+    defaults: _.extend(_.deepClone(Backbone.Pennie.prototype.defaults), {
+      name: "pennie-ug"
+    }),
+    animations: _.deepClone(Backbone.Pennie.prototype.animations)
+  });
+  Backbone.PennieUg.prototype.animations.idle.sequences = [168, 168, 169, 170, 169, 168];
+
+  Backbone.Lever = Backbone.Pennie.extend({
+    defaults: _.extend(_.deepClone(Backbone.Pennie.prototype.defaults), {
+      name: "lever"
+    }),
+    animations: _.deepClone(Backbone.Pennie.prototype.animations),
+    hit: function(sprite, dir, dir2) {}
+  });
+  Backbone.Lever.prototype.animations.idle.sequences = [55, 55, 56, 57, 56, 55];
+
+	Backbone.FlyingPennie = Backbone.Sprite.extend({
+    defaults: {
+      name: "flying-pennie",
+      type: "decoration",
+      width: 32,
+      height: 32,
+      spriteSheet: "tiles",
+      state: "anim",
+      collision: false
+    },
+    animations: {
+      anim: {
+        sequences: [
+          {frame: 52, x: 0, y: -32, scaleX: 1.00, scaleY: 1},
+          {frame: 52, x: 0, y: -64, scaleX: 0.50, scaleY: 1},
+          {frame: 53, x: 0, y: -90, scaleX: 0.50, scaleY: 1},
+          {frame: 53, x: 0, y: -128, scaleX: 1.00, scaleY: 1},
+          {frame: 53, x: 0, y: -128, scaleX: 0.50, scaleY: 1},
+          {frame: 52, x: 0, y: -112, scaleX: 0.50, scaleY: 1},
+          {frame: 52, x: 0, y: -90, scaleX: 1.00, scaleY: 1},
+          {frame: 52, x: 0, y: -80, scaleX: 0.50, scaleY: 1},
+          {frame: 53, x: 0, y: -80, scaleX: 0.50, scaleY: 1}
+        ],
+        delay: 50
+      }
+    },
+    initialize: function(attributes, options) {
+      options || (options = {});
+      this.world = options.world;
+      this.lastSequenceChangeTime = 0;
+    },
+    update: function(dt) {
+      Backbone.Sprite.prototype.update.call(this, arguments);
+      var animation = this.getAnimation(),
+          sequenceIndex = this.get("sequenceIndex");
+
+      if (sequenceIndex >= animation.sequences.length-1) {
+        _.defer(this.world.remove, this);
+        return false;
+      }
+
+      return true;
+    }
+	});
+
+}).call(this);

games/mario/super-mario-bros/display.js

@@ -0,0 +1,88 @@
+(function() {
+
+  /**
+   *
+   * Backbone Game Engine - An elementary HTML5 canvas game engine using Backbone.
+   *
+   * Copyright (c) 2014 Martin Drapeau
+   * https://github.com/martindrapeau/backbone-game-engine
+   *
+   */
+   
+  Backbone.Display = Backbone.Model.extend({
+    defaults: {
+      pennies: 0
+    },
+    initialize: function(attributes, options) {
+      options || (options = {});
+      this.world = options.world;
+
+      this.pennieSprite = new Backbone.AnimatedTile({
+        name: "pennie",
+        type: "character",
+        x: 150,
+        y: 4,
+        width: 32,
+        height: 32,
+        spriteSheet: "tiles",
+        state: "idle"
+      });
+      this.pennieSprite.animations = {
+        idle: {
+          sequences: [52, 52, 53, 54, 53, 52],
+          delay: 50,
+          scaleX: 0.75,
+          scaleY: 0.75
+        }
+      };
+        
+      this.on("attach", this.onAttach, this);
+      this.on("detach", this.onDetach, this);
+    },
+    onAttach: function() {
+      this.pennieSprite.engine = this.engine;
+      this.pennieSprite.trigger("attach");
+      this.listenTo(this.world.dynamicSprites, "remove", this.onPennieRemoved);
+      this.pennieSprite.set({x: this.engine.canvas.width/2 - 30});
+    },
+    onDetach: function() {
+      this.pennieSprite.trigger("detach");
+      this.pennieSprite.engine = undefined;
+      this.stopListening();
+    },
+    update: function(dt) {
+      return true;
+    },
+    draw: function(context) {
+
+      var text = "×" + (this.attributes.pennies < 10 ? "0" : "") + this.attributes.pennies;
+      context.fillStyle = "#fff";
+      context.font = "20px arcade, Verdana, Arial, Sans-Serif";
+      context.textBaseline = "top";
+      context.fontWeight = "normal";
+      
+      context.textAlign = "left";
+      context.fillText(text, context.canvas.width/2 - 100, 12);
+
+      this.pennieSprite.draw.call(this.pennieSprite, context);
+
+      context.textAlign = "right";
+      context.fillText(this.world.attributes.name.replace(/_/g, " "), context.canvas.width - 100, 12);
+
+      return this;
+    },
+    onPennieRemoved: function(sprite) {
+      if (this.world.get("state") != "play") return;
+
+      var name = sprite.get("name"),
+          pennies = this.get("pennies");
+
+      if (name.indexOf("pennie") != -1) {
+        pennies += 1;
+        if (pennies > 99) pennies = 0;
+        this.set("pennies", pennies);
+      }
+    }
+  });
+
+}).call(this);

games/mario/super-mario-bros/enemies.js

@@ -0,0 +1,313 @@
+(function() {
+
+  /**
+   *
+   * Backbone Game Engine - An elementary HTML5 canvas game engine using Backbone.
+   *
+   * Copyright (c) 2014 Martin Drapeau
+   * https://github.com/martindrapeau/backbone-game-engine
+   *
+   */
+   
+  var sequenceDelay = 300,
+      animations;
+
+  // Mushroom is the base enemie class.
+  Backbone.Mushroom = Backbone.Character.extend({
+    defaults: _.extend(_.deepClone(Backbone.Character.prototype.defaults), {
+      name: "mushroom",
+      type: "character",
+      width: 32,
+      height: 64,
+      paddingTop: 32,
+      spriteSheet: "enemies",
+      state: "idle-left",
+      velocity: 0,
+      yVelocity: 0,
+      collision: true,
+      aiDelay: 0
+    }),
+    animations: _.extend(_.deepClone(Backbone.Character.prototype.animations), {
+      "squished-left": {
+        sequences: [2],
+        velocity: 0,
+        scaleX: 1,
+        scaleY: 1
+      },
+      "squished-right": {
+        sequences: [2],
+        velocity: 0,
+        scaleX: -1,
+        scaleY: 1
+      }
+    }),
+    ai: function(dt) {
+      var cur = this.getStateInfo();
+      if (cur.mov == "squished" && !this.get("collision")) this.cancelUpdate = true;
+      return this;
+    },
+    isAttacking: function(sprite, dir, dir2) {
+      if (this.cancelUpdate) return false;
+      var cur = this.getStateInfo();
+      return (cur.mov == "walk" || cur.mov == "idle");
+    },
+    squish: function(sprite) {
+      var self = this,
+          cur = this.getStateInfo();
+      this.set({
+        state: this.buildState("squished", cur.dir),
+        collision: false
+      });
+      this.world.setTimeout(function() {
+        if (self && self.world) self.world.remove(self);
+      }, 2000);
+      this.cancelUpdate = true;
+      return this;
+    },
+    hit: function(sprite, dir, dir2) {
+      if (this._handlingSpriteHit) return this;
+      this._handlingSpriteHit = sprite;
+
+      var cur = this.getStateInfo(),
+          opo = dir == "left" ? "right" : (dir == "right" ? "left" : (dir == "top" ? "bottom" : "top"));
+
+      if (sprite.get("hero")) {
+        if (dir == "top")
+          this.squish.apply(this, arguments);
+      } else if (sprite.get("state").indexOf("slide") != -1 ||
+                sprite.get("type") == "tile" && dir == "bottom" && sprite.get("state") == "bounce") {
+        this.knockout.apply(this, arguments);
+      }
+      sprite.trigger("hit", this, opo);
+
+      this._handlingSpriteHit = undefined;
+      return this;
+    }
+  });
+
+  Backbone.Turtle = Backbone.Mushroom.extend({
+    defaults: _.extend(_.deepClone(Backbone.Mushroom.prototype.defaults), {
+      name: "turtle"
+    }),
+    animations: _.deepClone(Backbone.Mushroom.prototype.animations),
+    isAttacking: function() {
+      var cur = this.getStateInfo();
+      return (cur.mov == "walk" || cur.mov == "idle");
+    },
+    slide: function(sprite, dir, dir2) {
+      if (this.wakeTimerId) {
+        this.world.clearTimeout(this.wakeTimerId);
+        this.wakeTimerId = null;
+      }
+
+      var dir = sprite.getCenterX(true) > this.getCenterX(true) ? "left" : "right";
+      this.set("state", this.buildState("walk", "slide", dir));
+      this.cancelUpdate = true;
+      return this;
+    },
+    squish: function(sprite, dir, dir2) {
+      var cur = this.getStateInfo();
+
+      if (cur.mov == "squished" || cur.mov == "wake")
+        return this.slide.apply(this, arguments);
+
+      if (this.wakeTimerId) {
+        this.world.clearTimeout(this.wakeTimerId);
+        this.wakeTimerId = null;
+      }
+
+      this.set("state", this.buildState("squished", cur.dir));
+      this.wakeTimerId = this.world.setTimeout(this.wake.bind(this), 5000);
+
+      this.cancelUpdate = true;
+      return this;
+    },
+    hit: function(sprite, dir, dir2) {
+      if (this._handlingSpriteHit) return this;
+      this._handlingSpriteHit = sprite;
+
+      var cur = this.getStateInfo(),
+          opo = dir == "left" ? "right" : (dir == "right" ? "left" : (dir == "top" ? "bottom" : "top"));
+      if (cur.mov2 == "slide") this.cancelUpdate = true;
+
+      if (dir == "top") {
+        this.squish.apply(this, arguments);
+      } else if (sprite.get("hero") && (cur.mov == "squished" || cur.mov == "wake")) {
+        this.slide.apply(this, arguments);
+        opo = "bottom";
+      } else if (sprite.get("state").indexOf("slide") != -1 ||
+                sprite.get("type") == "tile" && dir == "bottom" && sprite.get("state") == "bounce") {
+        this.knockout.apply(this, arguments);
+      }
+
+      sprite.trigger("hit", this, opo);
+
+      this._handlingSpriteHit = undefined;
+      return this;
+    },
+    wake: function() {
+      var cur = this.getStateInfo();
+      if (this.wakeTimerId) {
+        this.world.clearTimeout(this.wakeTimerId);
+        this.wakeTimerId = null;
+      }
+
+      if (cur.mov == "squished") {
+        this.set("state", this.buildState("wake", cur.dir));
+        this.wakeTimerId = this.world.setTimeout(this.wake.bind(this), 5000);
+      } else if (cur.mov == "wake") {
+        this.set("state", this.buildState("walk", cur.dir));
+      }
+      return this;
+    }
+  });
+  animations = Backbone.Turtle.prototype.animations;
+  animations["idle-left"].sequences = animations["idle-right"].sequences =
+    animations["fall-left"].sequences = animations["fall-right"].sequences =
+    animations["ko-left"].sequences = animations["ko-right"].sequences = [6];
+  animations["walk-left"].sequences = animations["walk-right"].sequences = [6, 7];
+  animations["squished-left"].sequences = animations["squished-right"].sequences = [10];
+  _.extend(animations, {
+    "wake-left": {
+      sequences: [10, 11],
+      velocity: 0,
+      scaleX: 1,
+      scaleY: 1,
+      delay: sequenceDelay
+    },
+    "wake-right": {
+      sequences: [10, 11],
+      velocity: 0,
+      scaleX: -1,
+      scaleY: 1,
+      delay: sequenceDelay
+    },
+    "walk-slide-left": {
+      sequences: [10],
+      velocity: -300,
+      scaleX: 1,
+      scaleY: 1
+    },
+    "walk-slide-right": {
+      sequences: [10],
+      velocity: 300,
+      scaleX: -1,
+      scaleY: 1
+    },
+    "fall-slide-left": {
+      sequences: [10],
+      velocity: -300,
+      yVelocity: animations["fall-left"].yVelocity,
+      yAcceleration: animations["fall-left"].yAcceleration,
+      scaleX: 1,
+      scaleY: 1
+    },
+    "fall-slide-right": {
+      sequences: [10],
+      velocity: 300,
+      yVelocity: animations["fall-right"].yVelocity,
+      yAcceleration: animations["fall-right"].yAcceleration,
+      scaleX: -1,
+      scaleY: 1
+    }
+  });
+
+  Backbone.FlyingTurtle = Backbone.Turtle.extend({
+    defaults: _.extend(_.deepClone(Backbone.Turtle.prototype.defaults), {
+      name: "flying-turtle"
+    }),
+    animations: _.deepClone(Backbone.Turtle.prototype.animations),
+    fallbackSprite: Backbone.Turtle,
+    onUpdate: function(dt) {
+      var cur = this.getStateInfo(),
+          animation = this.getAnimation(),
+          attrs = {};
+      if (cur.mov2 == null && cur.mov == "walk" && this.world.get("state") == "play") {
+          attrs.state = this.buildState("fall", cur.dir);
+          attrs.yVelocity = -this.animations["fall-right"].yVelocity;
+      }
+      if (!_.isEmpty(attrs)) this.set(attrs);
+      return true;
+    },
+    squish: function(sprite) {
+      var cur = this.getStateInfo();
+      var newSprite = new this.fallbackSprite({
+        x: this.get("x"),
+        y: this.get("y"),
+        state: "walk-" + cur.dir
+      });
+      newSprite.set("id", this.world.buildIdFromName(newSprite.get("name")));
+      this.world.add(newSprite);
+      this.world.remove(this);
+      this.cancelUpdate = true;
+    }
+  });
+  animations = Backbone.FlyingTurtle.prototype.animations;
+  animations["idle-left"].sequences = animations["idle-right"].sequences =
+    animations["fall-left"].sequences = animations["fall-right"].sequences =
+    animations["ko-left"].sequences = animations["ko-right"].sequences = [8];
+  animations["walk-left"].sequences = animations["walk-right"].sequences = [8, 9];
+
+  Backbone.RedTurtle = Backbone.Turtle.extend({
+    defaults: _.extend(_.deepClone(Backbone.Turtle.prototype.defaults), {
+      name: "red-turtle"
+    }),
+    animations: _.deepClone(Backbone.Turtle.prototype.animations)
+  });
+  animations = Backbone.RedTurtle.prototype.animations;
+  animations["idle-left"].sequences = animations["idle-right"].sequences =
+    animations["fall-left"].sequences = animations["fall-right"].sequences =
+    animations["ko-left"].sequences = animations["ko-right"].sequences = [108];
+  animations["walk-left"].sequences = animations["walk-right"].sequences = [108, 109];
+  animations["squished-left"].sequences = animations["squished-right"].sequences =
+    animations["walk-slide-left"].sequences = animations["walk-slide-right"].sequences =
+    animations["fall-slide-left"].sequences = animations["fall-slide-right"].sequences = [112];
+  animations["wake-left"].sequences = animations["wake-right"].sequences = [112, 113];
+
+  Backbone.RedFlyingTurtle = Backbone.FlyingTurtle.extend({
+    defaults: _.extend(_.deepClone(Backbone.FlyingTurtle.prototype.defaults), {
+      name: "red-flying-turtle"
+    }),
+    animations: _.deepClone(Backbone.FlyingTurtle.prototype.animations),
+    fallbackSprite: Backbone.RedTurtle
+  });
+  animations = Backbone.RedFlyingTurtle.prototype.animations;
+  animations["idle-left"].sequences = animations["idle-right"].sequences =
+    animations["fall-left"].sequences = animations["fall-right"].sequences =
+    animations["ko-left"].sequences = animations["ko-right"].sequences = [110];
+  animations["walk-left"].sequences = animations["walk-right"].sequences = [110, 111];
+  animations["squished-left"].sequences = animations["squished-right"].sequences =
+    animations["walk-slide-left"].sequences = animations["walk-slide-right"].sequences =
+    animations["fall-slide-left"].sequences = animations["fall-slide-right"].sequences = [112];
+  animations["wake-left"].sequences = animations["wake-right"].sequences = [112, 113];
+
+  Backbone.Beetle = Backbone.Turtle.extend({
+    defaults: _.extend(_.deepClone(Backbone.Turtle.prototype.defaults), {
+      name: "beetle"
+    }),
+    animations: _.deepClone(Backbone.Turtle.prototype.animations)
+  });
+  animations = Backbone.Beetle.prototype.animations;
+  animations["idle-left"].sequences = animations["idle-right"].sequences =
+    animations["fall-left"].sequences = animations["fall-right"].sequences =
+    animations["ko-left"].sequences = animations["ko-right"].sequences = [33];
+  animations["walk-left"].sequences = animations["walk-right"].sequences = [33, 32];
+  animations["squished-left"].sequences = animations["squished-right"].sequences =
+    animations["walk-slide-left"].sequences = animations["walk-slide-right"].sequences = 
+    animations["fall-slide-left"].sequences = animations["fall-slide-right"].sequences = 
+    animations["wake-left"].sequences = animations["wake-right"].sequences = [34];
+
+  Backbone.Spike = Backbone.Mushroom.extend({
+    defaults: _.extend(_.deepClone(Backbone.Mushroom.prototype.defaults), {
+      name: "spike"
+    }),
+    animations: _.deepClone(Backbone.Mushroom.prototype.animations),
+    squish: function() {}
+  });
+  animations = Backbone.Spike.prototype.animations;
+  animations["idle-left"].sequences = animations["idle-right"].sequences =
+    animations["fall-left"].sequences = animations["fall-right"].sequences =
+    animations["ko-left"].sequences = animations["ko-right"].sequences = [133];
+  animations["walk-left"].sequences = animations["walk-right"].sequences = [133, 132];
+
+}).call(this);

games/mario/super-mario-bros/index.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<html style="touch-action: none;" manifest="offline.appcache">
+    <head>
+        <title>Super Mario Bros Level 1-1 - Backbone Game Engine</title>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />
+        <link href="../apple_touch_icon.png" rel="apple-touch-icon" />
+
+        <meta name="viewport" content="width=960, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
+        <meta name="mobileoptimized" content="0" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+
+        <script src="../3rd/qtree.js" type="text/javascript"></script>
+        <script src="../3rd/underscore.js" type="text/javascript"></script>
+        <script src="../3rd/backbone.native.js" type="text/javascript"></script>
+        <script src="../3rd/backbone.js" type="text/javascript"></script>
+
+        <script src="../src/adjust-viewport.js" type="text/javascript"></script>
+        <script src="../src/shapes.js" type="text/javascript"></script>
+        <script src="../src/core.js" type="text/javascript"></script>
+        <script src="../src/character.js" type="text/javascript"></script>
+        <script src="../src/input.js" type="text/javascript"></script>
+        <script src="../src/hero.js" type="text/javascript"></script>
+        <script src="../src/world.js" type="text/javascript"></script>
+        <script src="../src/local-storage.js" type="text/javascript"></script>
+        <script src="../src/camera.js" type="text/javascript"></script>
+        <script src="../src/editor.js" type="text/javascript"></script>
+
+        <script src="mario.js" type="text/javascript"></script>
+        <script src="tiles.js" type="text/javascript"></script>
+        <script src="artifacts.js" type="text/javascript"></script>
+        <script src="enemies.js" type="text/javascript"></script>
+        <script src="display.js" type="text/javascript"></script>
+        <script src="level_1-1.js" type="text/javascript"></script>
+        <script src="main.js" type="text/javascript"></script>
+
+        <style>
+            * { box-sizing: border-box; }
+            html, body {
+                margin: 0;
+                padding: 0;
+                background-color: #000;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            canvas {
+                position: fixed;
+                top: 0;
+                left: 0;
+            }
+
+            /* canvas 自适应容器 */
+            canvas {
+                width: 100%;
+                height: auto;
+            }
+
+        </style>
+
+        <script>
+            // 强制启用触摸板
+            window.forceTouchpad = true;
+        </script>
+
+    </head>
+
+    <body>
+        <img id="mario" src="super-mario-2x.png" style="display:none;" />
+        <img id="tiles" src="super-mario-tiles-2x.png" style="display:none;" />
+        <img id="enemies" src="super-mario-enemies-2x.png" style="display:none;" />
+        <img id="icons" src="icons.png" style="display:none;" />
+
+        <canvas id="foreground" width="960" height="700">
+            Your browser does not support canvas element.
+        </canvas>
+
+        <script>
+            (function () {
+                const canvas = document.getElementById("foreground");
+                if (!canvas) return;
+
+                function fitCanvas() {
+                    const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0;
+                    const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+                    if (!viewportWidth || !viewportHeight) return;
+
+                    const ratio = canvas.width / canvas.height;
+                    let w = viewportWidth;
+                    let h = viewportWidth / ratio;
+                    if (h > viewportHeight) {
+                        h = viewportHeight;
+                        w = viewportHeight * ratio;
+                    }
+
+                    canvas.style.width = w + "px";
+                    canvas.style.height = h + "px";
+                    canvas.style.left = (viewportWidth - w) / 2 + "px";
+                    canvas.style.top = (viewportHeight - h) / 2 + "px";
+                }
+
+                window.addEventListener("resize", fitCanvas, { passive: true });
+                window.addEventListener("orientationchange", fitCanvas, { passive: true });
+                fitCanvas();
+                setTimeout(fitCanvas, 50);
+            })();
+        </script>
+    </body>
+
+</html>

games/mario/super-mario-bros/main.js

@@ -0,0 +1,254 @@
+$(window).on("load", function() {
+
+  /**
+   *
+   * Backbone Game Engine - An elementary HTML5 canvas game engine using Backbone.
+   *
+   * Copyright (c) 2014 Martin Drapeau
+   * https://github.com/martindrapeau/backbone-game-engine
+   *
+   */
+
+  
+  var canvas = document.getElementById("foreground"),
+      context = canvas.getContext("2d");
+  adjustViewport(canvas);
+
+  var spriteNames = [
+    "ground", "brick-top", "brick", "ground2", "block", "block2", "question-block", "pennie",
+    "tube1", "tube2", "tube3-mirror", "tube4-mirror", "bush1", "bush2", "bush3", "cloud1", "cloud2", "cloud3",
+    "cloud-happy1", "cloud-happy2", "cloud-happy3", "flag-pole1", "water-bridge",
+    "cloud-small", "ground-ug", "brick-top-ug", "brick-ug", "ground2-ug", "block-ug", "block2-ug",
+    "question-block-ug", "pennie-ug", "tube3", "tube4", "tube1-mirror", "tube2-mirror", "bush4", "bush5", "bush6",
+    "cloud4", "cloud5", "cloud6", "cloud-happy4", "cloud-happy5", "cloud-happy6", "flag-pole2", "railing",
+    "tube1-out", "tube2-out", "tube3-out", "tube1-out-mirror", "tube2-out-mirror", "tube3-out-mirror", "water1", "lava1",
+    "platform1", "platform2", "platform3",  "brick7-castle", "brick-castle", "brick2-castle", "brick3-castle",
+    "mario", "luigi", "mushroom", "turtle", "flying-turtle", "red-turtle", "red-flying-turtle", "beetle", "spike",
+    "tube4-out", "tube5-out", "tube6-out", "tube4-out-mirror", "tube5-out-mirror", "tube6-out-mirror", "water2", "lava2", 
+    "bush7", "bush8", "bush9", "platform-pole", "brick4-castle", "brick5-castle", "brick6-castle"
+  ];
+
+  Backbone.Controller = Backbone.Model.extend({
+    initialize: function(attributes, options) {
+      options || (options = {});
+      var controller = this;
+
+      _.bindAll(this, "onChangeState", "toggleState", "saveWorld", "loadWorld");
+
+      // Create our sprite sheets and attach them to existing sprite classes
+      this.spriteSheets = new Backbone.SpriteSheetCollection([{
+        id: "mario",
+        img: "#mario",
+        tileWidth: 32,
+        tileHeight: 64,
+        tileColumns: 21,
+        tileRows: 6
+      }, {
+        id: "tiles",
+        img: "#tiles",
+        tileWidth: 32,
+        tileHeight: 32,
+        tileColumns: 29,
+        tileRows: 28
+      }, {
+        id: "enemies",
+        img: "#enemies",
+        tileWidth: 32,
+        tileHeight: 64,
+        tileColumns: 51,
+        tileRows: 3
+      }]).attachToSpriteClasses();
+
+      // Create the debug panel
+      this.debugPanel = new Backbone.DebugPanel();
+
+      // User input (turn off touchpad to start)
+      this.input = new Backbone.Input({
+        drawTouchpad: true
+      });
+
+      // Camera
+      this.camera = new Backbone.Camera();
+
+      // Our world
+      // Reserve bottom of canvas for input and editor
+      this.world = new Backbone.World(
+        _.extend({viewportBottom: 156}, window._world), {
+        input: this.input,
+        camera: this.camera
+      });
+
+      this.display = new Backbone.Display({}, {
+        world: this.world
+      });
+
+      // Message
+      this.message = new Backbone.Message({
+        x: 480, y: 20
+      });
+
+      // Buttons
+      this.toggleButton = new Backbone.Button({
+        x: 4, y: 4, width: 52, height: 52, borderRadius: 5,
+        img: "#icons", imgX: 0, imgY: 0, imgWidth: 32, imgHeight: 32, imgMargin: 10
+      });
+      this.toggleButton.on("tap", this.toggleState, this);
+
+      this.saveButton = new Backbone.Button({
+        x: 4, y: 548, width: 52, height: 52, borderRadius: 5,
+        img: "#icons", imgX: 96, imgY: 0, imgWidth: 32, imgHeight: 32, imgMargin: 10
+      });
+      this.saveButton.on("tap", this.saveWorld, this);
+
+      this.restartButton = new Backbone.Button({
+        x: 4, y: 608, width: 52, height: 52, borderRadius: 5,
+        img: "#icons", imgX: 128, imgY: 0, imgWidth: 32, imgHeight: 32, imgMargin: 10
+      });
+      this.restartButton.on("tap", this.restartWorld, this);
+
+      this.downloadButton = new Backbone.Button({
+        x: 888, y: 10, width: 52, height: 52, borderRadius: 5,
+        img: "#icons", imgX: 64, imgY: 0, imgWidth: 32, imgHeight: 32, imgMargin: 10
+      });
+      this.downloadButton.on("tap", this.downloadNewVersion, this);
+
+      // The game engine
+      this.engine = new Backbone.Engine({}, {
+        canvas: canvas,
+        debugPanel: this.debugPanel
+      });
+      this.engine.add(_.compact([
+        this.world,
+        this.display,
+        this.camera,
+        this.toggleButton,
+        this.message,
+        this.debugPanel
+      ]));
+
+      // The sprite picker and editor
+      this.editor = new Backbone.WorldEditor({
+        spriteNames: spriteNames
+      }, {
+        world: this.world
+      });
+
+      // Controls
+      $(document).on("keypress.Controller", function(e) {
+        if (e.keyCode == 66 || e.keyCode == 98)
+          controller.engine.toggle(); // b to break the animation
+        else if (e.keyCode == 80 || e.keyCode == 112)
+          controller.toggleState(); // p to pause and pause
+      });
+
+      this.listenTo(this.world, "change:state", this.onChangeState);
+      this.onChangeState();
+
+      // If we have Application Cache active, load the latest world
+      this.loadWorld();
+    },
+    toggleState: function(e) {
+      var state = this.world.get("state");
+      this.world.set("state", state == "pause" ? "play" : "pause");
+      if (!this.engine.isRunning()) this.engine.start();
+    },
+    onChangeState: function() {
+      var state = this.world.get("state");
+      if (state == "pause") {
+        // Edit
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        this.engine.remove(this.input);
+        this.engine.add(this.editor);
+        this.engine.add([this.saveButton, this.restartButton]);
+        this.toggleButton.set({imgX: 32});
+      } else {
+        // Play
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        this.engine.remove(this.editor);
+        this.engine.remove([this.saveButton, this.restartButton]);
+        this.engine.add(this.input);
+        this.toggleButton.set({imgX: 0});
+      }
+    },
+    // Save our world to the server when changed. Debounce by 5 seconds
+    // and push back saving upon activity
+    saveWorld: function() {
+      var controller = this,
+          world = this.world
+          message = this.message;
+
+      message.show("Saving...");
+      world.save(null, {
+        success: function() {
+          setTimeout(function() {
+            message.hide();
+          }, 1000);
+        },
+        error: function(xhr, textStatus, errorThrown ) {
+          message.show("Error: " + errorThrown);
+        }
+      });
+      return this;
+    },
+    // Load our world from the server.
+    loadWorld: function() {
+      var controller = this,
+          world = this.world,
+          message = this.message;
+
+      message.show("Loading...");
+      world.fetch({
+        success: function() {
+          world.spawnSprites();
+          message.hide();
+        },
+        error: function(xhr, textStatus, errorThrown ) {
+          message.show('Error: ' + errorThrown);
+          setTimeout(function() {
+            message.hide();
+          }, 2000);
+        }
+      });
+      return this;
+    },
+    restartWorld: function() {
+      var controller = this,
+          world = this.world,
+          message = this.message;
+
+      message.show("Restarting...");
+
+      localStorage.removeItem(world.id);
+
+      world.set(window._world).spawnSprites();
+
+      setTimeout(function() {
+        message.hide();
+      }, 2000);
+
+      return this;
+    },
+    downloadNewVersion: function() {
+      window.applicationCache.swapCache();
+      this.message.show("Please wait...");
+      window.location.reload();
+    }
+  });
+  
+  var controller = new Backbone.Controller();
+
+  // When a newer version is available, load it and inform
+  // the user it can be downloaded.
+  if (window.applicationCache !== undefined)
+    window.applicationCache.addEventListener('updateready', function() {
+      controller.engine.add(controller.downloadButton);
+    });
+
+  // Expose things as globals - easier to debug
+  _.extend(window, {
+    canvas: canvas,
+    context: context,
+    controller: controller,
+  });
+
+});

games/mario/super-mario-bros/mario.js

@@ -0,0 +1,68 @@
+(function() {
+
+  /**
+   *
+   * Backbone Game Engine - An elementary HTML5 canvas game engine using Backbone.
+   *
+   * Copyright (c) 2014 Martin Drapeau
+   * https://github.com/martindrapeau/backbone-game-engine
+   *
+   */
+  
+  Backbone.Mario = Backbone.Hero.extend({
+    defaults: _.extend({}, Backbone.Hero.prototype.defaults, {
+      name: "mario",
+      spriteSheet: "mario"
+    }),
+    bounce: function(sprite, dir, dir2) {
+      var cur = this.getStateInfo(),
+          state = this.buildState("jump", cur.dir);
+      this.set({
+        state: state,
+        yVelocity: this.animations[state].yStartVelocity*0.5,
+        nextState: this.buildState("idle", cur.dir)
+      });
+      this.cancelUpdate = true;
+      return this;
+    },
+    hit: function(sprite, dir, dir2) {
+      if (this._handlingSpriteHit) return this;
+      this._handlingSpriteHit = sprite;
+
+      if (sprite.get("type") == "artifact") {
+        this.cancelUpdate = true;
+      } else if (sprite.get("type") == "character") {
+        var name = sprite.get("name"),
+            cur = this.getStateInfo(),
+            opo = dir == "left" ? "right" : (dir == "right" ? "left" : (dir == "top" ? "bottom" : "top"));
+
+        if (dir == "bottom" && name != "spike") {
+          this.bounce.apply(this, arguments);
+        } else if (sprite.isAttacking()) {
+          this.knockout(sprite, "left");
+        }
+        sprite.trigger("hit", this, opo);
+      }
+
+      this._handlingSpriteHit = undefined;
+      return this;
+    }
+  });
+  
+  Backbone.Luigi = Backbone.Mario.extend({
+    defaults: _.extend({}, Backbone.Hero.prototype.defaults, {
+      name: "luigi",
+      spriteSheet: "mario"
+    }),
+    animations: _.reduce(Backbone.Hero.prototype.animations, function(animations, anim, name) {
+      var clone = _.clone(anim);
+      clone.sequences = _.map(anim.sequences, function(index) {
+        return index + 42;
+      });
+      animations[name] = clone;
+      return animations;
+    }, {})
+  });
+
+
+}).call(this);

games/mario/super-mario-bros/offline.appcache

@@ -0,0 +1,31 @@
+CACHE MANIFEST
+# Version 0.40 (c) 2014 Martin Drapeau
+
+../3rd/qtree.js
+../3rd/underscore.js
+../3rd/backbone.native.js
+../3rd/backbone.js
+
+../src/adjust-viewport.js
+../src/input.js
+../src/shapes.js
+../src/core.js
+../src/character.js
+../src/hero.js
+../src/world.js
+../src/local-storage.js
+../src/camera.js
+../src/editor.js
+
+mario.js
+tiles.js
+artifacts.js
+enemies.js
+display.js
+level_1-1.js
+main.js
+
+super-mario-2x.png
+super-mario-tiles-2x.png
+super-mario-enemies-2x.png
+icons.png

games/mario/super-mario-bros/tiles.js

@@ -0,0 +1,364 @@
+(function() {
+
+  /**
+   *
+   * Backbone Game Engine - An elementary HTML5 canvas game engine using Backbone.
+   *
+   * Copyright (c) 2014 Martin Drapeau
+   * https://github.com/martindrapeau/backbone-game-engine
+   *
+   */
+  
+  Backbone.Tile = Backbone.Sprite.extend({
+    defaults: {
+      type: "tile",
+      width: 32,
+      height: 32,
+      spriteSheet: "tiles",
+      state: "idle",
+      static: true,
+      persist: true
+    },
+    initialize: function(attributes, options) {
+      options || (options = {});
+      this.world = options.world;
+      this.lastSequenceChangeTime = 0;
+    }
+  });
+
+
+  function extendSprite(cls, name, attributes, animations) {
+    var newCls = _.classify(name);
+    Backbone[newCls] = Backbone[cls].extend({
+      defaults: _.extend(
+        _.deepClone(Backbone[cls].prototype.defaults),
+        {name: name},
+        attributes || {}
+      ),
+      animations: _.extend(
+        _.deepClone(Backbone[cls].prototype.animations),
+        animations || {}
+      )
+    });
+    return Backbone[newCls];
+  }
+
+  extendSprite("Tile", "ground", {collision: true}, {idle: {sequences: [0]}});
+
+  extendSprite("Tile", "ground2", {collision: true}, {idle: {sequences: [31]}});
+
+  extendSprite("Tile", "block", {collision: true}, {idle: {sequences: [3]}});
+
+  extendSprite("Tile", "block2", {collision: true}, {idle: {sequences: [29]}});
+
+  extendSprite("Tile", "tube1", {collision: true}, {idle: {sequences: [290]}});
+  
+  extendSprite("Tile", "tube2", {collision: true}, {idle: {sequences: [291]}});
+
+  extendSprite("Tile", "tube1-mirror", {collision: true}, {idle: {sequences: [261]}});
+  
+  extendSprite("Tile", "tube2-mirror", {collision: true}, {idle: {sequences: [262]}});
+
+  extendSprite("Tile", "tube1-ug", {collision: true}, {idle: {sequences: [406]}});
+  
+  extendSprite("Tile", "tube2-ug", {collision: true}, {idle: {sequences: [407]}});
+
+  extendSprite("Tile", "bush1", {collision: false}, {idle: {sequences: [240]}});
+
+  extendSprite("Tile", "bush2", {collision: false}, {idle: {sequences: [241]}});
+
+  extendSprite("Tile", "bush3", {collision: false}, {idle: {sequences: [242]}});
+
+  extendSprite("Tile", "cloud1", {collision: false}, {idle: {sequences: [580]}});
+
+  extendSprite("Tile", "cloud2", {collision: false}, {idle: {sequences: [581]}});
+
+  extendSprite("Tile", "cloud3", {collision: false}, {idle: {sequences: [582]}});
+
+  extendSprite("Tile", "cloud-happy1", {collision: false}, {idle: {sequences: [585]}});
+
+  extendSprite("Tile", "cloud-happy2", {collision: false}, {idle: {sequences: [586]}});
+
+  extendSprite("Tile", "cloud-happy3", {collision: false}, {idle: {sequences: [587]}});
+
+  extendSprite("Tile", "flag-pole1", {collision: false}, {idle: {sequences: [306]}});
+
+  extendSprite("Tile", "cloud-small", {collision: true}, {idle: {sequences: [613]}});
+
+  extendSprite("Tile", "ground-ug", {collision: true}, {idle: {sequences: [116]}});
+
+  extendSprite("Tile", "ground2-ug", {collision: true}, {idle: {sequences: [147]}});
+
+  extendSprite("Tile", "block-ug", {collision: true}, {idle: {sequences: [119]}});
+
+  extendSprite("Tile", "block2-ug", {collision: true}, {idle: {sequences: [145]}});
+
+  extendSprite("Tile", "tube3", {collision: true}, {idle: {sequences: [319]}});
+  
+  extendSprite("Tile", "tube4", {collision: true}, {idle: {sequences: [320]}});
+
+  extendSprite("Tile", "tube3-mirror", {collision: true}, {idle: {sequences: [232]}});
+  
+  extendSprite("Tile", "tube4-mirror", {collision: true}, {idle: {sequences: [233]}});
+
+  extendSprite("Tile", "tube3-ug", {collision: true}, {idle: {sequences: [435]}});
+  
+  extendSprite("Tile", "tube4-ug", {collision: true}, {idle: {sequences: [436]}});
+
+  extendSprite("Tile", "bush4", {collision: false}, {idle: {sequences: [269]}});
+
+  extendSprite("Tile", "bush5", {collision: false}, {idle: {sequences: [270]}});
+
+  extendSprite("Tile", "bush6", {collision: false}, {idle: {sequences: [271]}});
+
+  extendSprite("Tile", "cloud4", {collision: false}, {idle: {sequences: [609]}});
+
+  extendSprite("Tile", "cloud5", {collision: false}, {idle: {sequences: [610]}});
+
+  extendSprite("Tile", "cloud6", {collision: false}, {idle: {sequences: [611]}});
+
+  extendSprite("Tile", "cloud-happy4", {collision: false}, {idle: {sequences: [614]}});
+
+  extendSprite("Tile", "cloud-happy5", {collision: false}, {idle: {sequences: [615]}});
+
+  extendSprite("Tile", "cloud-happy6", {collision: false}, {idle: {sequences: [616]}});
+
+  extendSprite("Tile", "flag-pole2", {collision: false}, {idle: {sequences: [335]}});
+
+  extendSprite("Tile", "tube1-out", {collision: true}, {idle: {sequences: [292]}});
+  
+  extendSprite("Tile", "tube2-out", {collision: true}, {idle: {sequences: [293]}});
+  
+  extendSprite("Tile", "tube3-out", {collision: true}, {idle: {sequences: [294]}});
+
+  extendSprite("Tile", "tube1-out-mirror", {collision: true}, {idle: {sequences: [234]}});
+  
+  extendSprite("Tile", "tube2-out-mirror", {collision: true}, {idle: {sequences: [235]}});
+  
+  extendSprite("Tile", "tube3-out-mirror", {collision: true}, {idle: {sequences: [236]}});
+
+  extendSprite("Tile", "tube1-out-ug", {collision: true}, {idle: {sequences: [408]}});
+  
+  extendSprite("Tile", "tube2-out-ug", {collision: true}, {idle: {sequences: [409]}});
+  
+  extendSprite("Tile", "tube3-out-ug", {collision: true}, {idle: {sequences: [410]}});
+
+  extendSprite("Tile", "brick7-castle", {collision: true}, {idle: {sequences: [42]}});
+
+  extendSprite("Tile", "bush7", {collision: false}, {idle: {sequences: [272]}});
+
+  extendSprite("Tile", "bush8", {collision: false}, {idle: {sequences: [273]}});
+
+  extendSprite("Tile", "bush9", {collision: false}, {idle: {sequences: [274]}});
+
+  extendSprite("Tile", "water1", {collision: false}, {idle: {sequences: [583]}});
+
+  extendSprite("Tile", "water2", {collision: false}, {idle: {sequences: [612]}});
+
+  extendSprite("Tile", "water-bridge", {collision: true}, {idle: {sequences: [32]}});
+
+  extendSprite("Tile", "lava1", {collision: false}, {idle: {sequences: [699]}});
+
+  extendSprite("Tile", "lava2", {collision: false}, {idle: {sequences: [728]}});
+
+  extendSprite("Tile", "lava-bridge", {collision: true}, {idle: {sequences: [148]}});
+
+  extendSprite("Tile", "tube4-out", {collision: true}, {idle: {sequences: [321]}});
+  
+  extendSprite("Tile", "tube5-out", {collision: true}, {idle: {sequences: [322]}});
+  
+  extendSprite("Tile", "tube6-out", {collision: true}, {idle: {sequences: [323]}});
+
+  extendSprite("Tile", "tube4-out-mirror", {collision: true}, {idle: {sequences: [263]}});
+  
+  extendSprite("Tile", "tube5-out-mirror", {collision: true}, {idle: {sequences: [264]}});
+  
+  extendSprite("Tile", "tube6-out-mirror", {collision: true}, {idle: {sequences: [265]}});
+
+  extendSprite("Tile", "tube4-out-ug", {collision: true}, {idle: {sequences: [437]}});
+  
+  extendSprite("Tile", "tube5-out-ug", {collision: true}, {idle: {sequences: [438]}});
+  
+  extendSprite("Tile", "tube6-out-ug", {collision: true}, {idle: {sequences: [439]}});
+
+  extendSprite("Tile", "brick-castle", {collision: true}, {idle: {sequences: [11]}});
+
+  extendSprite("Tile", "brick2-castle", {collision: true}, {idle: {sequences: [12]}});
+
+  extendSprite("Tile", "brick3-castle", {collision: true}, {idle: {sequences: [13]}});
+
+  extendSprite("Tile", "brick4-castle", {collision: true}, {idle: {sequences: [14]}});
+
+  extendSprite("Tile", "brick5-castle", {collision: true}, {idle: {sequences: [40]}});
+
+  extendSprite("Tile", "brick6-castle", {collision: true}, {idle: {sequences: [41]}});
+
+  extendSprite("Tile", "railing", {collision: false}, {idle: {sequences: [363]}});
+
+  extendSprite("Tile", "platform1", {collision: true}, {idle: {sequences: [237]}});
+  
+  extendSprite("Tile", "platform2", {collision: true}, {idle: {sequences: [238]}});
+  
+  extendSprite("Tile", "platform3", {collision: true}, {idle: {sequences: [239]}});
+  
+  extendSprite("Tile", "platform-pole", {collision: false}, {idle: {sequences: [208]}});
+
+
+  // Subclass Sprite to use a global timer - so all animated
+  // sprites animate in sync.
+  Backbone.AnimatedTile = Backbone.Tile.extend({
+    initialize: function(attributes, options) {
+      Backbone.Tile.prototype.initialize.apply(this, arguments);
+      this.on("attach", this.onAttach, this);
+      this.on("detach", this.onDetach, this);
+    },
+    onAttach: function() {
+      if (!this.engine) return;
+      this.onDetach();
+
+      this.clock = this.engine.sprites.findWhere({name: "animatedTileClock"});
+
+      if (!this.clock)
+        this.clock = this.engine.add(new Backbone.Clock({name: "animatedTileClock", delay: 200}));
+
+      this.listenTo(this.clock, "change:ticks", this.updateAnimationIndex);
+    },
+    onDetach: function() {
+      if (this.clock) this.stopListening(this.clock);
+      this.clock = undefined;
+    },
+    update: function(dt) {
+      return true;
+    },
+    updateAnimationIndex: function() {
+      var animation = this.getAnimation(),
+          sequenceIndex = this.get("sequenceIndex") || 0;
+      if (!animation) return;
+      this.set("sequenceIndex", sequenceIndex < animation.sequences.length-1 ? sequenceIndex + 1 : 0);
+    }
+  });
+
+  Backbone.Brick = Backbone.AnimatedTile.extend({
+    defaults: _.extend({}, Backbone.Tile.prototype.defaults, {
+      name: "brick",
+      state: "idle",
+      collision: true,
+      static: false
+    }),
+    animations: {
+      idle: {
+        sequences: [2]
+      },
+      bounce: {
+        sequences: [
+          {frame: 2, x: 0, y: -8},
+          {frame: 2, x: 0, y: -8},
+          {frame: 2, x: 0, y: -4},
+          {frame: 2, x: 0, y: 0}
+        ],
+        delay: 50
+      }
+    },
+    initialize: function(attributes, options) {
+      Backbone.AnimatedTile.prototype.initialize.apply(this, arguments);
+      this.on("hit", this.hit, this);
+    },
+    hit: function(sprite, dir, dir2) {
+      if (sprite.get("hero") && dir == "bottom") {
+        var tile = this;
+        this.set({state: "bounce", sequenceIndex: 0});
+        this.world.setTimeout(function() {
+          tile.set({state: "idle"});
+        }, 200);
+      } else if (dir == "top") {
+        sprite.trigger("hit", this, "bottom");
+      }
+
+      return this;
+    }
+  });
+
+  var NewTile = extendSprite("Brick", "brick-top");
+  animations = NewTile.prototype.animations;
+  animations.idle.sequences = [1];
+  _.each(animations.bounce.sequences, function(sequence) {sequence.frame  = 1;});
+
+  NewTile = extendSprite("Brick", "brick-ug");
+  animations = NewTile.prototype.animations;
+  animations.idle.sequences = [118];
+  _.each(animations.bounce.sequences, function(sequence) {sequence.frame  = 118;});
+
+  NewTile = extendSprite("Brick", "brick-top-ug");
+  animations = NewTile.prototype.animations;
+  animations.idle.sequences = [117];
+  _.each(animations.bounce.sequences, function(sequence) {sequence.frame  = 117;});
+
+
+  Backbone.QuestionBlock = Backbone.AnimatedTile.extend({
+    defaults: _.extend({}, Backbone.Tile.prototype.defaults, {
+      name: "question-block",
+      state: "idle",
+      collision: true,
+      static: false
+    }),
+    animations: {
+      idle: {
+        sequences: [23, 23, 24, 25, 24, 23],
+        delay: 150
+      },
+      bounce: {
+        sequences: [
+          {frame: 3, x: 0, y: -8},
+          {frame: 3, x: 0, y: -8},
+          {frame: 3, x: 0, y: -4},
+          {frame: 3, x: 0, y: 0}
+        ],
+        delay: 50
+      },
+      empty: {
+        sequences: [3]
+      }
+    },
+    initialize: function(attributes, options) {
+      Backbone.AnimatedTile.prototype.initialize.apply(this, arguments);
+      this.on("hit", this.hit, this);
+    },
+    hit: function(sprite, dir, dir2) {
+      if (!sprite || !sprite.get("hero") || dir != "bottom") return;
+      if (this.get("state") != "idle") return;
+
+      var tile = this;
+      this.set({state: "bounce", sequenceIndex: 0});
+
+      if (this.world)
+        this.world.add(new Backbone.FlyingPennie({
+          x: this.get("x"),
+          y: this.get("y")
+        }));
+
+      setTimeout(function() {
+        tile.set({state: "empty"});
+      }, 200);
+    }
+  });
+
+  NewTile = extendSprite("QuestionBlock", "question-block-ug");
+  animations = NewTile.prototype.animations;
+  animations.idle.sequences = [139, 139, 140, 141, 140, 139];
+  _.each(animations.bounce.sequences, function(sequence) {sequence.frame  = 119;});
+  animations.empty.sequences = [119];
+
+  NewTile = extendSprite("QuestionBlock", "invisible-question-block");
+  animations = NewTile.prototype.animations;
+  animations.idle.sequences = [];
+  _.each(animations.bounce.sequences, function(sequence) {sequence.frame  = 3;});
+  animations.empty.sequences = [3];
+
+  NewTile = extendSprite("QuestionBlock", "invisible-question-block-ug");
+  animations = NewTile.prototype.animations;
+  animations.idle.sequences = [];
+  _.each(animations.bounce.sequences, function(sequence) {sequence.frame  = 119;});
+  animations.empty.sequences = [119];
+
+
+}).call(this);