Javascript 如何存储信息以正确显示构成单个游戏角色/对象/NPC的多个图像？

对不起，这个标题让人费解，我不太清楚怎么用词

在最近发现HTML5画布元素的威力后，我刚刚开始从事2D游戏开发。我正在做我的第一个基本项目来学习诀窍。这个游戏将允许玩家加入一个游戏，基本上在一张地图上用坦克战斗。杀戮越多，他们可以解锁和使用的坦克就越多

但是，我有点被困在如何将坦克引入游戏中（至少是正确的）。每辆坦克都有三个图像：坦克的车身、炮塔和坦克开火时将被吸引到游戏中的坦克炮弹。当然，当游戏加载坦克时，它需要知道放置这些图像的正确位置。所有的坦克都有不同的尺寸，所以我不能告诉游戏每次都在同一地点装载身体和炮塔。当坦克的车身被绘制到画布上时，炮塔当然需要相对于相应的车身绘制

那么我应该如何存储这些信息呢？我是否将硬编码对象放入代码中，该代码包含每个坦克的炮塔偏移列表

---

我希望我能清楚地解释我的问题。如果您有任何问题，请询问。：）处理多个大小精灵的一种方法是使用每个精灵的中心点而不是通常的左上角来定义每个精灵的位置。

这样一来，在定位油箱时，每个油箱的大小就无关紧要了

要实施中心点定位，您可以：

• 平移到地图上所需的位置
• 然后绘制偏移量为-width/2和-height/2的图像

例如，

假设你的坦克基地精灵是38像素宽和59像素高

然后，要绘制以x/y==[100100]为中心的坦克基地，可以执行以下操作：

ctx.translate(100,100);
ctx.drawImage(tankBase,-38/2,-59/2);

---

这里有一个演示：

每个储罐尺寸的膨胀偏移列表，或者您只需将其作为属性存储在储罐本身的“尺寸”属性旁边。您所说的“将其作为属性存储在储罐本身”是什么意思？谢谢您的回复！将其存储在存储储罐对象的尺寸、类型等的位置。也许你应该展示一些你现有的代码。如果我必须对每一帧使用

还原

和

保存

，这难道不是真正的资源密集型吗？在制作中，你可以用translate（-x，-y）代替这是一个更新的演示，它使用坦克对象来存储坦克基地和坦克炮塔位置的信息。它还使用负转换而不是保存/还原来撤消转换。你可能想旋转炮塔，但是如果你不需要旋转，你可以用纯数学的格式来做所有的变换。注意：画布转换可能非常快，因为当GPU可用时，它们是GPU加速的。祝你的学习项目好运！