Jump to content

Need help with phaser.io


Recommended Posts

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){
        $(document).keydown(function(e) {
            if (e.keyCode == 32) {
                $('#startGame').off( 'click');
    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() {
            function numberOfTimesTester(){
                console.log("counter = " + counter); 
                counter ++;
                       //  Enable the Arcade Physics system
            //  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;
            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
            // 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);
            ///////////////  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) {
            btnSetAim = game.add.button(game.world.centerX - 95, 525, 'btnSetAim', setAim, this, 2, 1, 0);
        function setAim(){
            game.time.events.events = [];
            game.time.events.add(Phaser.Timer.SECOND * gameTimer, timedOut, this);
            gunSite = game.add.sprite(gunSite.x, gunSite.y, 'gunSite');
            transparentSite = game.add.sprite(sitePlacementX + 2, sitePlacementY + 5, '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
            $(document).keydown(function(e) {
                if (e.keyCode == 32) {
            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(){
            if (game.physics.arcade.overlap(transparentSite, target, null, null, this)){
                scoreText.text = 'Score: ' + score;
                console.log("score = " + score);
            if(gameTries === 3){
                if(score === 3){
        function restart(){
            console.log("Restart Game");
        function timedOut(){
            //This leaves an error but does stop the game
        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();});
<!doctype html> 
<html lang="en"> 
<meta charset="UTF-8"/>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
<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 id="gptGame"></div>
<div class="timed-out-overlay">
<div class="overlay-text">Timed Out!</div>
<div class="overlay-text">Banner</div>
<div class="winner-overlay">
<div class="overlay-text">Winner winner chicken dinner!</div>
<div class="overlay-text">Banner</div>
<div class="loser-overlay">
<div class="overlay-text">LOSER!!! HAHAHA</div>
<div class="overlay-text">Banner</div>
<script type="text/javascript" src="js/phaser.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...