rework comments
This commit is contained in:
		
							parent
							
								
									b44efcb65b
								
							
						
					
					
						commit
						5ae5c8fbb6
					
				
					 1 changed files with 14 additions and 88 deletions
				
			
		
							
								
								
									
										100
									
								
								platformer.js
									
										
									
									
									
								
							
							
						
						
									
										100
									
								
								platformer.js
									
										
									
									
									
								
							| 
						 | 
				
			
			@ -1,54 +1,36 @@
 | 
			
		|||
// heavily based on the Quintus platformer example.
 | 
			
		||||
// heavily based/copied from/on the quintus platformer example.
 | 
			
		||||
// vim:tw=120:
 | 
			
		||||
 | 
			
		||||
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({ development: true })
 | 
			
		||||
        .include("Sprites, Scenes, Input, 2D, Anim, Touch, UI")
 | 
			
		||||
        // Maximize this game to whatever the size of the browser is
 | 
			
		||||
        .setup({ maximize: true })
 | 
			
		||||
        // And turn on default input controls and touch input (for UI)
 | 
			
		||||
        .controls().touch()
 | 
			
		||||
 | 
			
		||||
// ## 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: "astronaut",  // Setting a sprite sheet sets sprite width and height
 | 
			
		||||
      x: 320,           // You can also set additional properties that can
 | 
			
		||||
      y: 90             // be overridden on object creation
 | 
			
		||||
      sheet: "astronaut",
 | 
			
		||||
      x: 320,
 | 
			
		||||
      y: 90
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // 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 rocket, you win!
 | 
			
		||||
      if(collision.obj.isA("Rocket")) {
 | 
			
		||||
        var rocket = collision.obj;
 | 
			
		||||
 | 
			
		||||
        // the rocket flies away
 | 
			
		||||
        var rocket = collision.obj;
 | 
			
		||||
        rocket.add("tween");
 | 
			
		||||
        rocket.animate({ x: 100, y: -500, angle: 360 });
 | 
			
		||||
 | 
			
		||||
        // the player disappears
 | 
			
		||||
        this.destroy();
 | 
			
		||||
 | 
			
		||||
        // and the invite is displayed
 | 
			
		||||
        $("#einladung").show("slow");
 | 
			
		||||
      }
 | 
			
		||||
    });
 | 
			
		||||
| 
						 | 
				
			
			@ -64,18 +46,11 @@ Q.Sprite.extend("Rocket", {
 | 
			
		|||
  }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// ## Enemy Sprite
 | 
			
		||||
// Create the Enemy class to add in some baddies
 | 
			
		||||
Q.Sprite.extend("Neingeist",{
 | 
			
		||||
  init: function(p) {
 | 
			
		||||
    this._super(p, { sheet: 'neingeist', 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,
 | 
			
		||||
    // end the game unless the enemy is hit on top
 | 
			
		||||
    this.on("bump.left,bump.right,bump.bottom",function(collision) {
 | 
			
		||||
      if(collision.obj.isA("Player")) {
 | 
			
		||||
        Q.stageScene("endGame", 1);
 | 
			
		||||
| 
						 | 
				
			
			@ -83,8 +58,6 @@ Q.Sprite.extend("Neingeist",{
 | 
			
		|||
      }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // If the enemy gets hit on the top, destroy it
 | 
			
		||||
    // and give the user a "hop"
 | 
			
		||||
    this.on("bump.top",function(collision) {
 | 
			
		||||
      if(collision.obj.isA("Player")) {
 | 
			
		||||
        this.destroy();
 | 
			
		||||
| 
						 | 
				
			
			@ -95,18 +68,11 @@ Q.Sprite.extend("Neingeist",{
 | 
			
		|||
});
 | 
			
		||||
 | 
			
		||||
// FIXME do not copy
 | 
			
		||||
// ## Enemy Sprite
 | 
			
		||||
// Create the Enemy class to add in some baddies
 | 
			
		||||
Q.Sprite.extend("Starbug",{
 | 
			
		||||
  init: function(p) {
 | 
			
		||||
    this._super(p, { sheet: 'starbug', 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,
 | 
			
		||||
    // end the game unless the enemy is hit on top
 | 
			
		||||
    this.on("bump.left,bump.right,bump.bottom",function(collision) {
 | 
			
		||||
      if(collision.obj.isA("Player")) {
 | 
			
		||||
        Q.stageScene("endGame", 1);
 | 
			
		||||
| 
						 | 
				
			
			@ -114,8 +80,6 @@ Q.Sprite.extend("Starbug",{
 | 
			
		|||
      }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // If the enemy gets hit on the top, destroy it
 | 
			
		||||
    // and give the user a "hop"
 | 
			
		||||
    this.on("bump.top",function(collision) {
 | 
			
		||||
      if(collision.obj.isA("Player")) {
 | 
			
		||||
        this.destroy();
 | 
			
		||||
| 
						 | 
				
			
			@ -126,18 +90,12 @@ Q.Sprite.extend("Starbug",{
 | 
			
		|||
});
 | 
			
		||||
 | 
			
		||||
// FIXME do not copy
 | 
			
		||||
// ## Enemy Sprite
 | 
			
		||||
// Create the Enemy class to add in some baddies
 | 
			
		||||
Q.Sprite.extend("Martin",{
 | 
			
		||||
  init: function(p) {
 | 
			
		||||
    this._super(p, { sheet: 'martin', 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,
 | 
			
		||||
    // end the game unless the enemy is hit on top
 | 
			
		||||
    this.on("bump.left,bump.right,bump.bottom",function(collision) {
 | 
			
		||||
      if(collision.obj.isA("Player")) {
 | 
			
		||||
        Q.stageScene("endGame", 1);
 | 
			
		||||
| 
						 | 
				
			
			@ -145,8 +103,6 @@ Q.Sprite.extend("Martin",{
 | 
			
		|||
      }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // If the enemy gets hit on the top, destroy it
 | 
			
		||||
    // and give the user a "hop"
 | 
			
		||||
    this.on("bump.top",function(collision) {
 | 
			
		||||
      if(collision.obj.isA("Player")) {
 | 
			
		||||
        this.destroy();
 | 
			
		||||
| 
						 | 
				
			
			@ -156,14 +112,10 @@ Q.Sprite.extend("Martin",{
 | 
			
		|||
  }
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// ## Level1 scene
 | 
			
		||||
// Create a new scene called level 1
 | 
			
		||||
Q.scene("level1", function(stage) {
 | 
			
		||||
 | 
			
		||||
  // Add in a repeater for a little parallax action
 | 
			
		||||
  stage.insert(new Q.Repeater({ asset: "background.png", speedX: 0.5, speedY: 0.5 }));
 | 
			
		||||
 | 
			
		||||
  // Add in a tile layer, and make it the collision layer
 | 
			
		||||
  stage.collisionLayer(new Q.TileLayer({
 | 
			
		||||
                             tileW: 24,
 | 
			
		||||
                             tileH: 24,
 | 
			
		||||
| 
						 | 
				
			
			@ -171,15 +123,14 @@ Q.scene("level1",function(stage) {
 | 
			
		|||
                             sheet:     'tiles' }));
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  // Create the player and add them to the stage
 | 
			
		||||
  // player
 | 
			
		||||
  var player = stage.insert(new Q.Player());
 | 
			
		||||
 | 
			
		||||
  // Give the stage a moveable viewport and tell it
 | 
			
		||||
  // to follow the player.
 | 
			
		||||
  // viewport
 | 
			
		||||
  stage.add("viewport").follow(player);
 | 
			
		||||
  stage.viewport.scale = 2;
 | 
			
		||||
 | 
			
		||||
  // Add in a couple of enemies
 | 
			
		||||
  // enemies
 | 
			
		||||
  stage.insert(new Q.Starbug({ x: 600, y: 0 }));
 | 
			
		||||
  stage.insert(new Q.Neingeist({ x: 650, y: 0 }));
 | 
			
		||||
  stage.insert(new Q.Martin({ x: 550, y: 0 }));
 | 
			
		||||
| 
						 | 
				
			
			@ -187,52 +138,27 @@ Q.scene("level1",function(stage) {
 | 
			
		|||
  stage.insert(new Q.Rocket({ x: 146, y: 32 }));
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// To display a game over / game won popup box,
 | 
			
		||||
// create a endGame scene
 | 
			
		||||
Q.scene('endGame',function(stage) {
 | 
			
		||||
  var container = stage.insert(new Q.UI.Container({
 | 
			
		||||
    x: Q.width/2, y: Q.height/2, fill: "rgba(0,0,0,0.5)"
 | 
			
		||||
  }));
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  var button = container.insert(new Q.UI.Button({ x: 0, y: 0, fill: "#CCCCCC",
 | 
			
		||||
                                                  label: "NOCHMAL" }))
 | 
			
		||||
  // When the button is clicked, clear all the stages
 | 
			
		||||
  // and restart the game.
 | 
			
		||||
 | 
			
		||||
  button.on("click",function() {
 | 
			
		||||
    Q.clearStages();
 | 
			
		||||
    Q.stageScene('level1');
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  // Expand the container to visibily fit it's contents
 | 
			
		||||
  // (with a padding)
 | 
			
		||||
  container.fit(16);
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// ## 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, background.png", function() {
 | 
			
		||||
  // Sprites sheets can be created manually
 | 
			
		||||
  Q.sheet("tiles","tiles.png", { tilew: 24, tileh: 24 });
 | 
			
		||||
 | 
			
		||||
  // 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. Modify level.json to change the level around and add in some more enemies.
 | 
			
		||||
// 2. Add in a second level by creating a level2.json and a level2 scene that gets
 | 
			
		||||
//    loaded after level 1 is complete.
 | 
			
		||||
// 3. Add in a title screen
 | 
			
		||||
// 4. Add in a hud and points for jumping on enemies.
 | 
			
		||||
// 5. Add in a `Repeater` behind the TileLayer to create a paralax scrolling effect.
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Reference in a new issue