Question

我试图为每个磁贴进行悬停，但是当我使用tileArray [i] .x时，它会使用最后一个磁贴位置。而且我试图获得我正在徘徊的瓷砖的位置。

以下是我制作的代码。

for (x = 0; x < mapxtiles; x++) {
    for (y = 0; y < mapytiles; y++) {
        if(map[x][y].height != 'x') {
            i++;
            var topPos = (x * 16) + (y * 16) - 24;
            var leftPos = (y * 32) - (x * 32) + (mapxtiles * 32) - 32;


            var normalTileTexture = PIXI.Texture.fromImage("./assets/map/normal.png");
            var tileHoverTexture = PIXI.Texture.fromImage("./assets/map/hoverTexture.png");

            tileArray[i] = new PIXI.Sprite(normalTileTexture);

            tileArray[i].setInteractive(true);

            var tileHover = new PIXI.Sprite(tileHoverTexture);

            tileArray[i].mouseover = function(mouseData) {
                tileHover.position = new PIXI.Point(tileArray[i].x - 2, tileArray[i].y + 22);
                floorMap.addChild(tileHover);
            };

            tileArray[i].position = new PIXI.Point(leftPos, topPos);
            floorMap.addChild(tileArray[i]);
        }
    }
}

Answer 1

我是一个在你的循环结束时达到某个值的计数器。如果你将瓷砖悬停，它将始终具有最后一个值。解决方法是将代码包装在closure：

中

 (function (a) {
   tileArray[a].mouseover = function(mouseData) {
     tileHover.position = new PIXI.Point(tileArray[a].x - 2, tileArray[a].y + 22);
     floorMap.addChild(tileHover);
   };
 })(i);

我在这做什么：

我将事件处理程序包装在iife中，i作为参数，并在closure内将其作为a接收。这是出于说明目的，您当然可以将内部变量保留为i

的名称

它也更具可读性，只需将其移动到循环外声明的函数中：

 function helperfunction (tileArrayElement, tileHover, floorMap) {
   tileArrayElement.mouseover = function(mouseData) {
     tileHover.position = new PIXI.Point(tileArrayElement.x - 2, tileArrayElement.y + 22);
     floorMap.addChild(tileHover);
   };
 }

并在你的循环中调用它：

for (x = 0; x < mapxtiles; x++) {
    for (y = 0; y < mapytiles; y++) {
        if(map[x][y].height != 'x') {
            // your other code...

            helperfunction(tileArray[i], tileHover, floorMap);

            // your other code...
        }
    }
}

鼠标悬停在所有瓷砖上

1 个答案: