I'm requiring a little help with overlap()

Phaser 3
1

Hi! I’m building a snake game and I’m having some trouble getting the snake to overlap with a red apple. The snake comes from a class Snake that I created following a tutorial, and the red apples are a group I created with this.physics.add.group. I have tried everything like creating both snake and redApple into this. This is my code:

var snake;
var redApples;
var greenApples;
var score = 0;
var scoreText;
var UP = 0;
var DOWN = 1;
var LEFT = 2;
var RIGHT = 3;

class Scene1 extends Phaser.Scene {
    constructor () {
        super({ key: "Scene1" });
    }

    preload () {
        this.load.image('background', 'assets/grass_background.jpg');
        this.load.image('snakeSprite', 'assets/snake.png');
        this.load.image('redApple', 'assets/red-apple.png')
        this.load.image('greenApple', 'assets/green-apple.png')
    }

    create() {
        var Snake = new Phaser.Class({
            initialize:
            function Snake (scene, x, y) {
                this.headPosition = new Phaser.Geom.Point(x,y);

                this.body = scene.add.group();

                this.head = this.body.create(x * 16, y * 16, 'snakeSprite');
                this.head.setOrigin(0);

                this.alive = true;

                this.speed = 100;

                this.moveTime = 0;

                this.heading = RIGHT;
                this.direction = RIGHT;
            },
            update:
            function (time) {
                if (time >= this.moveTime) {
                    return this.move(time);
                }
            },

            faceLeft:
            function () {
                if (this.direction === UP || this.direction === DOWN) {
                    this.heading = LEFT;
                }
            },
            
            faceRight:
            function () {
                if (this.direction === UP || this.direction === DOWN) {
                    this.heading = RIGHT;
                }
            },

            faceUp: 
            function () {
                if(this.direction === LEFT || this.direction === RIGHT) {
                    this.heading = UP;
                }
            },

            faceDown:
            function () {
                if (this.direction === LEFT || this.direction === RIGHT) {
                    this.heading = DOWN;
                }
            },

            move:
            function (time) {
                switch (this.heading) {
                    case LEFT:
                        this.headPosition.x = Phaser.Math.Wrap(this.headPosition.x - 1, 0, 50);
                        break;
                    case RIGHT:
                        this.headPosition.x = Phaser.Math.Wrap(this.headPosition.x + 1, 0, 50);
                        break;
                    case UP:
                        this.headPosition.y = Phaser.Math.Wrap(this.headPosition.y - 1, 0, 40);
                        break;
                    case DOWN:
                        this.headPosition.y = Phaser.Math.Wrap(this.headPosition.y + 1, 0, 40);
                        break;
                }
                this.direction = this.heading;

                Phaser.Actions.ShiftPosition(this.body.getChildren(), this.headPosition.x * 16, this.headPosition.y * 16, 1);

                this.moveTime = time + this.speed;

                return true;
            },
            eatGoodApple: 
            function (snake, redApple) {
                console.log('eaten')
                redApple.disableBody(true, true);
                score += 10;
                scoreText.setText('Score: ' + score);
            }
        });
        this.image = this.add.image(400, 300, 'background');

        
        redApples = this.physics.add.group({
            key: 'redApple',
            repeat: 0,
            setXY: { x: Phaser.Math.RND.integerInRange(20, 780), y: Phaser.Math.RND.integerInRange(20, 580) }
        });
        snake = this.physics.add.existing(new Snake(this, 8, 8));
        console.log(snake);
        scoreText = this.add.text(16, 16, 'Score: 0', { font: '32px Impact' });

        this.key_UP = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
        this.key_DOWN = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);
        this.key_RIGHT = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
        this.key_LEFT = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
        console.log(this)

    }

    update(time, delta) {
        if (!snake.alive) {
            return;
        }
        if (this.key_LEFT.isDown) {
            snake.faceLeft()
        }
        if (this.key_RIGHT.isDown) {
            snake.faceRight()
        }
        if (this.key_UP.isDown) {
            snake.faceUp()
        }
        if (this.key_DOWN.isDown) {
            snake.faceDown()
        }
    
        this.physics.add.overlap(snake.head, redApples.children.entries[0], () => console.log('eaten'), null, this);
        snake.update(time)
    }
}

Thank you so much if you’re able to help!

2

Hmm, when you do

snake = this.physics.add.existing(new Snake(this, 8, 8));

Phaser will check if Snake already has a body property. Since you have

this.body = scene.add.group();

nothing much will happen.

You also can’t use snake.head in the overlap, since it is not a physics object.

1 Like
3

Don’t use add.overlap() in update(); you’ll be adding 60 colliders per second. Move it into create().