|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/phaser/2.0.3/phaser.min.js"></script> |
|
<body> |
|
<div id="game" style="overflow: hidden;"></div> |
|
<script> |
|
/* |
|
A GAME MECHANIC EXPLORER DEMO |
|
http://gamemechanicexplorer.com/#thrust-1 |
|
*/ |
|
var GameState = function(game) {}; |
|
|
|
// Load images and sounds |
|
GameState.prototype.preload = function() { |
|
this.game.load.spritesheet('ship', 'ship.png', 32, 32); |
|
}; |
|
|
|
// 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 |
|
|
|
// Add the ship to the stage |
|
this.ship = this.game.add.sprite(this.game.width/2, this.game.height/2, '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 |
|
|
|
// 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' } |
|
); |
|
}; |
|
|
|
// 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'); |
|
} |
|
|
|
// 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.ship.y > this.game.height) this.ship.y = 0; |
|
if (this.ship.y < 0) this.ship.y = this.game.height; |
|
|
|
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; |
|
} |
|
|
|
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> |