Remove sprite from group

[mattbrand]

I am making a game where you shoot spikes to pop bubbles. I am using Phaser P2 physics.

I am having trouble making a spike disappear when it hits a bubble. I have the spikes in a group, the bubbles in a group, and I have a function set up for the bubble when it hits a spike, and the spike when it hits a bubble. When a spike hits a bubble, I destroy it, but then the update loop that makes the spikes travel upwards and checks the bounds of the spikes fails, with error "Cannot read property 'velocity' of null" on the line:

spikes.children[i].body.velocity.x = 0;

Here is my code:

var game = new Phaser.Game(1024, 768, Phaser.AUTO, '', { preload: preload, create: create, update: update });
var SPIKE_COOL_TIME = 0.5;
var leftKey;
var rightKey;
var spaceKey;
var player;
var bubbles;
var spikes;
var collisionGroup;
var playerCollisionGroup;
var bubbleCollisionGroup;
var spikeCollisionGroup;
var canFire = true;

function preload() {
	game.load.image("player","assets/images/Player_00.png");
	game.load.image("bubble","assets/images/Bubble_Big_00.png");
	game.load.image("spike", "assets/images/Spike_00.png");
}

function create() {
	// background
	game.stage.backgroundColor = "#4488AA";

	// physics
	game.physics.startSystem(Phaser.Physics.P2JS);
	game.physics.p2.setImpactEvents(true);
    game.physics.p2.restitution = 0.8;
    playerCollisionGroup = game.physics.p2.createCollisionGroup();
    bubbleCollisionGroup = game.physics.p2.createCollisionGroup();
    spikeCollisionGroup = game.physics.p2.createCollisionGroup();
    game.physics.p2.updateBoundsCollisionGroup();

    // bubbles
    bubbles = game.add.group();
    bubbles.enableBody = true;
    bubbles.physicsBodyType = Phaser.Physics.P2JS;
    createBubbles();

    // spikes
	spikes = game.add.group();
	spikes.enableBody = true;
	spikes.physicsBodyType = Phaser.Physics.P2JS;

    // player
    player = game.add.sprite(0, 0, "player");
    player.y = game.world.height - (player.height / 2);
    //console.log(player.width + " " + player.height);
    game.physics.p2.enable(player, false);
    player.body.setRectangle(75, 100);
    player.body.setCollisionGroup(playerCollisionGroup);
	player.body.collides(bubbleCollisionGroup, playerHitBubble, this);
	player.body.static = true;

	// controls
	//console.log("add controls");
	leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
	rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
	spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    game.input.keyboard.addKeyCapture([ Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT, Phaser.Keyboard.SPACEBAR ]);
}

function playerHitBubble() {
	console.log("player hit bubble!");
}

function spikeHitBubble(spike) {
	spike.hit = true;
	spike.destroy();
	console.log("spike hit bubble");
}

function bubbleHitSpike(bubble) {
	bubble.hit = true;
	console.log("bubble hit spike");
}

function update() {
	updatePlayer();
	updateBubbles();
	updateSpikes();
}

function updatePlayer() {
	player.body.velocity.x = 0;
	if (this.leftKey.isDown && player.x > (player.width / 3)) {
		player.body.velocity.x = -200;
	}
	else if (this.rightKey.isDown && player.x < (game.world.width - (player.width / 3))) {
		player.body.velocity.x = 200;
	}
	
	if (this.spaceKey.isDown && canFire) {
		createSpike();
		var timer = game.time.events.add(Phaser.Timer.SECOND * 0.2, resetCooldown, this);
		canFire = false;
	}
}

function resetCooldown() {
	canFire = true;
}

function updateBubbles() {
}

function updateSpikes() {
	for (var i=spikes.children.length - 1; i >= 0; i--) {
		if (spikes.children[i] != null && !spikes.children[i].hit) {
			if (spikes.children[i].y <= spikes.children[i].height / 2 || spikes.children[i].hit) {
				spikes.children[i].destroy();
			}
			else {
				spikes.children[i].body.velocity.x = 0;
				spikes.children[i].body.velocity.y = -200;
			}
		}
	}
}

function createBubbles() {
	for (var i=0; i<3; i++) {
		var bubble = bubbles.create(i * 250, 400, "bubble");
		bubble.hit = false;
		bubble.body.setCircle(50);
		bubble.body.setCollisionGroup(bubbleCollisionGroup);
        bubble.body.collides([bubbleCollisionGroup, playerCollisionGroup]);
        bubble.body.collides(spikeCollisionGroup, bubbleHitSpike, this);

		bubble.body.velocity.x = getRandomInt(-500, 500);
		bubble.body.velocity.y = getRandomInt(-500, 500);
	}
    bubbles.setAll("body.bounce.x", 10);
    bubbles.setAll("body.bounce.y", 10);
}

function createSpike() {
	var spike = spikes.create(player.x, 600, "spike");
	//spike.hit = false;
	spike.body.setCircle(5);
	spike.body.setCollisionGroup(spikeCollisionGroup);
    spike.body.collides(bubbleCollisionGroup, spikeHitBubble, this);
    spike.body.velocity.y = -200;
    spike.body.fixedRotation = true
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

 

[mattbrand]

Well, I figured it out. I have to destroy the spike then set it to null.

function spikeHitBubble(spike) {
	spikes.remove(spike.sprite);
	spike.destroy();
	spike = null;
}