Uncaught TypeError: Cannot read property 'appl

Im having the same problem again, i dont know how to fix this. Ive notced though the error pops up when the blue enemy reaches the bottom. Please help!

JSBin Format click edit on top right corner to edit code

Code:

var game = new Phaser.Game(500, 550, Phaser.CANVAS, 'gameDiv');

var CountDown = {

    preload: function() {


    },
    update: function() {

    },
    render: function() {


    }
}
var player;
var enemy;
var bullets;
var shields;
var enemies;
var greenEnemies
var explosions;
var score = 0;
var scoreText;
var bulletTimer = 0;
var blueEnemies;
var mainState = {

    preload: function() {
        game.load.image('background', 'http://s1.postimg.org/nqynk9tkv/starfield.png')
        game.load.image('player', 'http://s28.postimg.org/9qdf4xrfx/145103252914234.gif')
        game.load.image('bullet', 'http://s9.postimg.org/z2bptetxn/bullet.png');
        game.load.image('green', 'http://s28.postimg.org/kpmq4byt5/enemy_green.png')
        game.load.spritesheet('explosionAnim', 'https://raw.githubusercontent.com/jschomay/phaser-demo-game/master/assets/explode.png', 128, 128)
        game.load.bitmapFont('spacefont', 'https://raw.githubusercontent.com/jschomay/phaser-demo-game/master/assets/spacefont/spacefont.png', 'https://rawgit.com/jschomay/phaser-demo-game/master/assets/spacefont/spacefont.xml');
        game.load.image('blue', 'https://raw.githubusercontent.com/jschomay/phaser-demo-game/master/assets/enemy-blue.png')
    },

    create: function() {
        this.backgroundImg = this.game.add.tileSprite(0, 0, 500, 550, 'background')
        player = game.add.sprite(game.world.centerX, 500, 'player')
        player.health = 100;
        player.anchor.setTo(0.5)
        player.scale.setTo(0.25)
        game.physics.arcade.enable(player);
        game.physics.enable(player, Phaser.Physics.ARCADE);
        player.body.collideWorldBounds = true;
        this.game.inputEnabled = true;
        this.game.input.useHandCursor = true;
        player.body.maxVelocity.setTo(400, 400)
        player.body.drag.setTo(400, 400)

        //  The baddies!
    greenEnemies = game.add.group();
    greenEnemies.enableBody = true;
    greenEnemies.physicsBodyType = Phaser.Physics.ARCADE;
    greenEnemies.createMultiple(5, 'green');
    greenEnemies.setAll('anchor.x', 0.5);
    greenEnemies.setAll('anchor.y', 0.5);
    greenEnemies.setAll('scale.x', 0.5);
    greenEnemies.setAll('scale.y', 0.5);
    greenEnemies.setAll('angle', 180);
    greenEnemies.setAll('outOfBoundsKill', true);
    greenEnemies.setAll('checkWorldBounds', true);
     greenEnemies.forEach(function(enemy){
        enemy.body.setSize(enemy.width * 3 / 4, enemy.height * 3 / 4);
        enemy.damageAmount = 20;
        })

         blueEnemies = game.add.group();
    blueEnemies.enableBody = true;
    blueEnemies.physicsBodyType = Phaser.Physics.ARCADE;
    blueEnemies.createMultiple(5, 'blue');
    blueEnemies.setAll('anchor.x', 0.5);
    blueEnemies.setAll('anchor.y', 0.5);
    blueEnemies.setAll('scale.x', 0.5);
    blueEnemies.setAll('scale.y', 0.5);
    blueEnemies.setAll('angle', 180);
    blueEnemies.setAll('outOfBoundsKill', true);
    blueEnemies.setAll('checkWorldBounds', true);
     blueEnemies.forEach(function(enemy){
        enemy.body.setSize(enemy.width * 3 / 4, enemy.height * 3 / 4);
        enemy.damageAmount = 40;
        })

      game.time.events.add(1000, this.launchBlueEnemy);

    //  Shields stat
    shields = game.add.bitmapText(game.world.width - 250, 10, 'spacefont', '' + player.health +'%', 50);
    shields.render = function () {
        shields.text = 'Shields: ' + Math.max(player.health, 0) +'%';
    };
    shields.render();

    //  Score
    scoreText = game.add.bitmapText(10, 10, 'spacefont', '', 50);
    scoreText.render = function () {
        scoreText.text = 'Score: ' + score;
    };
    scoreText.render();



    this.launchGreenEnemy();

        bullets = game.add.group();
        bullets.enableBody = true;
        bullets.physicsBodyType = Phaser.Physics.ARCADE;
        bullets.createMultiple(30, 'bullet');
        bullets.setAll('anchor.x', 0.5);
        bullets.setAll('anchor.y', 1);
        bullets.setAll('outOfBoundsKill', true);
        bullets.setAll('checkWorldBounds', true);

        explosions = game.add.group();
    explosions.enableBody = true;
    explosions.physicsBodyType = Phaser.Physics.ARCADE;
    explosions.createMultiple(30, 'explosionAnim');
    explosions.setAll('anchor.x', 0.5);
    explosions.setAll('anchor.y', 0.5);
    explosions.forEach( function(explosion) {
        explosion.animations.add('explosionAnim');
    });




        this.cursors = game.input.keyboard.createCursorKeys();
        this.fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR)
    },


    update: function() {

        this.backgroundImg.tilePosition.y += 2;
        player.body.acceleration.x = 0;
        if (this.cursors.left.isDown) {
            player.body.acceleration.x -= 600;

        } else if (this.cursors.right.isDown) {
            player.body.acceleration.x += 600;

        }
 game.physics.arcade.overlap(player, greenEnemies, this.shipCollide, null, this);
 game.physics.arcade.overlap(greenEnemies, bullets, this.bulletCollide, null, this);

 game.physics.arcade.overlap(player, blueEnemies, this.shipCollide, null, this);
 game.physics.arcade.overlap(bullets, blueEnemies, this.hitEnemy, null, this);


        if (player.alive && this.fireButton.isDown) {
            //Grab first bullet from the pool

            if (game.time.now > bulletTimer) {
                var bullet = bullets.getFirstExists(false);
                if (bullet) {
                    bullet.reset(player.x, player.y + 8);
                    //Getting it up
                    bullet.body.velocity.y = -400;
                    bulletTimer = game.time.now + 250;
                }

            }
        }



        if(!(player.alive)){
            console.log("Game Over")
        }

    },
    launchGreenEnemy: function(){


    enemy = greenEnemies.getFirstExists(false);
    if (enemy) {
        enemy.reset(game.rnd.integerInRange(0, game.width), -20);
        enemy.body.velocity.x = game.rnd.integerInRange(-300, 300);
        enemy.body.velocity.y = 300;
        enemy.body.drag.x = 100;
    }

    game.time.events.add(game.rnd.integerInRange(300, 3000), this.launchGreenEnemy);

},

shipCollide: function(player,enemy){

var explosion = explosions.getFirstExists(false);
    explosion.reset(enemy.body.x + enemy.body.halfWidth, enemy.body.y + enemy.body.halfHeight);
    explosion.body.velocity.y = enemy.body.velocity.y;
    explosion.alpha = 0.7;
    explosion.play('explosionAnim', 30, false, true);
    enemy.kill();

    player.damage(enemy.damageAmount);
    shields.render();

},

bulletCollide: function(bullet,enemy){

    var explosion = explosions.getFirstExists(false);
    explosion.reset(bullet.body.x + bullet.body.halfWidth, bullet.body.y + bullet.body.halfHeight);
    explosion.body.velocity.y = enemy.body.velocity.y;
    explosion.alpha = 0.7;
    explosion.play('explosionAnim', 30, false, true);
    enemy.kill();
    bullet.kill();
   score += enemy.damageAmount * 10;
    scoreText.render()
},

launchBlueEnemy:function(){

 enemy = blueEnemies.getFirstExists(false);
    if (enemy) {
        enemy.reset(game.rnd.integerInRange(0, game.width), -20);
        enemy.body.velocity.x = game.rnd.integerInRange(-300, 300);
        enemy.body.velocity.y = 300;
        enemy.body.drag.x = 100;
        if (this.y > game.height + 200) {
                this.kill();
                this.y = -20;
            }
    }


    game.time.events.add(game.rnd.integerInRange(300, 3000), this.launchBlueEnemy);

},


    // Restart the game
    platformsCreate: function() {

    }
};

var Menu = {
    preload: function() {

    },
    create: function() {

    },
    update: function() {


    },
    render: function() {

    },
    start: function() {

    }

};

var Game_Over = {

    preload: function() {



    },
    create: function() {




    },
    update: function() {

    },
    render: function() {

    },
    onDown: function() {

    }
};
// Add and start the 'main' state to start the game
game.state.add('CountDown', CountDown)
game.state.add('main', mainState);
game.state.add('Menu', Menu);
game.state.add('Game_Over', Game_Over);
game.state.start('main');

回答1:

A event without a callback or callbackContext is in the events Array.

args: Array[0]
callback: undefined
callbackContext: undefined
delay: 644
loop: false
pendingDelete: true
repeatCount: -1
tick: 1451125781936

I think this line is causing your problem:

game.time.events.add(1000, this.launchBlueEnemy);

When looking for examples on how go use events.add I found this:

http://phaser.io/examples/v2/time/basic-timed-event

//  Here we'll create a basic timed event. This is a one-off event, it won't repeat or loop:
//  The first parameter is how long to wait before the event fires. In this case 4 seconds (you could pass in 4000 as the value as well.)
//  The next parameter is the function to call ('fadePicture') and finally the context under which that will happen.

game.time.events.add(Phaser.Timer.SECOND * 4, fadePicture, this);

This suggest you need to provide 'this' as the third parameter.

This is the source-code for events.add:

/**
* Adds a new Event to this Timer. The event will fire after the given amount of 'delay' in milliseconds has passed, once the Timer has started running.
* Call Timer.start() once you have added all of the Events you require for this Timer. The delay is in relation to when the Timer starts, not the time it was added.
* If the Timer is already running the delay will be calculated based on the timers current time.
*
* @method Phaser.Timer#add
* @param {number} delay - The number of milliseconds that should elapse before the Timer will call the given callback.
* @param {function} callback - The callback that will be called when the Timer event occurs.
* @param {object} callbackContext - The context in which the callback will be called.
* @param {...*} arguments - The values to be sent to your callback function when it is called.
* @return {Phaser.TimerEvent} The Phaser.TimerEvent object that was created.
*/
add: function (delay, callback, callbackContext) {

    return this.create(delay, false, 0, callback, callbackContext, Array.prototype.splice.call(arguments, 3));

},

GOT IT:

game.time.events.add(game.rnd.integerInRange(300, 3000), this.launchBlueEnemy);

this, does not refer the this of your application here. I think this is because you left out the context earlier.

回答2:

The reason i got the anwser wrong was that i missed the 3rd parameter called this as @Norbet said. But i missed it in two places.

First one is at the end:

launchBlueEnemy:function(){

 enemy = blueEnemies.getFirstExists(false);
    if (enemy) {
        enemy.reset(game.rnd.integerInRange(0, game.width), -20);
        enemy.body.velocity.x = game.rnd.integerInRange(-300, 300);
        enemy.body.velocity.y = 300;
        enemy.body.drag.x = 100;
        if (this.y > game.height + 200) {
                this.kill();
                this.y = -20;
            }
    }


    game.time.events.add(game.rnd.integerInRange(300, 3000), this.launchBlueEnemy); <<-- Should have had this as the third parameter.

},

And second is:

launchGreenEnemy: function(){


    enemy = greenEnemies.getFirstExists(false);
    if (enemy) {
        enemy.reset(game.rnd.integerInRange(0, game.width), -20);
        enemy.body.velocity.x = game.rnd.integerInRange(-300, 300);
        enemy.body.velocity.y = 300;
        enemy.body.drag.x = 100;
    }

    game.time.events.add(game.rnd.integerInRange(300, 3000), this.launchGreenEnemy); <<-- Should have had this as the third parameter.

},

Hope this helped to the people who were struglling like me :-). And happy late christmass!