mirror of
https://github.com/photonstorm/phaser
synced 2024-11-27 15:12:18 +00:00
329 lines
No EOL
7.4 KiB
HTML
329 lines
No EOL
7.4 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Creating a game in Phaser, part 2</title>
|
|
<style>
|
|
body {
|
|
background-color: #000;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<script src="phaser.js"></script>
|
|
<script src="../../../filters/ColorBars.js" type="text/javascript"></script>
|
|
<script src="../../../filters/BinarySerpents.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="gameContainer"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var game = new Phaser.Game(1024, 672, Phaser.AUTO, 'gameContainer', { preload: preload, create: create, update: update });
|
|
|
|
var filter;
|
|
|
|
var sky;
|
|
var land;
|
|
var logo;
|
|
|
|
var player;
|
|
var bullets;
|
|
var aliens;
|
|
var explosions;
|
|
|
|
var started = false;
|
|
var alienSpeed = 200;
|
|
var alienReleaseRate = 1000;
|
|
var alienReleaseQuantity = 3;
|
|
|
|
var scrollSpeed = 8;
|
|
var alienTimer = 0;
|
|
var bulletTime = 0;
|
|
|
|
var cursors;
|
|
var fireButton;
|
|
var score = 0;
|
|
var text;
|
|
|
|
var music; // note: music by teque of aggression from the Atari STE version of Stardust
|
|
var sfxLazer;
|
|
var sfxExplode;
|
|
|
|
function preload () {
|
|
|
|
game.load.image('background', 'images/sky.png');
|
|
game.load.image('land', 'images/landscape.png');
|
|
game.load.image('logo', 'images/logo.png');
|
|
game.load.image('player', 'images/ship.png');
|
|
game.load.image('bullet', 'images/bullet.png');
|
|
game.load.spritesheet('kaboom', 'images/explode.png', 128, 128);
|
|
game.load.spritesheet('alien', 'images/invader32x32x4.png', 32, 32);
|
|
game.load.bitmapFont('robofont', 'images/robofont.png', 'images/robofont.xml');
|
|
|
|
game.load.audio('music', [ 'audio/title.mp3']);
|
|
game.load.audio('sfxLazer', [ 'audio/shot.wav']);
|
|
game.load.audio('sfxExplode', [ 'audio/explode.wav']);
|
|
|
|
}
|
|
|
|
function create () {
|
|
|
|
game.world.setBounds(-64, 0, 1300, 672);
|
|
|
|
sfxLazer = game.add.audio('sfxLazer', 0.1, false);
|
|
sfxExplode = game.add.audio('sfxExplode', 0.5, false);
|
|
|
|
music = game.add.audio('music');
|
|
|
|
sky = game.add.sprite(0, 0, 'background');
|
|
|
|
var t = game.add.sprite(0, 0);
|
|
t.width = 1024;
|
|
t.height = 672;
|
|
filter = game.add.filter('BinarySerpents', 1024, 672);
|
|
// filter.alpha = 0.0;
|
|
t.filters = [filter];
|
|
|
|
land = game.add.tileSprite(0, 544, 1024, 128, 'land');
|
|
|
|
bullets = game.add.group();
|
|
bullets.createMultiple(30, 'bullet');
|
|
bullets.setAll('outOfBoundsKill', true);
|
|
|
|
// The aliens
|
|
aliens = game.add.group();
|
|
aliens.createMultiple(50, 'alien');
|
|
aliens.setAll('outOfBoundsKill', true);
|
|
aliens.callAll('animations.add', 'animations', 'fly', [ 0, 1, 2, 3 ], 20, true);
|
|
|
|
player = game.add.sprite(64, 256, 'player');
|
|
player.body.collideWorldBounds = true;
|
|
player.visible = false;
|
|
|
|
// An explosion pool
|
|
explosions = game.add.group();
|
|
explosions.createMultiple(30, 'kaboom');
|
|
explosions.callAll('animations.add', 'animations', 'kaboom');
|
|
explosions.setAll('anchor.x', 0.5);
|
|
explosions.setAll('anchor.y', 0.5);
|
|
|
|
text = game.add.bitmapText(8, 8, 'click to start', { font: '16px AtomicRoboKid' });
|
|
text.alpha = 0.9;
|
|
|
|
logo = game.add.sprite(0, 24, 'logo');
|
|
|
|
// And some controls to play the game with
|
|
cursors = game.input.keyboard.createCursorKeys();
|
|
fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
|
|
|
|
sky.alpha = 0;
|
|
land.alpha = 0;
|
|
logo.alpha = 0;
|
|
|
|
showTitle();
|
|
|
|
}
|
|
|
|
function showTitle () {
|
|
|
|
game.input.onUp.add(hideTitle, this);
|
|
|
|
game.add.tween(logo).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true);
|
|
game.add.tween(sky).to( { alpha: 1 }, 3000, Phaser.Easing.Linear.None, true);
|
|
game.add.tween(land).to( { alpha: 1 }, 1000, Phaser.Easing.Linear.None, true);
|
|
|
|
logo.visible = true;
|
|
|
|
started = false;
|
|
|
|
music.play('', 0, 1, true);
|
|
|
|
}
|
|
|
|
function hideTitle () {
|
|
|
|
game.input.onUp.remove(hideTitle, this);
|
|
|
|
var tween = game.add.tween(logo).to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
|
|
tween.onComplete.add(hideLogo, this);
|
|
|
|
game.add.tween(sky).to( { alpha: 0.4 }, 2000, Phaser.Easing.Linear.None, true);
|
|
|
|
player.reset(-64, 256);
|
|
player.visible = true;
|
|
|
|
game.add.tween(player).to( { x: 64 }, 1000, Phaser.Easing.Linear.None, true);
|
|
|
|
score = 0;
|
|
text.setText('score: ' + score.toString());
|
|
|
|
alienSpeed = 200;
|
|
alienReleaseRate = 1000;
|
|
alienReleaseQuantity = 3;
|
|
alienTimer = 0;
|
|
bulletTime = 0;
|
|
|
|
started = true;
|
|
|
|
music.stop();
|
|
|
|
}
|
|
|
|
function hideLogo () {
|
|
|
|
logo.visible = false;
|
|
|
|
}
|
|
|
|
function update () {
|
|
|
|
filter.update();
|
|
|
|
land.tilePosition.x -= scrollSpeed;
|
|
|
|
if (started == false)
|
|
{
|
|
return;
|
|
}
|
|
|
|
// Reset the player, then check for movement keys
|
|
player.body.velocity.setTo(0, 0);
|
|
|
|
if (cursors.up.isDown)
|
|
{
|
|
player.body.velocity.y = -400;
|
|
}
|
|
else if (cursors.down.isDown)
|
|
{
|
|
player.body.velocity.y = 400;
|
|
}
|
|
|
|
if (cursors.left.isDown)
|
|
{
|
|
player.body.velocity.x = -400;
|
|
}
|
|
else if (cursors.right.isDown)
|
|
{
|
|
player.body.velocity.x = 400;
|
|
}
|
|
|
|
// Firing?
|
|
if (fireButton.isDown)
|
|
{
|
|
fireBullet();
|
|
}
|
|
|
|
// Release a new alien?
|
|
if (game.time.now > alienTimer)
|
|
{
|
|
releaseAliens();
|
|
}
|
|
|
|
// Run collision
|
|
game.physics.collide(bullets, aliens, collisionHandler, null, this);
|
|
game.physics.collide(aliens, player, alienHitsPlayer, null, this);
|
|
|
|
}
|
|
|
|
function releaseAliens () {
|
|
|
|
for (var i = 0; i < alienReleaseQuantity; i++)
|
|
{
|
|
alien = aliens.getFirstExists(false);
|
|
|
|
if (alien)
|
|
{
|
|
alien.reset(game.rnd.integerInRange(1024, 1200), game.rnd.integerInRange(200, 400));
|
|
alien.body.velocity.x = -alienSpeed;
|
|
alien.body.velocity.y = game.rnd.integerInRange(-100, 100);
|
|
alien.play('fly');
|
|
}
|
|
}
|
|
|
|
alienTimer = game.time.now + alienReleaseRate;
|
|
|
|
}
|
|
|
|
function alienHitsPlayer (alien, player) {
|
|
|
|
alien.kill();
|
|
player.kill();
|
|
|
|
sfxExplode.play('', 0, 1);
|
|
|
|
// And create an explosion :)
|
|
var explosion = explosions.getFirstDead();
|
|
explosion.reset(player.x, player.y);
|
|
explosion.play('kaboom', 30, false, true);
|
|
|
|
showTitle();
|
|
|
|
}
|
|
|
|
function fireBullet () {
|
|
|
|
// To avoid them being allowed to fire too fast we set a time limit
|
|
if (game.time.now > bulletTime)
|
|
{
|
|
// Grab the first bullet we can from the pool
|
|
bullet = bullets.getFirstExists(false);
|
|
|
|
if (bullet)
|
|
{
|
|
// And fire it
|
|
bullet.reset(player.x + 8, player.y + 10);
|
|
bullet.body.velocity.x = 700;
|
|
bulletTime = game.time.now + 100;
|
|
sfxLazer.play('', 0, 0.1);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function collisionHandler (bullet, alien) {
|
|
|
|
// Increase the score
|
|
score += 20;
|
|
text.setText('score: ' + score.toString());
|
|
|
|
// For every alien we kill we're going to increase their speed slightly and reduce the release rate
|
|
|
|
if (alienReleaseRate > 250)
|
|
{
|
|
alienReleaseRate -= 2;
|
|
}
|
|
|
|
if (alienSpeed < 600)
|
|
{
|
|
alienSpeed += 2;
|
|
}
|
|
|
|
if (alienReleaseRate % 300 == 0)
|
|
{
|
|
alienReleaseQuantity++;
|
|
}
|
|
|
|
// And create an explosion :)
|
|
var explosion = explosions.getFirstDead();
|
|
|
|
if (explosion)
|
|
{
|
|
explosion.reset(alien.x + 8, alien.y + 16);
|
|
explosion.body.velocity.x = 400;
|
|
explosion.body.velocity.y = 10;
|
|
explosion.play('kaboom', 30, false, true);
|
|
|
|
sfxExplode.play('', 0, 0.5);
|
|
}
|
|
|
|
// When a bullet hits an alien we kill both sprites, putting them back into the pool
|
|
bullet.kill();
|
|
alien.kill();
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |