Gesture swipe or tap to hit an object with random position

Phaser 3
1

I’m new to use phaser 3, I’m working to build a simple game can swipe or tap to hit many object with random position. how swipe can detect to hit an object, or how tap can detect to hit an object?

I’m use this plugin
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/gesture-swipe/
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/gesture-tap/

or is it easier than the plugin above?

Here’s my piece of code :

For Swipe

const stageOneScene = new Phaser.Class({
...
onEvent: function (param) {
    this.re_roll            = false;

    this.onRandom();

    if ( this.arr_spawn.position.includes( this.rand_position ) == true ) {
        this.re_roll = true;
    }
    
    while( this.re_roll == true ) {

        this.onRandom();

        if ( this.arr_spawn.position.includes( this.rand_position ) == false ) {
            this.re_roll = false;
        }
        
    }

    this.delayLoop          = this.resource.timer[ this.rand_timer ] * 1000;

    var result              = {
        timer : this.resource.timer[ this.rand_timer ],
        monster : this.resource.monster[ this.rand_monster ],
        position : {
            x : this.resource.position[ this.rand_position ].x,
            y : this.resource.position[ this.rand_position ].y,
        },
        speed : this.resource.speed[ this.rand_speed ],
    };

    this.monster = this.physics.add.image( result.position.x , result.position.y , result.monster.source );
    this.monster.setSize(180, 260, true);
    this.monster.displayWidth = 200;
    this.monster.scaleY = this.monster.scaleX;

    this.physics.moveToObject( this.monster, this.diamond, result.speed );

    this.overlapDiamond( this.monster, this.diamond, this.resource.monster[ this.rand_monster ] );

    this.arr_spawn.position.push( this.rand_position );
    this.arr_spawn.monster.push( this.monster );

    if ( this.arr_spawn.position.length > 8 ) {
        this.arr_spawn.position.shift();
    }

    this.numb++;
},
create: function (data) {
    if ( env.debug == true ) console.log('[Stage One] - create');

    const bg_main = this.add.image(0, 0, 'bg_main');
    bg_main.displayHeight = 600;
    bg_main.scaleX = bg_main.scaleY;
    bg_main.setOrigin(0);

    this.barTop();

    this.diamond = this.physics.add.sprite( 400, 300, 'diamond_01');
    this.diamond.setImmovable(true);
    this.diamond.setSize(100, 100, true);

    this.delayMonster = this.time.addEvent({
        delay: this.delayLoop,
        callback: this.onEvent,
        args: [],
        callbackScope: this,
        repeat: this.total_monster.spawn,
    });

    this.swipeInput = this.rexGestures.add.swipe({ enable: true, velocityThreshold: 1000 })
        .on('swipe', function (swipe) {
            // hit
        }, this);

},
...
});

For Tap

const stageTwoScene = new Phaser.Class({
...
onEvent: function (param) {
    this.re_roll            = false;

    this.onRandom();

    if ( this.arr_spawn.position.includes( this.rand_position ) == true ) {
        this.re_roll = true;
    }
    
    while( this.re_roll == true ) {

        this.onRandom();

        if ( this.arr_spawn.position.includes( this.rand_position ) == false ) {
            this.re_roll = false;
        }
        
    }

    this.delayLoop          = this.resource.timer[ this.rand_timer ] * 1000;

    var result              = {
        timer : this.resource.timer[ this.rand_timer ],
        monster : this.resource.monster[ this.rand_monster ],
        position : {
            x : this.resource.position[ this.rand_position ].x,
            y : this.resource.position[ this.rand_position ].y,
        },
        speed : this.resource.speed[ this.rand_speed ],
    };

    this.monster = this.physics.add.image( result.position.x , result.position.y , result.monster.source );
    this.monster.setSize(180, 260, true);
    this.monster.displayWidth = 200;
    this.monster.scaleY = this.monster.scaleX;

    this.physics.moveToObject( this.monster, this.diamond, result.speed );

    this.overlapDiamond( this.monster, this.diamond, this.resource.monster[ this.rand_monster ] );

    this.arr_spawn.position.push( this.rand_position );
    this.arr_spawn.monster.push( this.monster );

    if ( this.arr_spawn.position.length > 8 ) {
        this.arr_spawn.position.shift();
    }

    this.numb++;
},
create: function (data) {
    if ( env.debug == true ) console.log('[Stage Two] - create');

    const bg_main = this.add.image(0, 0, 'bg_main');
    bg_main.displayHeight = 600;
    bg_main.scaleX = bg_main.scaleY;
    bg_main.setOrigin(0);

    this.barTop();

    this.input.addPointer(9);

    this.diamond = this.physics.add.sprite( 400, 300, 'diamond_02');
    this.diamond.setImmovable(true);
    this.diamond.setSize(100, 100, true);

    this.delayMonster = this.time.addEvent({
        delay: this.delayLoop,
        callback: this.onEvent,
        args: [],
        callbackScope: this,
        repeat: this.total_monster.spawn,
    });

    this.rexGestures.add.tap(this.monster, { taps: 1 })
        .on('tap', function (tap) {
            // hit 
        }, this);

},
...
});