Collision Issue with phaser 3

[Lmon_The_Tie]

Hi

First time posting on this forum and using Phaser 3. I am having some issues with collision between two objects which seem overlap if the player is moving left or right. However the player can jump on top of the object without going through it.

Any help would be greatly appreaciated.

 

My Code:

Main Class

let phase;
let plr;

let config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: true
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

phase= new Phaser.Game(config);


function preload (){

    this.load.image('Ground','src/assets/Tiles/ground/ground01.png');

    //
    this.load.image('bg1','src/assets/BG/BG.png');

    //
    this.load.image('fox','src/assets/Object/Mushroom_1.png');

}

function create (){

    this.add.image(500,100,'bg1').setScale(1.50);
    plr = new Player();

    platform = this.physics.add.staticGroup();
    platform.create(191,550,'Ground').refreshBody();
    platform.create(319,550,'Ground').refreshBody()
    platform.create(420,550,'Ground').refreshBody()
    platform.create(800,550,'Ground').refreshBody()
    this.physics.add.collider(plr.sprite,platform);



    //this.physics.add.collider(plat.sprite2,plr.sprite);
    //this.physics.add.overlap(plr.sprite,plat.sprite2,null,plat);

   // console.log(plat.sprite2);
    console.log(plr);

    cursors = this.input.keyboard.createCursorKeys();


}

function update(){

    if (cursors.up.isDown)
    {
        plr.jumpM();
    }
    else if(cursors.right.isDown){
        plr.rightM();
    }
    else if(cursors.left.isDown){
        plr.leftM();
    }
    else if(cursors.down.isDown){

        plr.sprite.y +=10;
    }


}

 

Player Class

class Player {
    constructor() {
        const playerSprite = game.physics.add.sprite(300, 600, 'fox');
        playerSprite.setCollideWorldBounds(true);
        playerSprite.setOrigin(0, 0);
        playerSprite.setGravity(0, 450);
        this.sprite = playerSprite;
    }

    leftM() {
        this.sprite.x += -3;
    }

    rightM() {
        this.sprite.x += 3;
    }

    jumpM() {
        this.sprite.y += -5;
    }

    getYV() {

        return this.sprite.y;
    }

    getXV() {

        return this.sprite.x;
    }
}