Update memory-manager-concurrent

games/mario/frog/frog.js

@@ -0,0 +1,145 @@
+(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 velocity = 200,
+      acceleration = 400,
+      jumpVelocity = 550,
+      jumpDeceleration = 1400,
+      jumpHoldDeceleration = 900,
+      fallVelocity = 600,
+      fallAcceleration = 1200;
+
+  Backbone.Frog = Backbone.Hero.extend({
+    defaults: _.extend({}, Backbone.Hero.prototype.defaults, {
+      name: "frog",
+      type: "character",
+      width: 50,
+      height: 60,
+      spriteSheet: "frog",
+      state: "idle-right",
+      velocity: 0,
+      acceleration: 0,
+      yVelocity: 0,
+      yAcceleration: 0
+    }),
+    animations: {
+      "idle-right": {
+        sequences: [1],
+        velocity: 0,
+        acceleration: 0,
+        yVelocity: 0,
+        yAcceleration: 0,
+        scaleX: 1,
+        scaleY: 1
+      },
+      "idle-left": {
+        sequences: [1],
+        velocity: 0,
+        acceleration: 0,
+        yVelocity: 0,
+        yAcceleration: 0,
+        scaleX: -1,
+        scaleY: 1
+      },
+      "jump-right": {
+        sequences: [2],
+        velocity: velocity,
+        acceleration: acceleration,
+        yStartVelocity: -jumpVelocity,
+        yEndVelocity: fallVelocity,
+        yAscentAcceleration: jumpDeceleration,
+        yHoldAscentAcceleration: jumpHoldDeceleration,
+        yDescentAcceleration: fallAcceleration,
+        scaleX: 1,
+        scaleY: 1
+      },
+      "jump-left": {
+        sequences: [2],
+        velocity: -velocity,
+        acceleration: acceleration,
+        yStartVelocity: -jumpVelocity,
+        yEndVelocity: fallVelocity,
+        yAscentAcceleration: jumpDeceleration,
+        yHoldAscentAcceleration: jumpHoldDeceleration,
+        yDescentAcceleration: fallAcceleration,
+        scaleX: -1,
+        scaleY: 1
+      },
+      "dead-left": _.extend({}, Backbone.Hero.prototype.animations["dead-left"], {sequences: [0]}),
+      "dead-right": _.extend({}, Backbone.Hero.prototype.animations["dead-right"], {sequences: [0]})
+    },
+    dirToggled: function(dirIntent) {
+      if (this.ignoreInput()) return this;
+
+      if (dirIntent != "left" && dirIntent != "right")
+        throw "Invalid or missing dirIntent. Must be left or right."
+
+      var cur = this.getStateInfo(),
+          opoIntent = dirIntent == "right" ? "left" : "right",
+          dirPressed = this.input ? this.input[dirIntent+"Pressed"]() : false,
+          opoPressed = this.input ? this.input[opoIntent+"Pressed"]() : false,
+          attrs = {};
+
+      if (dirPressed && cur.mov != "jump") {
+        attrs.state = this.buildState(cur.mov, dirIntent);
+      } else {
+        if (opoPressed) this.dirToggled(opoIntent);
+      }
+
+      if (!_.isEmpty(attrs)) this.set(attrs);
+
+      return this;
+    },
+    // Jump
+    buttonAToggled: function() {
+      if (this.ignoreInput()) return this;
+
+      var state = this.get("state"),
+          cur = this.getStateInfo(),
+          attrs = {};
+
+      if (this.input && this.input.buttonAPressed() && cur.mov != "jump") {
+        attrs.state = this.buildState("jump", cur.dir);
+        attrs.nextState = this.buildState("idle", cur.dir);
+        var jumpAnimation = this.getAnimation(attrs.state);
+        attrs.velocity = jumpAnimation.velocity;
+        attrs.yVelocity = jumpAnimation.yStartVelocity;
+        jumpAnimation.minY = this.get("y") - 200;
+      }
+      if (!_.isEmpty(attrs)) this.set(attrs);
+
+      return this;
+    },
+    // No action
+    buttonBToggled: function() {
+      return this;
+    },
+    onUpdate: function(dt) {
+      var cur = this.getStateInfo(),
+          velocity = this.get("velocity"),
+          attrs = {};
+
+      // Upon landing...
+      if (cur.mov == "idle" && velocity != 0) {
+        // No momentum
+        attrs.velocity = 0;
+        // Turn around
+        if (cur.dir == "left" && this.input && this.input.rightPressed() ||
+            cur.dir == "right" && this.input && this.input.leftPressed())
+          attrs.state = this.buildState(cur.mov, cur.opo);
+      }
+      if (!_.isEmpty(attrs)) this.set(attrs);
+
+      return true;
+    }
+  });
+
+}).call(this);

games/mario/frog/index.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html style="touch-action: none;" nomanifest="offline.appcache">
+    <head>
+        <title>Frog - 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, user-scalable=no"/>
+        <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/input.js" type="text/javascript"></script>
+        <script src="../src/character.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="frog.js" type="text/javascript"></script>
+        <script src="tiles.js" type="text/javascript"></script>
+        <script src="level.js" type="text/javascript"></script>
+        <script src="main.js" type="text/javascript"></script>
+
+        <style>
+            body {
+                margin: 0;
+                background-color: #000;
+            }
+            canvas {
+                position: fixed;
+                top: 0;
+                left: 0;
+            }
+        </style>
+
+    </head>
+
+    <body>
+        <img id="frog" src="frog.png" style="display:none;" />
+        <img id="tiles" src="super-mario-tiles-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>
+    </body>
+
+</html>

games/mario/frog/main.js

@@ -0,0 +1,237 @@
+$(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 = [
+    "land1", "land2", "land3", "land4", "land5", "land6",
+    "mush1", "mush2", "mush3", "mush4", "mush5", "mush6",
+    "water1", "cloud1", "cloud2", "cloud3", "cloud-happy1", "cloud-happy2", "cloud-happy3", 
+    "cloud-small", "ground", "land8", "ground2", "block", "land7", "block2",
+    "cloud-platform1", "cloud-platform2", "cloud-platform3", "cloud-platform4", "cloud-platform5", "cloud-platform6",
+    "water2", "cloud4", "cloud5", "cloud6", "cloud-happy4", "cloud-happy5", "cloud-happy6",
+    "frog", "platform"
+  ];
+
+  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: "frog",
+        img: "#frog",
+        tileWidth: 50,
+        tileHeight: 65,
+        tileColumns: 3,
+        tileRows: 1
+      }, {
+        id: "tiles",
+        img: "#tiles",
+        tileWidth: 32,
+        tileHeight: 32,
+        tileColumns: 29,
+        tileRows: 28
+      }]).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
+      this.world = new Backbone.World(
+        _.extend({viewportBottom: 156}, window._world), {
+        input: this.input,
+        camera: this.camera
+      });
+
+      // 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: 904, 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: 904, 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.camera,
+        this.toggleButton,
+        this.message,
+        this.debugPanel
+      ]));
+
+      // The sprite picker and editor
+      this.editor = new Backbone.WorldEditor({
+        spriteNames: spriteNames,
+        width: 34*20+4
+      }, {
+        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 == "edit" ? "play" : "edit");
+      if (!this.engine.isRunning()) this.engine.start();
+    },
+    onChangeState: function() {
+      var state = this.world.get("state");
+      if (state == "edit") {
+        // 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/frog/tiles.js

@@ -0,0 +1,164 @@
+(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", "land1", {collision: true}, {idle: {sequences: [353]}});
+
+  extendSprite("Tile", "land2", {collision: true}, {idle: {sequences: [354]}});
+
+  extendSprite("Tile", "land3", {collision: true}, {idle: {sequences: [355]}});
+
+  extendSprite("Tile", "land4", {collision: true}, {idle: {sequences: [237]}});
+
+  extendSprite("Tile", "land5", {collision: true}, {idle: {sequences: [238]}});
+
+  extendSprite("Tile", "land6", {collision: true}, {idle: {sequences: [239]}});
+
+  extendSprite("Tile", "land7", {collision: true}, {idle: {sequences: [208]}});
+
+  extendSprite("Tile", "land8", {collision: true}, {idle: {sequences: [34]}});
+
+  extendSprite("Tile", "mush1", {collision: true}, {idle: {sequences: [382]}});
+
+  extendSprite("Tile", "mush2", {collision: true}, {idle: {sequences: [383]}});
+
+  extendSprite("Tile", "mush3", {collision: true}, {idle: {sequences: [384]}});
+
+  extendSprite("Tile", "mush4", {collision: true}, {idle: {sequences: [266]}});
+
+  extendSprite("Tile", "mush5", {collision: true}, {idle: {sequences: [267]}});
+
+  extendSprite("Tile", "mush6", {collision: true}, {idle: {sequences: [268]}});
+
+  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", "cloud-small", {collision: true}, {idle: {sequences: [613]}});
+
+  extendSprite("Tile", "water1", {collision: false}, {idle: {sequences: [583]}});
+
+  extendSprite("Tile", "water2", {collision: false}, {idle: {sequences: [612]}});
+
+  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", "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", "cloud-platform1", {collision: true}, {idle: {sequences: [588]}});
+
+  extendSprite("Tile", "cloud-platform2", {collision: true}, {idle: {sequences: [589]}});
+
+  extendSprite("Tile", "cloud-platform3", {collision: true}, {idle: {sequences: [590]}});
+
+  extendSprite("Tile", "cloud-platform4", {collision: true}, {idle: {sequences: [704]}});
+
+  extendSprite("Tile", "cloud-platform5", {collision: true}, {idle: {sequences: [705]}});
+
+  extendSprite("Tile", "cloud-platform6", {collision: true}, {idle: {sequences: [706]}});
+
+  Backbone.Platform = Backbone.Character.extend({
+    defaults: {
+      type: "character",
+      name: "platform",
+      width: 96,
+      height: 32,
+      spriteSheet: "tiles",
+      tileX: 256,
+      tileY: 640,
+      state: "idle",
+      static: false,
+      collision: true
+    },
+    initialize: function(attributes, options) {
+      options || (options = {});
+      this.world = options.world;
+    },
+    update: function(dt) {
+      return true;
+    },
+    draw: function(context, options) {
+      options || (options = {});
+
+      var x = this.get("x") + (options.offsetX || 0),
+          y = this.get("y") + (options.offsetY || 0),
+          tileX = this.get("tileX"),
+          tileY = this.get("tileY"),
+          tileWidth = this.get("width"),
+          tileHeight = this.get("height");
+
+      context.drawImage(
+        this.spriteSheet.img,
+        tileX, tileY, tileWidth, tileHeight,
+        Math.round(x), Math.round(y), tileWidth, tileHeight
+      );
+
+      return this;
+    }
+  });
+
+}).call(this);