# Error when executing the collider and overlap function - phaser 3

**URL:** <https://phaser.discourse.group/t/error-when-executing-the-collider-and-overlap-function-phaser-3/9805>\
**Category:** Phaser 3\
**Created:** [June 18, 2021, 1:53pm UTC](https://phaser.discourse.group/t/error-when-executing-the-collider-and-overlap-function-phaser-3/9805 "2021-06-18T13:53:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bndis](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bndis/32/5245_2.png) [@bndis](https://phaser.discourse.group/u/bndis)\
**Post date:** [June 18, 2021, 1:53pm UTC](https://phaser.discourse.group/t/error-when-executing-the-collider-and-overlap-function-phaser-3/9805/1 "2021-06-18T13:53:05Z")

</div>

Hi,

I am working on my first 2D game with phaser 3. I have set up vscode with node https server and running it to deploy the game on localhost. While the game gets compiled successfully and deployed I get a run time error when executing the collider and overlap function. For the time being I have a title screen with “welcome to my game” text and it is clickable. One you click that you are navigating to play scene. When naigating to play scene I am getting the error displayed in the following scrren shot. I suspect that this is caused by ‘this’ keyword and the scope of it. But I have no idea how to fix that. I spent 2-3 hours debugging and playing with ‘this.’ here and there but I am still clueless as to how I can fix this and what I did wrong. I have added my code below as well. Any help will be greatly appriciated. The comment " //Error on “is parent undefined” " is added to mark the lines I get the error.

```javascript
import Phaser from 'phaser';

class PlayScene extends Phaser.Scene {

    constructor() {
        super('PlayScene');
    }

    create() {
        var player;
        var stars;
        var bombs;
        var bomb;
        var platforms;
        var cursors;
        var score = 0;
        var gameOver = false;
        var gameOverText;
        var scoreText;
        var leftKey;
        var rightKey;
        var upKey;
        var repeatStarCount;
        this.add.image(400, 300, 'sky');

        platforms = this.physics.add.staticGroup();
        platforms.create(390, 568, 'ground1');
      
        platforms.create(750, 200, 'ground2');
        platforms.create(0, 150, 'ground4');
        platforms.create(690, 420, 'ground4');
        platforms.create(100, 320, 'ground4');

        player = this.physics.add.sprite(100, 450, 'dude');
        player.setBounce(0.2);
        player.setCollideWorldBounds(true);
        player.setScale(0.15);
        player.setSize(300, 400, false);
        player.body.offset.y = 0;
        player.body.offset.x = 0;

        // Input Events
        this.cursors = this.input.keyboard.createCursorKeys();
        this.leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
        this.rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
        this.upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);

        // player animations
        this.anims.create({
            key: 'LeftRun',
            frames: this.anims.generateFrameNumbers('dude', {
                start: 14,
                end: 17
            }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'LeftJump',
            frames: [{
                key: 'dude',
                frame: 13
            }],
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'LeftIdle',
            frames: this.anims.generateFrameNumbers('dude', {
                start: 9,
                end: 10
            }),
            frameRate: 10,
            repeat: -1
        });
        this.anims.create({
            key: 'LeftDizzy',
            frames: this.anims.generateFrameNumbers('dude', {
                start: 10,
                end: 11
            }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'RightRun',
            frames: this.anims.generateFrameNumbers('dude', {
                start: 5,
                end: 8
            }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'RightJump',
            frames: [{
                key: 'dude',
                frame: 4
            }],
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'RightIdle',
            frames: this.anims.generateFrameNumbers('dude', {
                start: 0,
                end: 1
            }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'RighttDizzy',
            frames: this.anims.generateFrameNumbers('dude', {
                start: 2,
                end: 3
            }),
            frameRate: 10,
            repeat: -1
        });

        // Some stars to collect, 12 in total, evenly spaced 70 pixels apart along the x axis
        repeatStarCount = 10;
        this.stars = this.physics.add.group({
            key: 'star',
            repeat: repeatStarCount,
            setXY: {
                x: 8,
                y: 0,
                stepX: 50
            },
            setScale: {
                x: 0.05,
                y: 0.05
            }
        });

        this.stars.children.iterate(function(child) {

            child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));

        });

        this.bombs = this.physics.add.group();

        var style = {
            font: "30px Arial",
            fill: "#ffff00",
            stroke: "#535353",
            align: "center",
            strokeThickness: 15,
        };

        var style1 = {
            font: "40px Arial",
            fill: "#ffff00",
            stroke: "#535353",
            align: "center",
            strokeThickness: 15,
        };

        scoreText = this.add.text(0, 0, "Score: 0", style);
        gameOverText = this.add.text(300, 250, "Game Over", style1);
        gameOverText.visible = false;

        // Collide the player and the stars with the platforms
        this.physics.add.collider(player, platforms);
        this.physics.add.collider(stars, platforms);
        this.physics.add.collider(bombs, platforms);
      
        //Error on "is parent undefined"
        this.physics.add.overlap(player, stars, () => {

            star.disableBody(true, true);

            // Add and update the score
            score += 10;
            scoreText.setText('Score: ' + score);

            if (stars.countActive(true) === 0) {
                repeatStarCount = +3;
                // A new batch of stars to collect
                stars.children.iterate(function(child) {

                    child.enableBody(true, child.x, 0, true, true);

                });

                var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);

                var bomb = bombs.create(x, 16, 'bomb');
                bomb.setBounce(1);
                bomb.setCollideWorldBounds(true);
                bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
                bomb.allowGravity = false;

            }

        }, null, this);

       //Error on "is parent undefined"
        this.physics.add.collider(player, bombs, () => {
            this.physics.pause();
            if (player.anims.currentAnim.key === 'RightRun' || player.anims.currentAnim.key === 'RightIdle' || player.anims.currentAnim.key === 'RightJump') {
                player.anims.play('RighttDizzy');
            }

            if (player.anims.currentAnim.key === 'LeftRun' || player.anims.currentAnim.key === 'LeftIdle' || player.anims.currentAnim.key === 'LeftJump') {
                player.anims.play('LeftDizzy');
            }
            gameOver = true;
            let timer = this.time.delayedCall(500, () => {
                player.anims.stop();
                gameOverText.visible = true;
            }, [], this);
        }, null, this);
    }

    update() {
        if (this.gameOver) {
            return;
        }

        if (this.cursors.left.isDown) {

            player.setVelocityX(-160);
            player.anims.play('LeftRun', true);

        } else if (this.cursors.right.isDown) {

            player.setVelocityX(160);
            player.anims.play('RightRun', true);

        } else if (Phaser.Input.Keyboard.JustUp(this.leftKey)) {

            player.setVelocityX(0);
            player.anims.play('LeftIdle', true);

        } else if (Phaser.Input.Keyboard.JustUp(this.rightKey)) {

            player.setVelocityX(0);
            player.anims.play('RightIdle', true);

        } else if (Phaser.Input.Keyboard.JustUp(this.upKey) && player.anims.currentAnim != null) {

            if (player.anims.currentAnim.key === 'LeftJump') {
                player.anims.play('LeftIdle', true);
            }

            if (player.anims.currentAnim.key === 'RightJump') {
                player.anims.play('RightIdle', true);

            }

        } else if (this.cursors.up.isDown && player.anims.currentAnim != null) {

            if (player.anims.currentAnim.key === 'RightIdle') {
                player.anims.play('RightJump', true);
                if (player.body.touching.down) {
                    player.setVelocityY(-350);
                }
            }

            if (player.anims.currentAnim.key === 'LeftIdle') {
                player.anims.play('LeftJump', true);
                if (player.body.touching.down) {
                    player.setVelocityY(-350);
                }
            }
        }
    }
}
export default PlayScene;

```

 ![Screenshot1](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/f11b5ba2e7520c88f3ba35dc6b5ee6abf698348b.png)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 18, 2021, 2:20pm UTC](https://phaser.discourse.group/t/error-when-executing-the-collider-and-overlap-function-phaser-3/9805/2 "2021-06-18T14:20:55Z")

</div>

👋

> [@bndis](#):
>
> `this.physics.add.collider(stars, platforms);`

Here `stars` is undefined. You set `this.stars`, but that’s a different reference.

You should either use a a class property, `this.stars`, or a variable declared outside the class, `var stars`.

---

<div class="post-metadata">

**Author:** ![bndis](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bndis/32/5245_2.png) [@bndis](https://phaser.discourse.group/u/bndis)\
**Post date:** [June 18, 2021, 7:09pm UTC](https://phaser.discourse.group/t/error-when-executing-the-collider-and-overlap-function-phaser-3/9805/3 "2021-06-18T19:09:00Z")

</div>

I moved all the variable declarations to the constructor and that fixed the issue. But I do not know how it helped to fix the problem. May be now it works as a class property?? is it?