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;

config = {
	type: Phaser.CANVAS,
	width: 400,
	height: 400,
	backgroundColor: '#0d1018',
	physics: {
		default: 'matter',
		matter: {
			debug: true,
			gravity: {
                y: 1
      },
    }
	},
	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() {
	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');

	//collision category
	enemy.setCollisionCategory(cat1);
  player.setCollisionCategory(cat2);
	enemy.setCollidesWith([cat2]);
  
  this.matter.world.on('collisionstart', function (event) {
  	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 =.1
        //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'
        event.pairs[0].bodyA.gameObject.setCollidesWith([cat0])
			}
   }		
	})
}

function update() {
}