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 cat1;
var cat2;
var cat0;
var player;
var enemy;
console.clear()
config = {
	type: Phaser.CANVAS,
	width: 400,
	height: 400,
	backgroundColor: '#0d1018',
	physics: {
		default: 'matter',
		matter: {
			debug: true,
			gravity: {
                y: 3
      },
    }
	},
	callbacks: {
		postBoot: function (game) {
			//game.canvas.style.width = '100%';
			//game.canvas.style.height = '100%';
		}
	},
	scene: {
		preload: preload,
		create: create,
    update: update,
	}
};

var game = new Phaser.Game(config);

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

function create() {
  this.matter.world.setBounds(0, 0, 400, 280,100);

	cat0 = this.matter.world.nextCategory();
	cat1 = this.matter.world.nextCategory();
	cat2 = this.matter.world.nextCategory();
	//this.matter.world.setBounds()
	// player is green
	player = this.matter.add.image(200, 300, 'player');
	//enemy is red
	enemy = this.matter.add.image(200, 100, 'enemy');
        //player.setCollideWorldBounds();

	//collision category
	enemy.setCollisionCategory(cat1);
  player.setCollisionCategory(cat2);
	//enemy.setCollidesWith([cat2,cat1]);

  this.matter.world.on('collisionstart', function (event) {
  	if (event.pairs[0].bodyA.gameObject){
    if (event.pairs[0].bodyB.gameObject.texture.key == "enemy") {
			if (event.pairs[0].bodyA.gameObject.texture.key == "player") {
				console.log('player is hit')
				event.pairs[0].bodyA.gameObject.alpha =.5
				this.remove(event.pairs[0].bodyA)
      	//event.pairs[0].bodyA.gameObject.setPosition(0,0)
				//this.add(event.pairs[0].bodyA)


      // event.pairs[0].bodyA.gameObject.setCollisionCategory(cat0);
                //event.pairs[0].bodyA.gameObject.setCollisionCategory(cat0);

        //HERE MY PROBLEM i want that the player collide with nothing so the enemy normaly pass trough but can't go outside the screen and that 's the problem'
       ...