html - 等距画布/SVG HTML 5 图像

Question

我正在寻找一些教程，我如何为 RTS 游戏目的在等距地图中制作画布或 SVG（不确定是哪个）图像。图像只能在可见部分上单击，否则用户应该单击背景图像。它可以通过自动检测 PNG 的透明区域或颜色叠加来完成。我不知道哪个是最好的。

谢谢。

Answer 1

如果您不改变场景的视角，那么我会使用 SVG，因为它们是 DOM 元素（开箱即用可点击），您可以将点击区域限制为元素的非透明部分. 一个非常好的 SVG 库是 RaphaelJS。

画布是另一种动物。您在画布上绘制的矢量/栅格不会“保留”，这意味着与 SVG 不同，您无法指示刚刚在画布上绘制的框移动。相反，您负责在您想要的位置重新绘制该框。在画布上绘制完所有内容后，它基本上就变成了一个大位图。如果您的场景的视角会发生变化，您可能需要画布最擅长的：速度和灵活性。使用矩阵变换，您可以进行 2D 移动、旋转、缩放和倾斜。由于您负责变换矩阵，因此您还可以模拟 3D 运动。如果您的用户有非 IE 浏览器，那么您也有 WebGL，它是一个完整的 3D 成像系统。这种能力带来了复杂性，因此您可能会查看许多可用于画布的游戏开发平台。

使用这两个元素，您可以使用 websockets 来执行 RTS（当然，对于不支持 websockets 的浏览器来说，这会降级为长轮询）。