More work on the Invaders game.

Author: photonstorm

README.md

@@ -49,6 +49,8 @@ Version 1.1.2
 * Updated: Fixed the Star Struck game sample and enhanced it.
 * Updated: If you pause an Animation, when you next play it it'll resume (un-pause itself).
 * Updated: hexToRGB now accepts short hex codes (#EEE) (thanks beeglebug)
+* Updated: State functions (preload, update, render, etc) are now passed the current game as a parameter (thanks beeglebug)
+* Updated: If your game is running in Canvas (not WebGL) you can now set Stage.backgroundColor to rgba style CSS strings, allowing for semi-transparent game backgrounds.
 * Fixed issue 135 - Added typeof checks into most ArcadePhysics functions to avoid errors with zero values.
 * Fixed issue 136 - distanceTo using worldX/Y instead of x/y.
 * Fixed lots of examples where the cursor keys / space bar were not locked from moving the browser page (if you find any more, please tell us!)

examples/assets/games/invaders/bullet.png

@@ -1,14 +1,15 @@
 
-var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });
 
 function preload() {
 
-    game.load.image('phaser', 'assets/sprites/phaser-dude.png');
-    game.load.image('bullet', 'assets/misc/bullet0.png');
-    game.load.image('alien', 'assets/sprites/space-baddie.png');
-    game.load.image('ship', 'assets/sprites/shmup-ship.png');
-    game.load.spritesheet('kaboom', 'assets/games/tanks/explosion.png', 64, 64, 23);
-    game.load.image('starfield', 'assets/misc/starfield.jpg');
+    game.load.image('bullet', 'assets/games/invaders/bullet.png');
+    game.load.image('enemyBullet', 'assets/games/invaders/enemy-bullet.png');
+    game.load.spritesheet('invader', 'assets/games/invaders/invader32x32x4.png', 32, 32);
+    game.load.image('ship', 'assets/games/invaders/player.png');
+    game.load.spritesheet('kaboom', 'assets/games/invaders/explode.png', 128, 128);
+    game.load.image('starfield', 'assets/games/invaders/starfield.png');
+    game.load.image('background', 'assets/games/starstruck/background2.png');
 
 }
 
@@ -19,68 +20,79 @@ var bulletTime = 0;
 var cursors;
 var fireButton;
 var explosions;
-
-function loadUpdate() {
-
-    console.log('state loadUpdate');
-
-}
+var starfield;
 
 function create() {
 
+    //  The scrolling starfield background
+    starfield = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    // game.add.tileSprite(0, 0, 800, 600, 'background');
 
-    s = game.add.tileSprite(0, 0, 800, 600, 'starfield');
+    //  Our bullet group
+    bullets = game.add.group();
+    bullets.createMultiple(30, 'bullet');
+    bullets.setAll('anchor.x', 0.5);
+    bullets.setAll('anchor.y', 1);
+    bullets.setAll('outOfBoundsKill', true);
 
+    //  The hero!
     player = game.add.sprite(400, 500, 'ship');
     player.anchor.setTo(0.5, 0.5);
 
-    aliens = game.add.group(null, 'aliens');
+    //  The baddies!
+    aliens = game.add.group();
 
     for (var y = 0; y < 4; y++)
     {
         for (var x = 0; x < 10; x++)
         {
-            aliens.create(x * 48, y * 50, 'alien');
+            var alien = aliens.create(x * 48, y * 50, 'invader');
+            alien.animations.add('fly', [0,1,2,3], 20, true);
+            alien.play('fly');
         }
     }
 
     aliens.x = 100;
     aliens.y = 50;
 
-    //  Our bullet group
-    bullets = game.add.group();
-    bullets.createMultiple(30, 'bullet');
-    bullets.setAll('anchor.x', 0.5);
-    bullets.setAll('anchor.y', 1);
-    bullets.setAll('outOfBoundsKill', true);
-
-    //  Explosion pool
+    //  An explosion pool
     explosions = game.add.group();
+    explosions.createMultiple(30, 'kaboom');
+    explosions.forEach(setupInvader, this);
 
-    for (var i = 0; i < 10; i++)
-    {
-        var explosionAnimation = explosions.create(0, 0, 'kaboom', [0], false);
-        explosionAnimation.anchor.setTo(0.5, 0.5);
-        explosionAnimation.animations.add('kaboom');
-    }
+    //  All this does is basically start the invaders moving. Notice we're move the Group they belong to, rather than the invaders directly.
+    var tween = game.add.tween(aliens).to({x: 200}, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);
 
-    var tween = game.add.tween(aliens).to({x: 200}, 3000, Phaser.Easing.Linear.None, true, 0, 1000, true);
+    //  When the tween completes it calls descend, before looping again
     tween.onComplete.add(descend, this);
 
+    //  And some controls to play the game with
     cursors = game.input.keyboard.createCursorKeys();
     fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
 
 }
 
+function setupInvader (invader) {
+
+    invader.anchor.x = 0.5;
+    invader.anchor.y = 0.5;
+    invader.animations.add('kaboom');
+
+}
 
 function descend() {
+
     aliens.y += 10;
+
 }
 
 function update() {
 
-    player.body.velocity.x = 0;
-    player.body.velocity.y = 0;
+    //  Scroll the background
+    starfield.tilePosition.y += 2;
+
+    //  Reset the player, then check for movement keys
+    player.body.velocity.setTo(0, 0);
 
     if (cursors.left.isDown)
     {
@@ -91,46 +103,54 @@ function update() {
         player.body.velocity.x = 200;
     }
 
+    //  Firing?
     if (fireButton.isDown)
     {
         fireBullet();
     }
 
+    //  Run collision
     game.physics.collide(bullets, aliens, collisionHandler, null, this);
 
 }
 
 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)
         {
-            bullet.reset(player.x, player.y - 8);
-            bullet.body.velocity.y = -300;
-            bulletTime = game.time.now + 250;
+            //  And fire it
+            bullet.reset(player.x, player.y + 8);
+            bullet.body.velocity.y = -400;
+            bulletTime = game.time.now + 200;
         }
     }
 
 }
 
-//  Called if the bullet goes out of the screen
 function resetBullet (bullet) {
+
+    //  Called if the bullet goes out of the screen
     bullet.kill();
+
 }
 
 function collisionHandler (bullet, alien) {
 
+    //  When a bullet hits an alien we kill them both
     bullet.kill();
     alien.kill();
 
-    var explosionAnimation = explosions.getFirstDead();
-    explosionAnimation.reset(alien.body.x, alien.body.y);
-    explosionAnimation.play('kaboom', 30, false, true);
+    //  Increase the score
 
-}
+    //  And create an explosion :)
+    var explosion = explosions.getFirstDead();
+    explosion.reset(alien.body.x, alien.body.y);
+    explosion.play('kaboom', 30, false, true);
 
-function render () {
 }

examples/assets/games/invaders/enemy-bullet.png

@@ -0,0 +1,47 @@
+var mainMenu = {
+
+    preload: function () {
+
+        // game.load.image('bg', 'assets/bg.png');
+        // game.load.image('mainstart', 'assets/mainstart.png');
+        game.load.image('bg', 'assets/pics/louie-inga.png');
+        game.load.image('mainstart', 'assets/pics/contra2.png');
+
+    },
+
+    create: function () {
+
+        game.add.sprite(0, 0, 'bg');
+
+        var mainstart = game.add.sprite(0, 0, 'mainstart');
+        mainstart.name = "mainstart";
+        mainstart.inputEnabled = true;
+        mainstart.events.onInputDown.add(this.listener, this);
+
+    },
+
+    listener: function () 
+    {
+        game.state.start('levelMenu', true, true);
+    }    
+
+}
+
+var levelSelect = {
+
+    preload: function () {
+    },
+
+    create: function () {
+
+        game.add.sprite(0, 0, 'bg');
+
+    }
+
+}
+
+var game = new Phaser.Game(640, 480);
+
+game.state.add('menu', mainMenu, true);
+game.state.add('levelMenu', levelSelect);
+