Pong Phaser.js collision

I have completed Codecadamy Javascript and Phaser courses.

I want to make pong for my first project.

I have created the paddels and ball. I have got the ball moving. Added collision to the edge of the game world but I cannot get collision working on the ball and the paddle and I have no idea what I am doing wrong. When I add collision the game just freezes. All advice is welcome.

<!DOCTYPE html>

    <meta charset="UTF-8">
    <script src="phaser.js"> </script>
    <style type="text/css">
        body {
            margin: 0;

    <script type="text/javascript">
        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)

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

        function update() {

            gameState.ball.x += 5;

            if (gameState.cursors.up.isDown) {
            } else if (gameState.cursors.down.isDown) {
            } else {

1 Like