Overlap with group objects causing notdefined error

[heisenthurg]

Hi,
 
I am playing around with a side scrolling game, and am trying to add in objects (in this case, animated stars that can be collected). I have created an object layer in Tiled, and added a number of stars into the map. These are displaying fine and animating as they should.
 
I have a callback function to kill the star when the player sprite overlaps with it, but whenever I get to the first star, I get the error: "Uncaught ReferenceError: star is not defined", and the game freezes. I think the issue must be that by using star.kill(); in my function, it is removing all reference to 'star' within the game, but I can't figure out where I am going wrong? Any help would be much appreciated! Code below:

var game = new Phaser.Game(936, 914, Phaser.CANVAS, '', { preload: preload, create: create, update: update });function preload() {	this.game.load.spritesheet('character', 'assets/player-sheet.png', 32, 48);    this.game.load.spritesheet('star', 'assets/star-sheet.png', 32, 32);    this.game.load.tilemap('tilemap', 'assets/level.json', null, Phaser.Tilemap.TILED_JSON);    this.game.load.image('tiles', 'assets/tiles-sheet.png');}//Control Variablesvar map;var facing = 'right';var cursors;var jumpButton;var resetButton;var walkSpeed = 350;var jumpVelocity = 600;//Score countervar score = 0;var scoreText;//Death countervar deaths = 0;var deathsText;function create() {        //HUD setup    scoreText = this.game.add.text(70, 20, 'Score: 0', { fontSize: '32px', fill: '#ff0000' });    scoreText.fixedToCamera = true;    deathsText = this.game.add.text(770, 20, 'Deaths: 0', { fontSize: '32px', fill: '#ff0000' });    deathsText.fixedToCamera = true;    //Basic Physics setup    this.game.physics.startSystem(Phaser.Physics.ARCADE);    game.physics.arcade.gravity.y  = 800;    //Map and Collision setup    this.game.stage.backgroundColor = "#a9f0ff";    this.map = this.game.add.tilemap('tilemap');    this.map.addTilesetImage('map_tileset', 'tiles');    this.backgroundLayer = this.map.createLayer('BackgroundLayer');    this.groundLayer = this.map.createLayer('GroundLayer');    this.waterLayer = this.map.createLayer('WaterLayer');    this.map.setCollisionBetween(1, 500, true, 'GroundLayer');    this.map.setCollision(44, true, 'WaterLayer');    this.groundLayer.resizeWorld();    //Create Player sprite and animations    player = this.game.add.sprite( 150, 650, 'character' );    game.physics.enable(player, Phaser.Physics.ARCADE);    player.body.collideWorldBounds = true;    //Add animations - name, frames, fps, loop    player.animations.add('left', [0, 1, 2, 3], 10, true);    player.animations.add('turn', [4], 20, true);    player.animations.add('right', [5, 6, 7, 8], 10, true);    cursors = game.input.keyboard.createCursorKeys();    jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);    resetButton = game.input.keyboard.addKey(Phaser.Keyboard.R);    //Camera setup    game.camera.follow(player);    //Create Stars sprite and animation    stars = game.add.group();    stars.enableBody = true;    this.map.createFromObjects('Stars', 25, 'star', 0, true, false, stars);    stars.callAll('animations.add', 'animations', 'spin', [0, 1, 2, 3, 4, 5], 10, true);    stars.callAll('animations.play', 'animations', 'spin');}function update() {    //Collision actions    this.game.physics.arcade.collide(player, this.groundLayer);    this.game.physics.arcade.collide(stars, this.groundLayer);    this.game.physics.arcade.collide(player, this.waterLayer, playerKill);    this.game.physics.arcade.overlap(player, stars, collectStar);    //Control actions    player.body.velocity.x = 0;    if (cursors.left.isDown) {        player.body.velocity.x = -walkSpeed;        if (facing != 'left') {            player.animations.play('left');            facing = 'left';        }    } else if (cursors.right.isDown) {        player.body.velocity.x = walkSpeed;        if (facing != 'right') {            player.animations.play('right');            facing = 'right';        }    } else {        if (facing != 'idle') {            player.animations.stop();            if (facing == 'left') {                player.frame = 0;            } else {                player.frame = 5;            }            facing = 'idle';        }    }        if (jumpButton.isDown && player.body.onFloor() ) {        player.body.velocity.y = -jumpVelocity;    }    if (resetButton.isDown) {        player.reset(150,650);    }}function playerKill() {         player.kill();        player.reset(150, 650);        score = 0;        scoreText.text = 'Score: ' + score;        deaths += 1;        deathsText.text = 'Deaths: ' + deaths;}function collectStar() {     star.kill();}

Thanks!

 

[chg]

create() uses a local variable "stars" that isn't declared with a "var" and wont be available outside the function... none of the rest of your code posted mentioned "star" though until the collectStar() function... "star" is undefined because you never define it

[s-p-n]

As chg said, star is indeed undefined, and the star is never actually being killed. Try changing your collectStar function to this.

function collectStar(player, star) {     star.kill();}

Cheers. 

[heisenthurg]

Thank you guys, this is now working. I'm quite new to JS, and hadn't considered the variable scope!