Javascript - how to your game detect that you had a Collisions

hackerhq
October 24, 2023
200 views
0 votes
2 Answers

what i mean by how to your game detect that you had a Collisions is i whant to make a function that checks if the Collisions state of two objets 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 boxs have a Collision it schold call on a function to make the play buttion apperir

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

Answers

Chosen as BEST ANSWER

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>

(Edit)

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – how to your game detect that you had a Collisions

Answers