|
|
|
@ -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) {
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|