topical media & game development

talk show tell print

mobile-game-present-platformer-platformer.js / js



  // # Quintus platformer example
  //
  // [Run the example](../examples/platformer/index.html)
  // WARNING: this game must be run from a non-file:// url
  // as it loads a level json file.
  //
  // This is the example from the website homepage, it consists
  // a simple, non-animated platformer with some enemies and a 
  // target for the player.
  window.addEventListener("load",function() {
  
  // Set up an instance of the Quintus engine  and include
  // the Sprites, Scenes, Input and 2D module. The 2D module
  // includes the `TileLayer` class as well as the `2d` componet.
  var Q = window.Q = Quintus()
          .include("Sprites, Scenes, Input, 2D")
          // Maximize this game to whatever the size of the browser is
          .setup({ width: 630, height: 350})
          // And turn on default input controls
          .controls();
  
  // ## Player Sprite
  // The very basic player sprite, this is just a normal sprite
  // using the player sprite sheet with default controls added to it.
  Q.Sprite.extend("Player",{
  
    // the init constructor is called on creation
    init: function(p) {
  
      // You can call the parent's constructor with this._super(..)
      this._super(p, {
        sheet: "player",  // Setting a sprite sheet sets sprite width and height
        x: 390,           // You can also set additional properties that can
        y: 90,            // be overridden on object creation
      });
  
      // Add in pre-made components to get up and running quickly
      // The `2d` component adds in default 2d collision detection
      // and kinetics (velocity, gravity)
      // The `platformerControls` makes the player controllable by the
      // default input actions (left, right to move,  up or action to jump)
      // It also checks to make sure the player is on a horizontal surface before
      // letting them jump.
      this.add('2d, platformerControls');
  
      // Write event handlers to respond hook into behaviors.
      // hit.sprite is called everytime the player collides with a sprite
      this.on("hit.sprite",function(collision) {
  
        // Check the collision, if it's the Tower, you win!
        if(collision.obj.isA("Tower")) {
          alert("You Win!");
          Q.stageScene("level1");
        }
      });
  
    }
  
  });
  
  // ## Tower Sprite
  // Sprites can be simple, the Tower sprite just sets a custom sprite sheet
  Q.Sprite.extend("Tower", {
    init: function(p) {
      this._super(p, { sheet: 'tower' });
    }
  });
  
  // ## Enemy Sprite
  // Create the Enemy class to add in some baddies
  Q.Sprite.extend("Enemy",{
    init: function(p) {
      this._super(p, { sheet: 'enemy', vx: 100 });
  
      // Enemies use the Bounce AI to change direction 
      // whenver they run into something.
      this.add('2d, aiBounce');
  
      // Listen for a sprite collision, if it's the player,
      // restart the level
      this.on("hit.sprite",function(collision) {
        if(collision.obj.isA("Player")) { 
          Q.stageScene("level1"); 
        }
      });
    }
  });
  
  // ## Level1 scene
  // Create a new scene called level 1
  Q.scene("level1",function(stage) {
  
    // Add in a tile layer, and make it the collision layer
    stage.collisionLayer(new Q.TileLayer({
                               dataAsset: 'level.json',
                               sheet:     'tiles' }));
  
    // Create the player and add them to the stage
    var player = stage.insert(new Q.Player());
  
    // Give the stage a moveable viewport and tell it
    // to follow the player.
    stage.add("viewport").follow(player);
  
    // Add in a couple of enemies
    stage.insert(new Q.Enemy({ x: 700, y: 0 }));
    stage.insert(new Q.Enemy({ x: 800, y: 00 }));
  
    // Finally add in the tower goal
    stage.insert(new Q.Tower({ x: 180, y: 35 }));
  });
  
  // ## Asset Loading and Game Launch
  // Q.load can be called at any time to load additional assets
  // assets that are already loaded will be skipped
  // The callback will be triggered when everything is loaded
  Q.load("sprites.png, sprites.json, level.json, tiles.png", function() {
    // Sprites sheets can be created manually
    Q.sheet("tiles","tiles.png", { tilew: 32, tileh: 32 });
  
    // Or from a .json asset that defines sprite locations
    Q.compileSheets("sprites.png","sprites.json");
  
    // Finally, call stageScene to run the game
    Q.stageScene("level1");
  });
  
  // ## Possible Experimentations:
  // 
  // The are lots of things to try out here.
  // 
  // 1. Make the player able to squash the enemies by adding in listener to bump.bottom.
  //    The following code in the player's init method should do the trick:
  //
  //          this.on("bump.bottom",function(collision) {
  //            if(collision.obj.isA("Enemy")) {
  //              this.p.vy = -300;
  //              collision.obj.destroy();
  //            }
  //          });
  //
  // 2. Modify level.json to change the level around and add in some more enemies.
  // 3. Add in a second level by creating a level2.json and a level2 scene that gets
  //    loaded after level 1 is complete.
  // 4. Add in a title screen
  // 5. Add in points for jumping on enemies.
  // 6. Add in a `Repeater` behind the TileLayer to create a paralax scrolling effect.
  
  });
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.