JSFiddle - React, Tailwind, and code Playground

by espace3d

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.16.2/phaser.min.js"></script>
<div id='phaser-example'></div>

JavaScript

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1b1464',
    parent: 'phaser-example',
    physics: {
        default: 'matter',
        matter: {
            gravity: {
                x: 0,
                y: 0
            }
        }
    },
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
	this.load.image("block", "https://i.postimg.cc/KvY7DVGx/player.png");
}

function create ()
{
    var blockA = this.matter.add.image(499, 300, 'block').setBounce(1).setFriction(0).setStatic(true).setSensor(true);

    var blockB = this.matter.add.image(600, 300, 'block').setStatic(true).setSensor(true);;

   // blockA.setVelocityX(10);

    this.matter.world.on('collisionstart', function (event, bodyA, bodyB) {

        bodyA.gameObject.setTint(0xff0000);
        bodyB.gameObject.setTint(0x00ff00);

    });
    window.setTimeout(()=>{
        blockA.setPosition(530,250)
    },1000)
}