jasonnaso Posted December 20, 2015 Share Posted 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> <html lang="en"> <head> <meta charset="UTF-8"/><title>game</title> <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"></head><body> <div class="game-container"><div class="overlay"><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> <input type="image" src="assets/btnStartGame.png" class="btn-start" id="startGame" /> </div> <div id="gptGame"></div> <div class="timed-out-overlay"><div class="overlay-text">Timed Out!</div><div class="overlay-text">Banner</div></div> <div class="winner-overlay"><div class="overlay-text">Winner winner chicken dinner!</div><div class="overlay-text">Banner</div></div><div class="loser-overlay"><div class="overlay-text">LOSER!!! HAHAHA</div><div class="overlay-text">Banner</div></div> </div> <script type="text/javascript" src="js/phaser.min.js"></script><script type="text/javascript" src="js/test.js"></script></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts