Question

如果标题毫无意义，请道歉。我让自己搞得一团糟，但我会试着详细说明下面的问题。

我有三个Javascript类：

一个js（包含类映射） B js（包含类mapObject） C js（地图制作者的逻辑）

在C类中，我创建了一个map实例，它是一个带有网格布局的画布。

用户可以单击地图并使用热键添加mapObject实例。

现在我正在尝试显示mapObject图标，并且完全混淆了如何：

地图创作＆amp; MapObject创建代码（C js）：

 case 13: // Enter Key (Submit)
        unhighlightTools();
        currentMap.drawMap();
        if(currentFloor != null){
            currentFloor.hasFloor = true;
            if(currentFloor.tileName == "Guild"){
                createGuildObject(currentFloor.position.x,currentFloor.position.y,currentFloor);
            }
            console.log("Map object created at - X:"+currentFloor.position.x+" Y:"+currentFloor.position.y);
            createMapObject(currentFloor.position.x,currentFloor.position.y,currentFloor);
        }
        currentFloor = null;
        highlightTools();
        break;
}

// Create a Map Object and push it to the currentMap with its position.
function createMapObject(x,y,floor){
currentMap.objects.push(new MapObject(x,y,floor));
}

// Create a Guild Object (extension of Map Object) and push it to the currentMap with its position.
function createGuildObject(x,y,floor){
currentMap.objects.push(new Guild(x,y,floor));
}

在MapObject（b js）中定义地图图标

class MapObject {
constructor(x,y,floor) {
    this.position = {x, y};
    this.icon = this.wallFloorIcons(floor);
 }

 wallFloorIcons(floor) {
    var self = this;
    self.img = new Image();

    self.name = <code that creates the name>
    self.name = 'wall-'+self.name+'.png';

    if(self.name == 'wall-.png'){
        self.img.src = "../images/mapSprites/floor.png";
    }else {
        self.img.src = "../images/mapSprites/"+self.name;
    }

    console.log(self.img);
    return self.img;
 }

这就是让我感到困惑的一点。使用Map类中的MapObject图标（a js）：

fillMap(){
    var self = this;

    self.c.lineWidth = 1;
    self.c.strokeStyle = 'black';
    self.c.fillStyle = "rgba(255, 255, 255, 0.2)";

    for (var row = 0; row < self.boxes; row++) {
        for (var column = 0; column < self.boxes; column++) {
            var x = column * self.boxSize;
            var y = row * self.boxSize;

            self.c.beginPath();
            self.c.rect(x, y, self.boxSize, self.boxSize);
            self.c.stroke();
            self.c.closePath();

            for (var i=0; i<self.objects.length; i++) {
                var floor = self.objects[i];
                if (floor.position.x == column && floor.position.y == row) {  
                    if (self.objectsAtPosition({x:floor.position.x, y:floor.position.y}) != null) {
                        var j = self.objectsAtPosition({x:floor.position.x, y:floor.position.y});
                        console.log(j.icon);
                        this.c.drawImage(self.objectsAtPosition({x:floor.position.x, y:floor.position.y}).getIcon(),x,y, self.boxSize, self.boxSize);
                    }
                }     
            }
        }
    }

在最后的if语句中，我在a.js中使用此代码检查我的位置是否有任何对象：

objectsAtPosition(position) {
    var objs = [];
    for (var o of this.objects) {
        if (o.position.x == position.x && o.position.y == position.y) {
            objs.push(o);
        }
    }
    return objs;
}

总结一下......

我正在创建一个类的实例，将其推送到另一个类中的数组。然后卡住试图从第二个类的实例中获取图标。

我的console.log（j.icon）返回undefined，我似乎无法从我的MapObject中获取任何细节，但是如果我是console.log（j）那么我确实在控制台中看到了MapObject所有细节。

我仍然是新人，我确信我正在弄它，所以请放轻松我：p

谢谢！ Lemongrab

Answer 1

objectsAtPosition()返回一个对象数组，而数组没有icon属性。也许你想迭代self.objectsAtPosition({x:floor.position.x, y:floor.position.y})：

const mapObjects = self.objectsAtPosition({x:floor.position.x, y:floor.position.y})
for (const mapObject of mapObjects) {
    this.c.drawImage(mapObject.getIcon(), x, y, self.boxSize, self.boxSize);
}

其他一些建议：

您可以使用{x:floor.position.x, y:floor.position.y}。

floor.position

objectsAtPosition()

Array.filter()

return this.objects.filter(o => o.position.x == position.x && o.position.y == position.y)
除非您希望能够在方法内的匿名函数内访问var self = this的值，否则无需执行this。

在另一个类

1 个答案: