Collision in pong using phaser

Phaser 3
1

I want to make pong as a first project. I have finished phaser and javascript tutorials on codecadamy. I have got as far as loading in the sprites and making them move. When I try to add collision the whole thing just freezes. Can anyone tell me what I am doing wrong? Any advice is appreciated.

Pong! body { margin: 0; } const config = { type: Phaser.AUTO, width: 1000, height: 600, physics: { default: 'arcade', arcade: { enableBody: true } }, scene: { preload: preload, create: create, update: update } } 
    const game = new Phaser.Game(config);

    function preload() {
        this.load.image('paddle', 'assets/pong.png');
        this.load.image('cpu', 'assets/pong.png');
        this.load.image('ball', 'assets/ball.png');

    }
    //Storage state
    const gameState = {};

    function create() {
        // Here are the interacable objects
        gameState.cpu = this.physics.add.image(20, 300, 'cpu').setScale(.6);
        gameState.paddle = this.physics.add.image(980, 300, 'paddle').setScale(.6)
        gameState.ball = this.physics.add.image(500, 300, 'ball').setScale(1.4)
        
        //ball
        

        //movement and collision
       
      // The next line is causing the problem!
        //this.physics.add.collider(this.ball, this.paddle);
        
        gameState.cursors = this.input.keyboard.createCursorKeys();
        gameState.paddle.setCollideWorldBounds(true);
        gameState.cpu.setCollideWorldBounds(true);
        gameState.ball.setCollideWorldBounds(true);
        
    }

    function update() {

        gameState.ball.x += 5;
        

        if (gameState.cursors.up.isDown) {
            gameState.paddle.setVelocityY(-160);
        } else if (gameState.cursors.down.isDown) {
            gameState.paddle.setVelocityY(160);
        } else {
            gameState.paddle.setVelocityY(0);
        }
    }
</script>
2

What does the browser console say?

3

Hi toblerpwn,

Does the collision work if you change the collider from
this.physics.add.collider(this.ball, this.paddle);
to
this.physics.add.collider(gameState.ball, gameState.paddle);

Cheers

4

Thank you both for asnwering. I was going crazy trying to figure it out. I didnt check the console, that has been very helpfull and RetroVX you are spot on. That fixed it and lets me keep going.