使用Phaser JS在Javascript循环中每次点击最后一个元素

Question

虽然我认为这个问题的核心是我缺乏对 JS 的理解，但我正在使用 Phaser 制作游戏。

我正在遍历 Phaser 容器并希望在每个子精灵上应用点击处理程序，但是当我对任何精灵执行点击时，它总是 return 最后一个子精灵。

我在 Stack Overflow 上尝试了各种建议，例如：JavaScript closure inside loops – simple practical example

但永远无法点击 return 除最后一项以外的任何内容。

一个例子：

let items = //my container with 4 child sprites to click on
let i = 0;
item.list.forEach(function(obj) {
    obj.setInteractive();
    (function(i) {
        obj.on('pointerdown', function(i){
            console.log(i);
        }.bind(this, i));
    })(i);
    i++;
});

在这个例子中，我点击的每个精灵输出“3”到控制台，当它应该输出 0、1、2 或 3 时，取决于被点击的是哪个。

Answer 1

你的代码有点复杂。如果您只想添加一个 EventHandler，则不需要额外的闭包。只需检查下面的代码，以获得更精简的方法

工作示例：

// Minor formating for Whosebug
    document.body.style = "display: flex;flex-direction: column;";    

    var config = {
        type: Phaser.AUTO,
        width: 536,
        height: 183,
        scene: {
            create
        },
        banner: false
    }; 

    function create () {
        let items = this.add.container(10, 10);
        items.add(this.add.sprite(20, 20, 'sprite'));
        items.add(this.add.sprite(20, 60, 'sprite'));
        items.add(this.add.sprite(20, 100, 'sprite'));
        items.list.forEach(function(obj, index) {
            obj.setInteractive();
            obj.on('pointerdown', function(){
                console.log(`You clicked: sprite with index ${index}`);
            }, this); // although I don't know why you would want do bind this "this"
       });
    }

    var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>

Here the docs to the forEach method https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach, explains the index used

Here the docs to the Phaser on listener https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Sprite.html#on__anchor, explains the passing of the context.

使用Phaser JS在Javascript循环中每次点击最后一个元素

Getting last element on click every time in Javascript loop with Phaser JS

javascript

phaser-framework