Phaser Error

[zakuhtet]

Hello there. I've been getting an error when I'm writing a Pong game.

Basically the "hit" function adds new balls to the group after the ball collided with the brick.

When I start the game, I get this error when the ball collided with the brick:

"main.js:70 Uncaught TypeError: Cannot read property 'add' of undefined
    at Function.hit (http://localhost/games/pong/main.js:70:13)
    at c.Physics.Arcade.collideSpriteVsSprite (http://localhost/games/pong/phaser.min.js:23:12145)
    at c.Physics.Arcade.collideSpriteVsGroup (http://localhost/games/pong/phaser.min.js:23:12842)
    at c.Physics.Arcade.collideGroupVsGroup (http://localhost/games/pong/phaser.min.js:23:14166)
    at c.Physics.Arcade.collideHandler (http://localhost/games/pong/phaser.min.js:23:11743)
    at c.Physics.Arcade.collide (http://localhost/games/pong/phaser.min.js:23:10399)
    at Object.update (http://localhost/games/pong/main.js:54:23)
    at c.StateManager.update (http://localhost/games/pong/phaser.min.js:10:28836)
    at c.Game.updateLogic (http://localhost/games/pong/phaser.min.js:12:5137)
    at c.Game.update (http://localhost/games/pong/phaser.min.js:12:4563)"

Can you please tell me why? The source code's down below.

var mainState = {
	preload: function() {
		game.load.image('paddle', 'assets/paddle.png');
		game.load.image('brick', 'assets/brick.png');
		game.load.image('ball', 'assets/ball.png');
	},

	create: function() {
		//SETUP
		game.stage.backgroundColor = "#000000";
		game.physics.startSystem(Phaser.Physics.ARCADE);
		game.world.enableBody = true;

		//PADDLE
		this.left = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
		this.right = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);

		this.paddle = game.add.sprite(200, 400, "paddle");
		this.paddle.body.immovable = true;
		
		//BRICKS
		this.bricks = game.add.group();
		
		for(var i=0; i<5; i++) {
			for(var j=0; j<5; j++) {
				var brick = game.add.sprite(55+i*60, 55+j*35, 'brick');
				brick.body.immovable = true;
				this.bricks.add(brick);
			}
		}
		
		//BALL
		this.balls = game.add.group();
		var ball = game.add.sprite(200, 300, 'ball');
		ball.body.velocity.x = 200;
		ball.body.velocity.y = 200;
		ball.body.bounce.setTo(1);
		ball.body.collideWorldBounds = true;
		this.balls.add(ball);
	},

	update: function() {
        //PADDLE CONTROLS
		if(this.left.isDown) {
			this.paddle.body.velocity.x = -300;
		}
		else if(this.right.isDown) {
			this.paddle.body.velocity.x = 300;
		}
		else {
			this.paddle.body.velocity.x = 0;
		}
		
        //COLLISION
		game.physics.arcade.collide(this.paddle, this.balls);
		game.physics.arcade.collide(this.balls, this.bricks, this.hit, null);
		
        //DESTROY BALL WHEN IT TOUCHES THE GROUND
		//if(this.ball.y > this.paddle.y)
		//	game.state.start('main');
	},
	
	hit: function(ball, brick) {
		//DESTROY BLOCK
		brick.kill();
	
		//ADD A NEW BALL
		var b = game.add.sprite(brick.body.x, brick.body.y, 'ball');
		b.body.velocity.x = 200;
		b.body.velocity.y = 200;
		b.body.bounce.setTo(1);
		b.body.collideWorldBounds = true;
		this.balls.add(b);
	},
};

var game = new Phaser.Game(400, 450);
game.state.add('main', mainState);
game.state.start('main');

 

[squilibob]

I believe there's a problem when you pass null as your callback context:

game.physics.arcade.collide(this.balls, this.bricks, this.hit, null);

You then try to use this.balls.add(b); but I believe this will be equal to null

[zakuhtet]

i see, squilibob
i will check it out

[zakuhtet]

Now I got this error.

Uncaught TypeError: c.call is not a function
    at c.Physics.Arcade.separate (http://localhost/games/pong/phaser.min.js:23:14353)
    at c.Physics.Arcade.collideSpriteVsSprite (http://localhost/games/pong/phaser.min.js:23:12108)
    at c.Physics.Arcade.collideSpriteVsGroup (http://localhost/games/pong/phaser.min.js:23:12842)
    at c.Physics.Arcade.collideGroupVsGroup (http://localhost/games/pong/phaser.min.js:23:14166)
    at c.Physics.Arcade.collideHandler (http://localhost/games/pong/phaser.min.js:23:11743)
    at c.Physics.Arcade.collide (http://localhost/games/pong/phaser.min.js:23:10399)
    at Object.update (http://localhost/games/pong/main.js:54:23)
    at c.StateManager.update (http://localhost/games/pong/phaser.min.js:10:28836)
    at c.Game.updateLogic (http://localhost/games/pong/phaser.min.js:12:5137)
    at c.Game.update (http://localhost/games/pong/phaser.min.js:12:4563)

[samme]

Context is still missing, think you need

game.physics.arcade.collide(this.balls, this.bricks, this.hit, null, this);

 

[zakuhtet]

It finally works! Thanks, samme!