从数组中绘制图像

时间:2013-03-12 14:25:18

标签: javascript html5 canvas map

我目前正在使用一组图像加载到数组中来绘制一个tilemap。

我已经将瓷砖定义为这样的对象:

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的瓷砖地图。我需要能够将每个图块称为单个对象。

如果我没有意义,那就喊出来。

1 个答案:

答案 0 :(得分:0)

如果您创建所有这样的图块:

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

然后他们共享相同的gfx对象。

您应该像这样更改初始化:

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