Javascript 如何检测phaser3中图像的点击_Javascript_Phaser Framework

Javascript 如何检测phaser3中图像的点击

javascript

Javascript 如何检测phaser3中图像的点击,javascript,phaser-framework,Javascript,Phaser Framework,我是phaser的新手，我正在尝试检测phaser3中几个图像上的点击。这对我来说已经成了一个两部分的问题。首先是检测对象上的单击，但即使我在屏幕上的任何其他位置单击，也会触发单击处理程序第二部分是，我在场景中有相同和多个图像，我只想在单个函数中检测每个图像上的单击，并检测单击的图像这是我的密码： <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net

我是phaser的新手，我正在尝试检测phaser3中几个图像上的点击。这对我来说已经成了一个两部分的问题。首先是检测对象上的单击，但即使我在屏幕上的任何其他位置单击，也会触发单击处理程序

第二部分是，我在场景中有相同和多个图像，我只想在单个函数中检测每个图像上的单击，并检测单击的图像

这是我的密码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser-arcade-physics.min.js"></script>
    <style media="screen">
      canvas {   display : block;   margin : auto;}
    </style>
</head>
<body>

    <script>
    var config = {
        type: Phaser.CANVAS,
        scale: {
            mode: Phaser.Scale.ScaleModes.FIT,
            parent: 'phaser-example',
            autoCenter: Phaser.Scale.CENTER_BOTH,
            width: 400,
            height: 640
        },
        // width: 400,
        // height: 640,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 10 }
            }
        },
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);
    var Bimages;

    function preload ()
    {
        this.load.setBaseURL('http://localhost:3000');
            
        this.load.image('sky', 'assets/skies/deepblue.png');
        this.load.image('tube1', 'assets/myassets/ballSort/tube.png');
        this.load.image('tube2', 'assets/myassets/ballSort/tube.png');
    }

    var numOfTestTubes = 5;

    var storeTubes = [];

    function create ()
    {
        ctx = this;
        this.add.image(400, 300, 'sky').scaleY = 1.2;
        var t1 = ctx.add.image(150, 300, 'tube1');
        t1.scaleY = 0.5;
        t1.scaleX = 0.5;
        var t2 = ctx.add.image(220, 300, 'tube2');
        t2.scaleY = 0.5;
        t2.scaleX = 0.5;

        t1.setInteractive();
        t2.setInteractive();

        t1.on('pointerdown', handleclick);
    }

    function update(){
    }

    function handleclick(pointer, targets){
      console.log("clicked0",pointer);
    }
    </script>
</body>
</html>


画布{显示：块；边距：自动；}
变量配置={
类型：Phaser.CANVAS，
比例：{
模式：Phaser.Scale.ScaleModes.FIT，
父级：'相位器示例'，
自动中心：Phaser.Scale.CENTER\U两者，
宽度：400，
身高：640
},
//宽度：400，
//身高：640，
物理学：{
默认值：“arcade”，
拱廊：{
重力：{y:10}
}
},
场景：{
预加载：预加载，
创建：创建，
更新：更新
}
};
var game=new Phaser.game（配置）；
var-Bimages；
函数预加载（）
{
this.load.setBaseURL（'http://localhost:3000');
this.load.image（'sky'，'assets/skies/deepblue.png'）；
this.load.image（'tube1'，'assets/myassets/ballSort/tube.png'）；
this.load.image（'tube2'，'assets/myassets/ballSort/tube.png'）；
}
var numOfTestTubes=5；
var=[]；
函数创建（）
{
ctx=这个；
这个.add.image（400300，'sky'）.scaleY=1.2；
var t1=ctx.add.image（150300，'tube1'）；
t1.scaleY=0.5；
t1.scaleX=0.5；
变量t2=ctx.add.image（220300，'tube2'）；
t2.scaleY=0.5；
t2.scaleX=0.5；
t1.setInteractive（）；
t2.setInteractive（）；
t1.on（'pointerdown'，handleclick）；
}
函数更新（）{
}
函数handleclick（指针、目标）{
console.log（“clicked0”，指针）；
}

有人能帮我吗？

游戏对象上的pointerdown事件侦听器与全局输入管理器上的pointerdown事件侦听器不同。如果您改为

this.input.on（'pointerdown'，…）

您将得到一个带有指针的回调，但也会得到一个已单击的游戏对象数组，如果未单击任何游戏对象，则会得到一个空数组。如果需要在相互重叠的输入对象上注册单击，可以使用#setTopOnly更改此行为。您可以检查对象的相等性，也可以检查对象的某些属性，如对象的名称或纹理关键点。我将stackblitz与矩形关联，但我知道它们的行为与图像的hitbox相同

游戏对象上的pointerdown事件侦听器与全局输入管理器上的pointerdown事件侦听器不同。如果您改为

this.input.on（'pointerdown'，…）