Need help with phaser.io

jasonnaso · December 20, 2015

Hello All,

New to phaser and game dev. I hope this is posted in the correct place. I am building a simple game in which after start is pushed a gun site moves horizontally back and fourth till the user pushes the button "Set Aim". Then the site moves vertically till "Fire" is pushed. # targets sit on the screen. The user needs to hit all three using three tries. I restart.the game after each try weather the target is hit or not. With game.state.restart(); (This may be wrong, im not sure) The issue is (there may be more issues after you see the code) I need to have the target disappear or "fall over" using css or hide() or kill(). Two things are happening. The restart (of course) resets the whole game (create()) so the sites reappear. And when i use target.kill() (with the restart() commented out for testing) this kills the last target that is created, not the current target shot at. (I have tried this.newTarget and other combinations) Thanks for any help! Jason ps not sure if it was needed but the html is at the bottom too. Thanks again

var gameObj = {

init: function(){

$('#startGame').on('click', function(e){

$('#startGame').off('click');

$(document).off('keydown');

gameObj.gptGame();

$('.overlay').delay(200).fadeOut(200);

});

$(document).keydown(function(e) {

if (e.keyCode == 32) {

$(document).off('keydown');

$('#startGame').off( 'click');

gameObj.gptGame();

$('.overlay').delay(200).fadeOut(200);

}

});

},

gptGame: function (){

var gameTimer = 30;

var sitePlacementX = 50;

var sitePlacementY = 45;

var siteVelocity = 100;

var firedGun = false;

var siteMaxSpeed = 1200;

var gameTries = 0;

var score = 0;

var scoreText;

var counter = 1;

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render});

function preload() {

game.load.image('gamePlayBackground', 'assets/gamePlayBackground.png');

game.load.image('overlayBackground', 'assets/overlayBackgroundNoBtn.png');

game.load.image('crate', 'assets/crate.png');

game.load.image('target', 'assets/target.png');

game.load.image('gunSite', 'assets/gunSite.png');

game.load.image('ground', 'assets/platform.png');

game.load.image('transparentSite', 'assets/transparentSite.png');

game.load.image('btnStartGame', 'assets/btnStartGame.png', 193, 71);

game.load.image('btnSetAim', 'assets/btnSetAim.png', 193, 71);

game.load.image('btnFire', 'assets/btnFire.png', 193, 71);

}

function create() {

numberOfTimesTester();

function numberOfTimesTester(){

console.log("counter = " + counter);

counter ++;

}

// Enable the Arcade Physics system

game.physics.startSystem(Phaser.Physics.ARCADE);

// Background for game

game.add.sprite(0, 0, 'gamePlayBackground');

///////////////////Create Barrels/////////////////////////

// The crate group contains all crates in the game

crate = game.add.group();

// Enable physics for any object that is created in the crate group

crate.enableBody = true;

newCrate = crate.create(100, 376, 'crate');

// Imovable stops newCrate from falling away when hit

newCrate.body.immovable = true;

newCrate = crate.create(350, 376, 'crate');

newCrate.body.immovable = true;

newCrate = crate.create(360, 255, 'crate');

newCrate.body.immovable = true;

///////////////////Create Targets/////////////////////////

target = game.add.group();

target.enableBody = true;

// Create three barrels

newTarget = target.create(110, 250, 'target');

newTarget.body.immovable = true;

newTarget = target.create(375, 127, 'target');

newTarget.body.immovable = true;

newTarget = target.create(610, 370, 'target');

newTarget.body.immovable = true;

//////////// Create Gun Site and Transparent Site/////////////////

gunSite = game.add.sprite(sitePlacementX, sitePlacementY, 'gunSite');

transparentSite = game.add.sprite(sitePlacementX + 2, sitePlacementY + 5, 'transparentSite');

transparentSite.visible = false;

gunSite.addChild(transparentSite);

game.physics.enable( gunSite , Phaser.Physics.ARCADE);

gunSite.body.velocity.x = siteVelocity;

//holds Site within the 'world Bounds'

gunSite.body.collideWorldBounds = true;

//Gives bounce off of walls

gunSite.body.bounce.set(1.15);

// transparentSite.body.velocity.x = 50;

// transparentSite.body.collideWorldBounds = true;

// transparentSite.body.bounce.set(1.15);

//////////// Create Ground/Platform/////////////////

//The platform group contains the ground and the 2 ledges we can jump on

platform = game.add.group();

//We will enable physics for any object that is created in this group

platform.enableBody = true;

platform.visible = false;

//Here we create the ground.

ground = platform.create(0, game.world.height - 95, 'ground');

//Scale it to fit the width of the game (the original sprite is 50x32 in size)

ground.scale.setTo(2, 2);

//This stops it from falling away when you jump on it

ground.body.immovable = true;

////////////Timer Test////////////////

game.time.events.add(Phaser.Timer.SECOND * gameTimer, timedOut, this);

console.log();

/////////////// The score ////////////////

scoreText = game.add.text(16, 16, 'Score: '+ score, { fontSize: '32px', fill: '#000' });

////////////Key press and click for game play////////////

$(document).keydown(function(e) {

if (e.keyCode == 32) {

setAim();

}

});

btnSetAim = game.add.button(game.world.centerX - 95, 525, 'btnSetAim', setAim, this, 2, 1, 0);

}

function setAim(){

btnSetAim.kill();

game.time.events.events = [];

game.time.events.add(Phaser.Timer.SECOND * gameTimer, timedOut, this);

$(document).off('keydown');

gunSite.destroy();

gunSite = game.add.sprite(gunSite.x, gunSite.y, 'gunSite');

transparentSite = game.add.sprite(sitePlacementX + 2, sitePlacementY + 5, 'transparentSite');

gunSite.addChild(transparentSite);

//transparentSite.visible = false;

game.physics.enable( gunSite , Phaser.Physics.ARCADE);

// gunSite.name = 'gunSite';

gunSite.body.velocity.y = siteVelocity;

//holds Site within the 'world Bounds'

gunSite.body.collideWorldBounds = true;

//Gives bounce off of walls

gunSite.body.bounce.set(1.15);

$(document).keydown(function(e) {

if (e.keyCode == 32) {

fireFunction();

}

});

btnFire = game.add.button(game.world.centerX - 95, 525, 'btnFire', fireFunction, this, 2, 1, 0);

}

function loadUpdate(){

// console.log('Load Update');

// loadText = game.add.text(game.world.centerX - 300, game.world.centerY - 250, content, style);

// game.text.set();

}

function update() {

//Create a collision between the ground and gun site

game.physics.arcade.collide(gunSite, ground);

// set the max speed to the site X and Y

gunSite.body.maxVelocity.x = siteMaxSpeed;

gunSite.body.maxVelocity.y = siteMaxSpeed;

}

function fireFunction(){

gameTries++;

if (game.physics.arcade.overlap(transparentSite, target, null, null, this)){

score++;

scoreText.text = 'Score: ' + score;

console.log("score = " + score);

newTarget.kill();

}

if(gameTries === 3){

game.destroy();

if(score === 3){

$(".winner-overlay").fadeIn(500);

}else{

$(".loser-overlay").fadeIn(500);

console.log("Loser");

}

game.state.restart();

}

function restart(){

console.log("Restart Game");

}

function timedOut(){

$('.gptGame').fadeOut();

$('.timed-out-overlay').fadeIn();

//This leaves an error but does stop the game

game.destroy();

}

function render() {

// console.log('Render');

//game.debug.text('Time until event: ' + game.time.events.duration, 32, 100);

}

function loadComplete() {

text.setText('Load Complete');

}

};

$(window).load (function(){gameObj.init();});

//http://www.phaser.io/examples/v2/loader/load-events

//http://phaser.io/tutorials/making-your-first-phaser-game/part2

<!doctype html>

<head>

</head>

<body>

<div class="overlay-text">Welcome to My Ready Aim Fire! Here's how it works. Push the start game or space bar button and the gun site will move horizontally. When the site is in a position you like, push the Set Aim or space bar button and the site will then move vertically. Press the Fire Button or space bar when the site is over one of the three targets. <br />Good Luck!</div>

</div>

<div class="overlay-text">Timed Out!</div>

<div class="overlay-text">Banner</div>

</div>

<div class="overlay-text">Winner winner chicken dinner!</div>

<div class="overlay-text">Banner</div>

</div>

<div class="overlay-text">LOSER!!! HAHAHA</div>

<div class="overlay-text">Banner</div>

</div>

</body>

</html>

Sign In

Need help with phaser.io

Recommended Posts

jasonnaso

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity