From 29b0ce93c46c8e83fa047f2c11ef9c4b008b3544 Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Fri, 9 May 2014 17:31:51 +0100 Subject: [PATCH] Add aliens and pool bullets. --- images/alien.png | Bin 0 -> 162 bytes images/bomb.png | Bin 0 -> 72 bytes images/bullet.png | Bin 72 -> 72 bytes images/ship.png | Bin 141 -> 98 bytes javascripts/game.js | 72 +++++++-- stylesheets/all.css | 385 +------------------------------------------- 6 files changed, 61 insertions(+), 396 deletions(-) create mode 100644 images/alien.png create mode 100644 images/bomb.png diff --git a/images/alien.png b/images/alien.png new file mode 100644 index 0000000000000000000000000000000000000000..aafa6a008b516b56a97a01dd4f2a446ec5a8e69a GIT binary patch literal 162 zcmeAS@N?(olHy`uVBq!ia0vp^8bB<|!3HF6cA_Z>KqO9Z=w5*}U}s z|Dr10YEIW&-I;e-6q&8{v~rA$-=}+awFbYnPWsF!;K1;oFQRPD_bVk0i_$xH%x|7r z{O-)F-!47P>zQXZ|B~Whzs)>v@lmVafj{h&-aUVCnO{|q*}_6x@Pvldqkl~zKuZ}s MUHx3vIVCg!0D0IuLI3~& literal 0 HcmV?d00001 diff --git a/images/bomb.png b/images/bomb.png new file mode 100644 index 0000000000000000000000000000000000000000..2e0860ceeb432cfe60f749698b0feaa5166a4686 GIT binary patch literal 72 zcmeAS@N?(olHy`uVBq!ia0vp^93afW1SGw4HSYi^eoq(25RU7~Kl+&scyu`#cFFB` UwD6Ph0ZK7=y85}Sb4q9e0LE4h+yDRo literal 0 HcmV?d00001 diff --git a/images/bullet.png b/images/bullet.png index 99c1ebc3a4299386a2aa74658852d849f51ee3e1..2cb11f6890c38dd3bb446d4ff788b29dc88a0521 100644 GIT binary patch delta 54 zcmeb9m>_P*!@_N_z`@4Az+kxT-e(}i@9E+gB5^tSM?af{+cpM9JL1tgm}6*hD02Gd)1KZfB_HlfffJ% zZ{9qOFE&P4W4Uf{jmnA0=9Q~<&7Yj|YF+kU6$J%__nBKyY@T}Suu0U}>r9M{jFy|- i_uXTSV}XMdE9tO5JSLw%y4L~CXYh3Ob6Mw<&;$T22`?=G diff --git a/javascripts/game.js b/javascripts/game.js index 86902e2..65d4371 100644 --- a/javascripts/game.js +++ b/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.body.velocity.y = -500; - bullet.body.velocity.x = player.body.velocity.x / 4; - bullet.checkWorldBounds = true; - bullet.outOfBoundsKill = true; - // Destroy the bullet when it is killed. - bullet.events.onKilled.add(function() { this.destroy(); }, bullet) - bulletTime = game.time.now + 200; + bullet = bullets.getFirstExists(false); + + if (bullet) { + // And fire it + bullet.reset(player.x, player.y + 8); + bullet.body.velocity.y = -400; + bulletTime = game.time.now + 500; + } + } +} + +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; } diff --git a/stylesheets/all.css b/stylesheets/all.css index 1ac4e86..6c8dc9e 100644 --- a/stylesheets/all.css +++ b/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; - height: 720px; + width: 1024px; + height: 576px; - top: calc(50% - 360px); - left: calc(50% - 640px); + top: calc(50% - 288px); + left: calc(50% - 512px); }