从数组中绘制图像答案

【问题标题】：Drawing images from an array从数组中绘制图像
【发布时间】：2013-02-28 02:59:45
【问题描述】：

我目前正在使用一组加载到数组的图像来绘制瓷砖地图。

我已将图块定义为这样的对象：

function tile(gfx){
this.tile = gfx;

this.drawSelf = function(x,y)
this.tile.x = x;
this.tile.y = y;
}

然后我用几个 tile 对象填充了一个数组，这些对象通过调试器正确显示。

现在，当我开始使用此代码绘制图像时：

for (var x = 0; x < mapArray.length; x++){
xN = 183 + (50*x);
mapArray[x].drawSelf(xN, 134);
gameStage.addChild(mapArray[x].tile);
mapArray[x].tile.visible = true;
}

问题是数组中的所有“对象”都接收相同的 x 和 y 坐标。所以我怀疑数组中的每个对象都相互引用。

我要做的是创建一个 20x10 的瓷砖地图。而且我需要能够将每个图块称为单个对象。

如果我说的不合理，请大声喊叫。

【问题讨论】：

标签： javascript html canvas map

【解决方案1】：

如果您像这样创建所有图块：

var gfx = new ...
for (...) {
    mapArray[x].tile = new tile(gfx);
}

那么它们都共享同一个gfx 对象。

你应该像这样改变你的初始化：

for (...) {
    var gfx = new ...
    mapArray[x].tile = new tile(gfx);
}

【讨论】：