Search code examples
javascriptgame-developmentphaser-framework

How to your game detect that you had a Collisions


What I mean by how to your game detect that you had collisions is I want to make a function that checks if the Collisions state of two objects is true if it is true it will call a function if it is false it will not so in my case if the two boxes have a Collision it should call on a function to make the play button appear.

const gameState = {}

function preload() {
  // load our 'incredib/*  */le' sound here!
  this.load.image('intro1','/images/Screenshot 2023-10-20 10.20.39 AM.png');
  this.load.image('intro2','/images/Screenshot 2023-10-20 10.23.58 AM.png');
    this.load.audio('madcityintro', '/audio/a357cdfe-4a46-452f-a536-c41f8d57f35c.mp3')

}

function create() {
  // add our 'incredible' sound to our scene here!
  gameState.madcitysound = this.sound.add('madcityintro')
    gameState.madcitysound.play()
    gameState.intro1 =  this.physics.add.image(-100, 200, 'intro1')  
    gameState.intro1.setVelocityX(500);
    gameState.intro2 = this.physics.add.image(1230, 200, 'intro2') 
    gameState.intro2.setVelocityX(-500);
   gameState.block = this.physics.add.collider(gameState.intro1, gameState.intro2);
}
function update(){
}


const config = {
    type: Phaser.AUTO,
    width: 999,
    height: 500,
    backgroundColor: "0xFF3300",
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            enableBody: true,
          }
    },
    scene: {
      preload,
      create,
      update
    }
  };
  
  const game = new Phaser.Game(config);

It just did not work


Solution

  • You don't need to build the check yourself, the collider function has this features builtin. Checkout the documentation

    Simply add the function into the collider function as the third parameter.

    here a short demo:

    document.body.style = 'margin:0;';
    
    var config = {
        type: Phaser.AUTO,
        width: 536,
        height: 183,
        physics: {
            default: 'arcade',
            arcade: {            
                debug: true
            }
        },
        scene: {
            preload,
            create
        },
        banner: false
    }; 
    
    function preload(){
    this.load.image('image1', 'https://labs.phaser.io/assets/sprites/copy-that-floppy.png');
    }
    
    function create () {
    
       let counter = 0;
       let label = this.add.text(10,10, 'No Collision')
          .setOrigin(0)
    
       let img1 = this.physics.add.image(10, 90, 'image1').setScale(.5);
       let img2 = this.physics.add.image(400, 90, 'image1').setScale(.5);
       
       // set velocity to move images
       img1.setVelocityX(50);
       img2.setVelocityX(-50);
       
       // add collider for collision detection
       this.physics.add.collider(img1, img2, function(obj1, obj2){
            label.setText('We collided');
       });
    }
    
    new Phaser.Game(config);
    <script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>