<!DOCTYPE html>
<html>
<head>
<!-- <script src="//cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script> -->
<script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.9.4/phaser.min.js"></script>
<script src="game.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gameBoard"></div>
</body>
</html>
/* Styles go here */
// Game: LunarLander
// GAME STATE - MAIN MENU
// -----------------------------------------------------------------
var MainMenuState = {
preload: function() {
// load in all our image data we will use during our game
// image data for ROCKET
// -------------------------------------------------------------------------
var rocketEngineOffData = [
'..2222..',
'.292292.',
'.292292.',
'.222222.',
'..2222..',
'..2222..',
'.22..22.',
'.2....2.'
];
game.create.texture('rocketEngineOff', rocketEngineOffData, 3, 3, 0);
var rocketEngineDownOnData = [
'..2222..',
'.292292.',
'.292292.',
'.222222.',
'..2222..',
'..2222..',
'.223322.',
'.2.33.2.'
];
game.create.texture('rocketEngineDownOn', rocketEngineDownOnData, 3, 3, 0);
var rocketEngineLeftOnData = [
'..2222..',
'3292292.',
'.292292.',
'.222222.',
'..2222..',
'..2222..',
'.22..22.',
'.2....2.'
];
game.create.texture('rocketEngineLeftOn', rocketEngineLeftOnData, 3, 3, 0);
var rocketEngineRightOnData = [
'..2222..',
'.2922923',
'.292292.',
'.222222.',
'..2222..',
'..2222..',
'.22..22.',
'.2....2.'
];
game.create.texture('rocketEngineRightOn', rocketEngineRightOnData, 3, 3, 0);
// image data for GROUND
// -------------------------------------------------------------------------
var groundData = [
'55555555',
'56565656',
'65656565',
'56565656'
];
game.create.texture('ground', groundData, 3, 3, 0);
// image data for GREEN LANDING PAD
// -------------------------------------------------------------------------
var pad_green_Data = [
'BBBBBBBB',
'99999999',
'9.9..9.9',
'9.9..9.9'
];
game.create.texture('pad_green', pad_green_Data, 3, 3, 0);
// image data for YELLOW LANDING PAD
// -------------------------------------------------------------------------
var pad_yellow_Data = [
'88888888',
'99999999',
'9.9..9.9',
'9.9..9.9'
];
game.create.texture('pad_yellow', pad_yellow_Data, 3, 3, 0);
// image data for RED LANDING PAD
// -------------------------------------------------------------------------
var pad_red_Data = [
'33333333',
'99999999',
'9.9..9.9',
'9.9..9.9'
];
game.create.texture('pad_red', pad_red_Data, 3, 3, 0);
// image data for EXPLOSION projectile
// -------------------------------------------------------------------------
var projectileData = [
'8888',
'8888',
'8888',
'8888'
];
game.create.texture('projectile', projectileData, 1, 1, 0);
// rocket engine sound
game.load.audio('engine-sound', 'https://res.cloudinary.com/smoothdaddyg/video/upload/v1512924751/233489__aleixcm__lighter_hzxin8.wav');
// explosion sound
game.load.audio('explosion-sound', 'https://res.cloudinary.com/smoothdaddyg/video/upload/v1512919930/399303__dogfishkid__explosion-012_v7ls75.mp3');
// game music sound
game.load.audio('music-sound', 'https://res.cloudinary.com/smoothdaddyg/video/upload/v1512920558/172561__djgriffin__video-game-7_hqrbzf.wav');
// landing success sound
game.load.audio('landing-sound', 'https://res.cloudinary.com/smoothdaddyg/video/upload/v1512921203/171671__fins__success-1_wksyfd.wav');
// the computer will take a few seconds to upload our image data into the game engine.
// when the load is complete
game.load.onLoadComplete.add(this.loadCompleted, this);
game.load.start();
this.load_completed = false;
},
create: function() {
//this.rocket = game.add.sprite(100, 100, 'rocketEngineOff');
console.log('here');
// display a main menu and instructions
// game.add.text(50, 80, 'LUNAR LANDER',
// {
// font: '50px Arial',
// fill: '#ffffff'
// });
// game.add.text(50, 200, 'Main Menu \n> press spacebar to start!',
// {
// font: '25px Arial',
// fill: '#00ff2e'
// });
// need a keyboard object to capture users input
// this.keyboard = game.input.keyboard;
},
update: function() {
// check if user is pressing spacebar
// if (this.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
// start level
//game.state.start('level1');
// }
},
loadCompleted: function() {
console.log('load complete');
this.create;
}
};
// GAME STATE - LEVEL 1
// -----------------------------------------------------------------
var Level1State = {
// This is a property of the Level1State.
// If it is set to true, the game is over. We set it to false initially.
ThisLevelIsOverDude: false,
preload: function() {
// nothing here because we now load all image data in our main-menu-state6
},
create: function() {
// create all our game objects and setup our game environment
// add physics to this level
game.physics.startSystem(Phaser.Physics.ARCADE);
// change background color
game.stage.backgroundColor = "#000000";
// need a keyboard object to capture users input
this.keyboard = game.input.keyboard;
// create rocket object
// ------------------------------------------------------------
// create the rocket object and add physics property to it
this.rocket = game.add.sprite(10, 10, 'rocketEngineOff');
game.physics.enable(this.rocket, Phaser.Physics.ARCADE);
// Set the pivot point to the center of the sprite object
this.rocket.anchor.setTo(0.5, 0.5);
// put the rocket in motion
this.rocket.body.velocity.x = 10;
// set rockets gravity effect
this.rocket.body.gravity.y = 100;
// create a landing pad
// ------------------------------------------------------------
// create the landing pad object and add physics property to it
this.pad_a = game.add.sprite(550, 450, 'pad_green');
game.physics.enable(this.pad_a, Phaser.Physics.ARCADE);
// set the pivot point to the center of the sprite object
this.pad_a.anchor.setTo(0.5, 0.5);
// make this object immovable
this.pad_a.body.immovable = true;
// check if rocket leaves the game
this.rocket.checkWorldBounds = true;
// if rocket leaves the game (is out of bounds), call the 'gameOver' function
this.rocket.events.onOutOfBounds.add(this.gameOver, this);
// create a group of block objects
this.blocks = game.add.group();
this.makeBlock(450,400);
this.makeBlock(475,400);
this.makeBlock(500,400);
// create fuel indicator
this.FuelTank = 9000;
// show fuel amount left
this.FuelStatus = game.add.text(0,0,'Fuel: ' + this.FuelTank, {font: '15px Arial', fill: '#02f20e' });
// show rockets current velocity
this.velocity = game.add.text(0,20,'Velocity: ' + this.rocket.body.velocity.y, {font: '15px Arial', fill: '#02f20e' });
// Create Explosion object - which is a collection of projectile pieces
// --------------------------------------------------------------------
this.NUMBER_OF_PIECES = 100;
// create a flag so the explosion only happens once
this.explosion_happened = false;
// create group of projectile pieces
this.piecesPool = this.game.add.group();
for(var k = 0; k < this.NUMBER_OF_PIECES; k++) {
// Create each piece and add it to the group.
var piece = this.game.add.sprite(0, 0, 'ship');
this.piecesPool.add(piece);
// Set its pivot point to the center of the sprite
piece.anchor.setTo(0.5, 0.5);
// Enable physics on the sprite object
this.game.physics.enable(piece, Phaser.Physics.ARCADE);
}
// play some music during our game
// ----------------------------------------------------------
// create our sound object
this.MainMenuSound = game.add.audio('music-sound');
// play sound over and over at 100% volume
this.MainMenuSound.loopFull(1);
// play it
this.MainMenuSound.play();
// game sound effects
// ----------------------------------------------------------
// adds an object to our game to control engine sound
this.EngineSound = game.add.audio('engine-sound');
},
shutdown: function() {
this.MainMenuSound.destroy();
},
makeBlock: function(x,y) {
// this function will create a new block object at position X and Y
// and add it to the "group of blocks" object we created
// create our first block object (make a block look like the ground)
this.block = game.add.sprite(x,y, 'ground');
// enable physics on our block
game.physics.enable(this.block, Phaser.Physics.ARCADE);
// nothing can move this sprite
this.block.body.immovable = true;
// set the blocks anchor to the center of the block
this.block.anchor.setTo(0.5, 0.5);
// add block to our group of blocks.
this.blocks.add(this.block);
},
update: function() {
// logic to move rocket using it's three engines
// --------------------------------------------------------------------
// rocket engines are off
var RocketEngineOff = true;
//this.EngineSound.stop();
// check if down engines are on
if (this.keyboard.isDown(Phaser.Keyboard.UP) && this.FuelTank > 0) {
// up arrow is being pressed, so show image with down thruster on
this.rocket.loadTexture('rocketEngineDownOn', 0);
// increase current velocity by 10
this.rocket.body.velocity.y += -5;
// rocket engine is on
RocketEngineOff = false;
this.EngineSound.play();
}
// check if left engine is on
if (this.keyboard.isDown(Phaser.Keyboard.LEFT) && this.FuelTank > 0) {
// left arrow is being pressed, so show image with left thruster on
this.rocket.loadTexture('rocketEngineRightOn', 0);
// increase velocity
this.rocket.body.velocity.x += -3;
// rocket engine is on
RocketEngineOff = false;
this.EngineSound.play();
}
// check if right engine is on
if (this.keyboard.isDown(Phaser.Keyboard.RIGHT) && this.FuelTank > 0) {
// left arrow is being pressed, so show image with left thruster on
this.rocket.loadTexture('rocketEngineLeftOn', 0);
// increase velocity
this.rocket.body.velocity.x += 3;
// rocket engine is on
RocketEngineOff = false;
this.EngineSound.play();
}
// if engines are off, then show image with no engines on.
if (RocketEngineOff === true) {
this.rocket.loadTexture('rocketEngineOff', 0);
}
// if rocket engines are on, use fuel
if (RocketEngineOff === false) {
this.FuelTank = this.FuelTank - 10;
this.FuelStatus.text = 'Fuel: ' + this.FuelTank;
}
// check if rockets lands on pad
// --------------------------------------------------------------------
game.physics.arcade.overlap(this.rocket, this.pad_a, this.touchDown);
// check if this level is over
// --------------------------------------------------------------------
if (Level1State.ThisLevelIsOverDude === true) {
// make an explosion only once
if (this.explosion_happened === false) {
this.explosion();
this.explosion_happened = true;
}
// check if user is pressing spacebar
if (this.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
Level1State.ThisLevelIsOverDude = false;
game.state.start('mainmenu');
}
}
// check if rockets hits the ground
// --------------------------------------------------------------------
game.physics.arcade.overlap(this.rocket, this.blocks, this.hitGround);
// as long as level is not over, continously show rockets current velocity
if (Level1State.ThisLevelIsOverDude === false) {
this.velocity.text = 'Velocity: ' + this.rocket.body.velocity.y;
}
// change landing pad color depending on velocity of rocket
//---------------------------------------------------------------------
if (this.rocket.body.velocity.y > 100){
// change the pad image to the red pad
this.pad_a.loadTexture('pad_red', 0);
}
if (this.rocket.body.velocity.y < 80){
// change the pad image to the yellow pad
this.pad_a.loadTexture('pad_yellow', 0);
}
if (this.rocket.body.velocity.y < 40){
// change the pad image to the green pad
this.pad_a.loadTexture('pad_green', 0);
}
},
explosion: function() {
// create a bunch of particles and make then go everywhere
for(var ii = 1; ii < this.NUMBER_OF_PIECES; ii++ ) {
// where do want the explosion on the screen?
// at the same place the rocket is
var particle = this.game.add.sprite(this.rocket.x, this.rocket.y, 'projectile');
// Enable physics on the sprite object
this.game.physics.enable(particle, Phaser.Physics.ARCADE);
// set a random velocity direction for each particle
// by setting a flag if the axis will be negative or positive
var xneg = game.rnd.integerInRange(1,2);
if (xneg == 1) { xneg = xneg * -1; }
var yneg = game.rnd.integerInRange(1,2);
if (yneg == 1) { yneg = yneg * -1; }
// set the velocity of each individual particle
particle.body.velocity.y = game.rnd.integerInRange(0, 1000) * xneg;
particle.body.velocity.x = game.rnd.integerInRange(0, 1000) * yneg;
//---comment following to experiment with particles
//particle.body.gravity.x = 10000;
//particle.body.gravity.y = 1;
//particle.body.collideWorldBounds = true;
//particle.body.bounce.set(.5);
}
},
touchDown: function(_rocket, _pad_a) {
// check if the rocket touched down softly
if (_rocket.body.velocity.y < 80) {
// stop all rocket motion
_rocket.body.enable = false;
// display game over and instructions
game.add.text(50,30,'PERFECT TOUCH DOWN!!', {font: '50px Arial', fill: '#02f20e' });
// display game over and instructions
game.add.text(50,100,'Restart? \npress spacebar', {font: '40px Arial', fill: '#ffffff' });
// this level is over
Level1State.ThisLevelIsOverDude = true;
// landing sound
this.LandingSound = game.add.audio('landing-sound');
this.LandingSound.play();
} else {
// stop all rocket motion
_rocket.body.enable = false;
// display game over and instructions
game.add.text(50,100,'LANDING TOO HARD! GAME OVER \n Restart? \n press spacebar', {font: '40px Arial', fill: '#ffffff' });
// this level is over
Level1State.ThisLevelIsOverDude = true;
// explosion sound
this.LandingSound = game.add.audio('explosion-sound');
this.LandingSound.play();
}
},
hitGround: function(_rocket) {
// stop all rocket motion
_rocket.body.enable = false;
// display game over and instructions
game.add.text(50,100,'EXPLOSION! GAME OVER \n Restart? \n press spacebar', {font: '40px Arial', fill: '#ffffff' });
// this level is over
Level1State.ThisLevelIsOverDude = true;
// explosion sound
this.LandingSound = game.add.audio('explosion-sound');
this.LandingSound.play();
},
gameOver: function() {
// display game over and instructions
game.add.text(50,100,'GAME OVER \n Restart? \n press spacebar', {font: '40px Arial', fill: '#ffffff' });
// this level is over
Level1State.ThisLevelIsOverDude = true;
// explosion sound
this.LandingSound = game.add.audio('explosion-sound');
this.LandingSound.play();
}
};
// GAME - INITIALIZE
// -----------------------------------------------------------------
// Startup the Phaser Game Engine
var game = new Phaser.Game(600, 500, Phaser.AUTO, 'gameBoard');
// add game scenes ( game states ) to the phase game engine
game.state.add('mainmenu', MainMenuState);
game.state.add('level1', Level1State);
// Start Game!
game.state.start('mainmenu');