Skip to content

How to detect overlap in Phaser.js?

I am new to Phaserjs, and I am trying to make a shooting game. I want the damage function to fire when a bullet touches plane2, that is the green plane. Can somone please tell me what am I doing wrong here? Here is my code:

 var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 800,
        physics: {
            default: 'arcade',
            arcade: {
            gravity: {y: 0}   
        scene: {
            preload: preload,
            create: create,
            update: update
    var plane1
    var plane2
    var hp;
    var botHp;
    function preload (){
        this.load.image("bg", "bg.jpg");
        this.load.image("plane1", "plane1.png");
        this.load.image("plane2", "plane2.png");
        this.load.image("bullet", "bullet.png");
    function create (){
       this.background = this.add.image(400, 400, "bg");
       plane1 =  this.physics.add.sprite(400,700,"plane1");
       plane2 =  this.physics.add.sprite(400,100,"plane2");
       plane1.enableBody = true;
    function update(){ 
      keys = this.input.keyboard.createCursorKeys();
      if (keys.left.isDown) {
      plane1.x = plane1.x - 7.5;
      }else if(keys.right.isDown){
      plane1.x = plane1.x + 7.5;
      }else if({
      var bullet = this.physics.add.sprite(plane1.x,600,"bullet");
      bullet.enableBody = true;
        bullet.y =  bullet.y - 25;
    function damage(){
        console.log("less HP")
    var game = new Phaser.Game(config);
<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src=""></script>
    <script src=""></script>
    <div id="game"></div>
    <script defer src="script.js"></script>

Here is the link to the game if needed


This works:


but its kinda laggy. Id try to destroy bullet on impact and i also found: