Question

首先对我正在研究的项目进行一点阐述。我已经开始为我正在进行的2D游戏构建一个“地图制作者”。该项目只是为了好玩，并且到目前为止已被证明是学习新事物的好方法。

我最近向一位朋友展示了我的工作地图制作者代码，他建议如果我将项目重组为更加OOR，我现在正在尝试将其重复使用。

我遇到的问题是当我向地图添加一个'Guild'实例时，第一个工作正常，但第二个导致类型错误让我头疼！

我将从下面的不同文件中发布所有相关代码，但整体结构如下：

Map.js = Map类文件，用于设置地图整体大小和迭代（和放置）地图对象的容器。

MapObject.js =简单地图对象（如墙）的类文件，包含位置和图标属性。

Guild.js =类文件，扩展了MapObject.js，这就是我的问题所在，添加了一个额外的'MapIcon'，还有其他功能，如关卡和名称等。

map-maker.js =用于生成地图制作者页面的主文件，利用上述类文件创建地图。

以下是用于在我的地图上创建“公会”实例的代码：

map-maker.js（创建地图/地图对象/公会实例）

// Initialise a new instance of map class from Map.js using the user 
provided values for #mapX and #mapY.
var currentMap = new Map(XY,40);

// Get the user box volume * map boxsize from Map.js
currentMap.calcDimensions();

 // 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));

}

....

 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);
            }else {
            createMapObject(currentFloor.position.x,currentFloor.position.y,currentFloor);
            }
        console.log("Map object created at - X:"+currentFloor.position.x+" Y:"+currentFloor.position.y);
        }
        currentFloor = [];
        highlightTools();
        break;
}

Guild.js（构造函数和分配地图图标）

class Guild extends MapObject {
constructor(x,y,floor) {
    super(x,y,floor);
    this.levels = [];
}

mapIcon() {
    this.mapIcon = new Image();
    this.mapIcon.src = "../images/mapSprites/obj-1.png"
    return this.mapIcon;
}
}

MapObject.js（位置设置和构造函数）

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

wallFloorIcons(floor) {
this.img = new Image();
this.name = "";
this.name += (floor.wallNorth) ? 'n' : ''; 
this.name += (floor.wallEast) ? 'e' : '';
this.name += (floor.wallSouth) ? 's' : '';
this.name += (floor.wallWest) ? 'w' : '';

this.name = 'wall-'+this.name+'.png';

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

getIcon() {
    return this.img;
}
}

Map.js（处理给定位置的对象并绘制画布）

class Map {

// Map Width / Height and number of boxes. Used to generate map and zoom level.
constructor(wh, boxSize) {
    this.size = wh;
    this.width = wh[0];
    this.height = wh[1];
    this.boxSize = boxSize;
    this.objects = [];
    this.boxes = wh[0];
}

// Calculates the width and height * boxSize for rendering the canvas.
calcDimensions(){
    this.realX = Math.floor(this.width * this.boxSize);
    this.realY = Math.floor(this.height * this.boxSize);
    this.realX = parseInt(this.realX,10); 
    this.realY = parseInt(this.realY,10);
    this.realXY = [
        this.realX,
        this.realY
    ];
    return this.realXY;
}

// Draws the canvas, grid and adds the objects that belong to the map.
drawMap(){
    var self = this;

    self.canvas = document.getElementById("canvas");
    self.c = self.canvas.getContext("2d");

    self.background = new Image(); 
    self.background.src = "../images/mapSprites/oldPaperTexture.jpg"; 

    // Make sure the image is loaded first otherwise nothing will draw.
    self.background.onload = function(){
        self.c.drawImage(self.background,0,0);
        self.fillMap(); 
    }
}

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 mapObjects = self.objectsAtPosition({x:floor.position.x, y:floor.position.y})
                        for (var mapObject of mapObjects) {
                            this.c.drawImage(mapObject.getIcon(), x, y, self.boxSize, self.boxSize);
                            console.log(mapObject);
                            if(mapObject instanceof Guild){
                                console.log(mapObject);
                                this.c.drawImage(mapObject.mapIcon(), x, y, self.boxSize, self.boxSize);
                            }
                        }
                    }
                }     
            }
        }
    }
}

deleteObject(pos){
    this.objectsAtPosition(pos);
    for( var i = 0; i < this.objects.length; i++){
        if(this.objects[i] == this.objs){
            delete this.objects[i];
            this.objects.splice(i,1);
        }
    }
}

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;
}
}

当我运行代码时，这是我的错误：

Uncaught TypeError: mapObject.mapIcon is not a function
at Map.fillMap (Map.js:70)
at Image.self.background.onload (Map.js:39)

在我添加1个公会然后尝试添加任何其他地图对象后出现错误。公会或其他。

对不起，如果这个问题有点模糊，我还在学习（你可以看到：p）。

感谢您的时间！ Earl Lemongrab

Answer 1

最终得到了朋友的解决方案。

问题在于我重新分配了this.mapIcon = new Image()，所以它在第二次被召唤时爆炸了。

因为没有发现它而感到非常愚蠢。

感谢大家的帮助。

类型错误 - 引用Javascript类

1 个答案: