<!
DOCTYP
E html>
<meta charset="utf-8">
<script
src="http://cdnjs.cloudflare.com/ajax/libs/phaser/2.0.3/phaser.min.js"></s
cript>
<body>
<div id="game" style="overflow: hidden;"></div>
<script>
/*
A GAME MECHANIC EXPLORER DEMO
http://gamemechanicexplorer.com/#thrust-4
*/
var GameState = function(game) {
};
// Load images and sounds
GameState.prototype.preload = function() {
this.game.load.spritesheet('ship', 'ship.png', 32, 32);
this.game.load.image('ground', 'ground.png');
this.game.load.spritesheet('explosion', 'explosion.png', 128, 128);
};
// Setup the example
GameState.prototype.create = function() {
// Set stage background color
this.game.stage.backgroundColor = 0x333333;
// Define motion constants
this.ROTATION_SPEED = 180; // degrees/second
this.ACCELERATION = 200; // pixels/second/second
this.MAX_SPEED = 250; // pixels/second
this.DRAG = 0; // pixels/second
this.GRAVITY = 50; // pixels/second/second
// Add the ship to the stage
this.ship = this.game.add.sprite(0, 0, 'ship');
this.ship.anchor.setTo(0.5, 0.5);
this.ship.angle = -90; // Point the ship up
// Enable physics on the ship
this.game.physics.enable(this.ship, Phaser.Physics.ARCADE);
// Set maximum velocity
this.ship.body.maxVelocity.setTo(this.MAX_SPEED, this.MAX_SPEED); //
x, y
// Add drag to the ship that slows it down when it is not
accelerating
this.ship.body.drag.setTo(this.DRAG, this.DRAG); // x, y
// Choose a random starting angle and velocity for the ship
this.resetShip();
// Turn on gravity
game.physics.arcade.gravity.y = this.GRAVITY;
// Make ship bounce a little
this.ship.body.bounce.setTo(0.25, 0.25);
// Create some ground for the ship to land on
this.ground = this.game.add.group();
for(var x = 0; x < this.game.width; x += 32) {
// Add the ground blocks, enable physics on each, make them
immovable
var groundBlock = this.game.add.sprite(x, this.game.height - 32,
'ground');
this.game.physics.enable(groundBlock, Phaser.Physics.ARCADE);
groundBlock.body.immovable = true;
groundBlock.body.allowGravity = false;
this.ground.add(groundBlock);
}
// Create a group for explosions
this.explosionGroup = this.game.add.group();
// Capture certain keys to prevent their default actions in the
browser.
// This is only necessary because this is an HTML5 game. Games on
other
// platforms may not need code like this.
this.game.input.keyboard.addKeyCapture([
Phaser.Keyboard.LEFT,
Phaser.Keyboard.RIGHT,
Phaser.Keyboard.UP,
Phaser.Keyboard.DOWN
]);
// Show FPS
this.game.time.advancedTiming = true;
this.fpsText = this.game.add.text(
20, 20, '', { font: '16px Arial', fill: '#ffffff' }
);
};
// Try to get a used explosion from the explosionGroup.
// If an explosion isn't available, create a new one and add it to the
group.
// Setup new explosions so that they animate and kill themselves when
the
// animation is complete.
GameState.prototype.getExplosion = function(x, y) {
// Get the first dead explosion from the explosionGroup
var explosion = this.explosionGroup.getFirstDead();
// If there aren't any available, create a new one
if (explosion === null) {
explosion = this.game.add.sprite(0, 0, 'explosion');
explosion.anchor.setTo(0.5, 0.5);
// Add an animation for the explosion that kills the sprite when
the
// animation is complete
var animation = explosion.animations.add('boom', [0,1,2,3], 60,
false);
animation.killOnComplete = true;
// Add the explosion sprite to the group
this.explosionGroup.add(explosion);
}
// Revive the explosion (set it's alive property to true)
// You can also define a onRevived event handler in your explosion
objects
// to do stuff when they are revived.
explosion.revive();
// Move the explosion to the given coordinates
explosion.x = x;
explosion.y = y;
// Set rotation of the explosion at random for a little variety
explosion.angle = this.game.rnd.integerInRange(0, 360);
// Play the animation
explosion.animations.play('boom');
// Return the explosion itself in case we want to do anything else
with it
return explosion;
};
GameState.prototype.resetShip = function() {
// Move the ship back to the top of the stage
this.ship.x = 32;
this.ship.y = 32;
this.ship.body.acceleration.setTo(0, 0);
// Select a random starting angle and velocity
this.ship.angle = this.game.rnd.integerInRange(-180, 180);
this.ship.body.velocity.setTo(this.game.rnd.integerInRange(100,
200), 0);
};
// The update() method is called every frame
GameState.prototype.update = function() {
if (this.game.time.fps !== 0) {
this.fpsText.setText(this.game.time.fps + ' FPS');
}
// Collide the ship with the ground
this.game.physics.arcade.collide(this.ship, this.ground);
// Keep the ship on the screen
if (this.ship.x > this.game.width) this.ship.x = 0;
if (this.ship.x < 0) this.ship.x = this.game.width;
if (this.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
// If the LEFT key is down, rotate left
this.ship.body.angularVelocity = -this.ROTATION_SPEED;
} else if (this.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
// If the RIGHT key is down, rotate right
this.ship.body.angularVelocity = this.ROTATION_SPEED;
} else {
// Stop rotating
this.ship.body.angularVelocity = 0;
}
// Set a variable that is true when the ship is touching the ground
var onTheGround = this.ship.body.touching.down;
if (onTheGround) {
if (Math.abs(this.ship.body.velocity.y) > 20 ||
Math.abs(this.ship.body.velocity.x) > 30) {
// The ship hit the ground too hard.
// Blow it up and start the game over.
this.getExplosion(this.ship.x, this.ship.y);
this.resetShip();
} else {
// We've landed!
// Stop rotating and moving and aim the ship up.
this.ship.body.angularVelocity = 0;
this.ship.body.velocity.setTo(0, 0);
this.ship.angle = -90;
}
if (this.input.keyboard.isDown(Phaser.Keyboard.UP)) {
// If the UP key is down, thrust
// Calculate acceleration vector based on this.angle and
this.ACCELERATION
this.ship.body.acceleration.x = Math.cos(this.ship.rotation) *
this.ACCELERATION;
this.ship.body.acceleration.y = Math.sin(this.ship.rotation) *
this.ACCELERATION;
// Show the frame from the spritesheet with the engine on
this.ship.frame = 1;
} else {
// Otherwise, stop thrusting
this.ship.body.acceleration.setTo(0, 0);
// Show the frame from the spritesheet with the engine off
this.ship.frame = 0;
}
};
var game = new Phaser.Game(960, 500, Phaser.AUTO, 'game');
game.state.add('game', GameState, true);
window.focus();
</script>
