test.html

<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser-arcade-physics.min.js"
        integrity="sha512-3ggJ43PNjH5aQCsd8/CBKa18RPMR8OaQX0JvHCZ4iJO/2Jk9mLdVZYVGFVUJmIoKeoF9Hg1pVgmROv9+xpgQlQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script defer>
        var ball1;
        var ball2;
        var config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            parent: 'phaser-example',
            physics: {
                default: 'arcade',
                arcade: {
                    debug: true,
                    gravity: {
                        x: 0,
                        y: 0
                    }
                }
            },
            scene: {
                preload: preload,
                create: create
            }
        };

        var game = new Phaser.Game(config);

        function preload() {
            this.load.image('wizball', 'files/img/blue-pusher.png');
        }

        function create() {
            ball1 = this.physics.add.image(100, 240, 'wizball');
            ball2 = this.physics.add.image(700, 240, 'wizball');

            ball1.setCircle(46).setMass(1);
            ball2.setCircle(56).setMass(20);

            ball1.setScale(0.5);

            ball1.setCollideWorldBounds(true);
            ball2.setCollideWorldBounds(true);

            ball1.setBounce(1);
            ball2.setBounce(1);

            ball1.setVelocity(150);
            ball2.setVelocity(-500, 300);

            this.physics.add.collider(ball1, ball2);
        }

    </script>
</head>

<body>

</body>

</html>