Add aliens and pool bullets.

javascripts/game.js

@@ -1,8 +1,10 @@
-var game = new Phaser.Game(1280, 720, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });
+var game = new Phaser.Game(1024, 576, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });
 
 function preload () {
   game.load.image('ship', '/images/ship.png');
   game.load.image('bullet', '/images/bullet.png');
+  game.load.image('alien', '/images/alien.png');
+  game.load.image('bomb', '/images/bomb.png');
 }
 
 var bulletTime = 0;
@@ -10,16 +12,30 @@ var bulletTime = 0;
 function create () {
   game.physics.startSystem(Phaser.Physics.ARCADE);
 
-  player = game.add.sprite(640, 675, 'ship');
+  // Initialize player
+  player = game.add.sprite(512, 540, 'ship');
   player.anchor.setTo(0.5, 0.5);
   game.physics.enable(player, Phaser.Physics.ARCADE);
 
   player.body.bounce.x = 0.5;
   player.body.collideWorldBounds = true;
 
+  // Initialize bullets
   bullets = game.add.group();
   bullets.enableBody = true;
   bullets.physicsBodyType = Phaser.Physics.ARCADE;
+  bullets.createMultiple(5, 'bullet');
+  bullets.setAll('anchor.x', 0.5);
+  bullets.setAll('anchor.y', 1);
+  bullets.setAll('checkWorldBounds', true);
+  bullets.setAll('outOfBoundsKill', true);
+
+  // Initialize aliens
+  aliens = game.add.group();
+  aliens.enableBody = true;
+  aliens.physicsBodyType = Phaser.Physics.ARCADE;
+
+  createAliens();
 
   // Setup controls
   cursors = game.input.keyboard.createCursorKeys();
@@ -34,40 +50,66 @@ function update () {
     fireBullet();
   }
 
+  game.physics.arcade.overlap(bullets, aliens, bulletHitsAlien, null, this);
 }
 
 function playerMovement () {
-  var maxVelocity = 600;
+  var maxVelocity = 500;
 
   if (cursors.left.isDown && player.body.velocity.x > -maxVelocity) {
     // Move to the left
-    player.body.velocity.x -= 25;
+    player.body.velocity.x -= 20;
   }
   else if (cursors.right.isDown && player.body.velocity.x < maxVelocity) {
     // Move to the right
-    player.body.velocity.x += 25;
+    player.body.velocity.x += 20;
   }
   else {
     // Slow down
     if (player.body.velocity.x > 0) {
-      player.body.velocity.x -= 5;
+      player.body.velocity.x -= 4;
     }
     else if (player.body.velocity.x < 0) {
-      player.body.velocity.x += 5;
+      player.body.velocity.x += 4;
     }
   }
 }
 
 function fireBullet () {
   if (game.time.now > bulletTime) {
-    var bullet = bullets.create(player.body.x + (player.body.width / 2) - 2, 645, 'bullet');
+    bullet = bullets.getFirstExists(false);
-    bullet.body.velocity.y = -500;
+
-    bullet.body.velocity.x = player.body.velocity.x / 4;
+    if (bullet) {
-    bullet.checkWorldBounds = true;
+      //  And fire it
-    bullet.outOfBoundsKill = true;
+      bullet.reset(player.x, player.y + 8);
-    // Destroy the bullet when it is killed.
+      bullet.body.velocity.y = -400;
-    bullet.events.onKilled.add(function() { this.destroy(); }, bullet)
+      bulletTime = game.time.now + 500;
-    bulletTime = game.time.now + 200;
+    }
+  }
+}
+
+function bulletHitsAlien (bullet, alien) {
+  bullet.kill();
+  alien.kill();
+}
+
+function createAliens () {
+  for (var y = 0; y < 4; y++) {
+    for (var x = 0; x < 10; x++) {
+      var alien = aliens.create(x * 75, y * 50, 'alien');
+      alien.anchor.setTo(0.5, 0.5);
+      alien.body.moves = false;
+    }
   }
 
+  aliens.x = 64;
+  aliens.y = 50;
+
+  //  All this does is basically start the invaders moving. Notice we're moving the Group they belong to, rather than the invaders directly.
+  var tween = game.add.tween(aliens).to( { x: 284 }, 2500, Phaser.Easing.Sinusoidal.InOut, true, 0, 1000, true);
+
+  //  When the tween loops it calls descend
+  tween.onLoop.add(descend, this);
 }
+
+function descend () { aliens.y += 10; }

stylesheets/all.css

@@ -1,389 +1,12 @@
-/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
-
-/* ==========================================================================
-   HTML5 display definitions
-   ========================================================================== */
-
-/*
- * Corrects `block` display not defined in IE 8/9.
- */
-
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section,
-summary {
-    display: block;
-}
-
-/*
- * Corrects `inline-block` display not defined in IE 8/9.
- */
-
-audio,
-canvas,
-video {
-    display: inline-block;
-}
-
-/*
- * Prevents modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-    display: none;
-    height: 0;
-}
-
-/*
- * Addresses styling for `hidden` attribute not present in IE 8/9.
- */
-
-[hidden] {
-    display: none;
-}
-
-/* ==========================================================================
-   Base
-   ========================================================================== */
-
-/*
- * 1. Sets default font family to sans-serif.
- * 2. Prevents iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-    font-family: sans-serif; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-    -ms-text-size-adjust: 100%; /* 2 */
-}
-
-/*
- * Removes default margin.
- */
-
-body {
-    margin: 0;
-}
-
-/* ==========================================================================
-   Links
-   ========================================================================== */
-
-/*
- * Addresses `outline` inconsistency between Chrome and other browsers.
- */
-
-a:focus {
-    outline: thin dotted;
-}
-
-/*
- * Improves readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
-    outline: 0;
-}
-
-/* ==========================================================================
-   Typography
-   ========================================================================== */
-
-/*
- * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
- * Safari 5, and Chrome.
- */
-
-h1 {
-    font-size: 2em;
-}
-
-/*
- * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
- */
-
-abbr[title] {
-    border-bottom: 1px dotted;
-}
-
-/*
- * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
- */
-
-b,
-strong {
-    font-weight: bold;
-}
-
-/*
- * Addresses styling not present in Safari 5 and Chrome.
- */
-
-dfn {
-    font-style: italic;
-}
-
-/*
- * Addresses styling not present in IE 8/9.
- */
-
-mark {
-    background: #ff0;
-    color: #000;
-}
-
-
-/*
- * Corrects font family set oddly in Safari 5 and Chrome.
- */
-
-code,
-kbd,
-pre,
-samp {
-    font-family: monospace, serif;
-    font-size: 1em;
-}
-
-/*
- * Improves readability of pre-formatted text in all browsers.
- */
-
-pre {
-    white-space: pre;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-/*
- * Sets consistent quote types.
- */
-
-q {
-    quotes: "\201C" "\201D" "\2018" "\2019";
-}
-
-/*
- * Addresses inconsistent and variable font size in all browsers.
- */
-
-small {
-    font-size: 80%;
-}
-
-/*
- * Prevents `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-}
-
-sup {
-    top: -0.5em;
-}
-
-sub {
-    bottom: -0.25em;
-}
-
-/* ==========================================================================
-   Embedded content
-   ========================================================================== */
-
-/*
- * Removes border when inside `a` element in IE 8/9.
- */
-
-img {
-    border: 0;
-}
-
-/*
- * Corrects overflow displayed oddly in IE 9.
- */
-
-svg:not(:root) {
-    overflow: hidden;
-}
-
-/* ==========================================================================
-   Figures
-   ========================================================================== */
-
-/*
- * Addresses margin not present in IE 8/9 and Safari 5.
- */
-
-figure {
-    margin: 0;
-}
-
-/* ==========================================================================
-   Forms
-   ========================================================================== */
-
-/*
- * Define consistent border, margin, and padding.
- */
-
-fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
-}
-
-/*
- * 1. Corrects color not being inherited in IE 8/9.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
-    border: 0; /* 1 */
-    padding: 0; /* 2 */
-}
-
-/*
- * 1. Corrects font family not being inherited in all browsers.
- * 2. Corrects font size not being inherited in all browsers.
- * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
- */
-
-button,
-input,
-select,
-textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 2 */
-    margin: 0; /* 3 */
-}
-
-/*
- * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-button,
-input {
-    line-height: normal;
-}
-
-/*
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Corrects inability to style clickable `input` types in iOS.
- * 3. Improves usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
-}
-
-/*
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-input[disabled] {
-    cursor: default;
-}
-
-/*
- * 1. Addresses box sizing set to `content-box` in IE 8/9.
- * 2. Removes excess padding in IE 8/9.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-}
-
-/*
- * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
-    box-sizing: content-box;
-}
-
-/*
- * Removes inner padding and search cancel button in Safari 5 and Chrome
- * on OS X.
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-/*
- * Removes inner padding and border in Firefox 4+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-/*
- * 1. Removes default vertical scrollbar in IE 8/9.
- * 2. Improves readability and alignment in all browsers.
- */
-
-textarea {
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
-}
-
-/* ==========================================================================
-   Tables
-   ========================================================================== */
-
-/*
- * Remove most spacing between table cells.
- */
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
 body {
   background: #333;
 }
 
 #game {
   position: absolute;
-  width: 1280px;
+  width: 1024px;
-  height: 720px;
+  height: 576px;
 
-  top: calc(50% - 360px);
+  top: calc(50% - 288px);
-  left: calc(50% - 640px);
+  left: calc(50% - 512px);
 }