javascript - 从数组中绘制图像

标签 javascript html canvas dictionary

我目前正在使用一组加载到数组中的图像来绘制瓦片 map 。

我将磁贴定义为这样的对象:

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

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

然后我用几个通过调试器正确显示的图 block 对象填充了一个数组。

现在,当我开始使用这段代码绘制图像时:

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 的图 block map 。而且我需要能够将每个图 block 称为单个对象。

如果我说的不对,请大声说出来。

最佳答案

如果您像这样创建所有图 block :

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

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

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

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

关于javascript - 从数组中绘制图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15363917/

相关文章:

javascript - 更改 HTML 标签中的 href 不起作用

javascript - 使用头部图像文件修改 HTML5 贪吃蛇游戏

javascript - 我可以在 JavaScript 的 switch 语句中处理 "undefined"case 吗?

php - 当 PHP 类动态调整图像大小时,Zurb Foundation 中的 Interchange.js 出现问题

html - 如何提供独立于文件类型的缩略图形式的文档预览

javascript - 如何在 Canvas 上绘制的图像上分配onclick?

angular - 下载为 PDF 时 Canvas 图表模糊

javascript - 试图完全理解 JavaScript 提升

javascript - jquery中如何结合打印和删除空输入?

html - 如何使用 HTML 定位 "box"的 div