我们正在开发一款基于 2D 棋盘坐标开发和定义的 Javascript 游戏。
我们正在尝试将我们当前拥有的 X、Y 坐标（即 0,0）转换为相应的 ISO 坐标，以便与 crafty.js 一起使用。
我们这样做的原因是因为服务器随机生成一个游戏板，它是一个传统的 15x15 空间网格，我们想用等距 3D 渲染它，但是狡猾的 JS 使用了一个奇怪的坐标系，从屏幕左上角。
我们如何将 2D 网格映射到以下图像，左上角的棋盘空间映射到 (0,6) 或任何一个？注释？
【问题讨论】：
标签： javascript algorithm coordinates
我也在狡猾地工作，试图制作一个 17x17 的棋盘。目前，我只是使用地图将每个位置转换为相应的狡猾位置。我意识到它非常hacky，可能很慢，但老实说我没有时间。
我注意到上图中的数字有点偏离。下面是对 Crafty 在这种情况下如何工作的更好的可视化。白色数字是我从服务器获取的原始数据，黑色数字是 Crafty 渲染此板所需的：
我基本上已经把它算出一个有用的方程（但只在创建地图时有用）：
Even rows (starting at 0)
- y (row) = starting at row number (base 0) then increment by 1 for each x (column)
- x (col) = previous odds's first x, then follow pattern: +0, +0, +1, +1, +2, +2...
Odd rows (starting at 0)
- y (row) = starting at row number (base 0) then increment by 1 for each x (column)
- x (col) = +1 to previous even's first x, then follow pattern: +0, +1, +1, +2, +2, +3...
所以我在下面有一张似乎可以工作的地图（这是 rawToCrafty 地图）：
//Row 0
"00.00": { "y": 0, "x": 8 }
"01.00": { "y": 1, "x": 8 }
"02.00": { "y": 2, "x": 9 }
"03.00": { "y": 3, "x": 9 }
"04.00": { "y": 4, "x": 10 }
"05.00": { "y": 5, "x": 10 }
"06.00": { "y": 6, "x": 11 }
"07.00": { "y": 7, "x": 11 }
"08.00": { "y": 8, "x": 12 }
...
是的，有更好的方法，但这是蛮力方法。祝你好运！
【讨论】：
这个通用概念的名称是Projection。
要将游戏板绘制到屏幕上，您需要从游戏板坐标投影到屏幕坐标。
要获取鼠标点击位置并确定点击了棋盘上的哪个位置，您需要从屏幕坐标投影到游戏棋盘坐标。
这两个投影是相反的。
在游戏编程中执行这些投影的常用方法是使用矩阵。
【讨论】：
如果我理解正确，您希望将以下输入映射到以下输出：
输入：
0,0 0,1 0,2 0,3 0,4 0,5
1,0 1,1 1,2 1,3 1,4 1,5
2,0 2,1 2,2 2,3 2,4 2,5
3,0 3,1 3,2 3,3 3,4 3,5
4,0 4,1 4,2 4,3 4,4 4,5
5,0 5,1 5,2 5,3 5,4 5,5
输出：
0,6 0,5 1,4 1,3 2,2 2,1
0,7 1,6 1,5 2,4 2,3 3,2
1,8 1,7 2,6 2,5 3,4 3,3
1,9 2,8 2,7 3,6 3,5 4,4
2,10 2,9 3,8 3,7 4,6 4,5
2,10 3,10 3,9 4,8 4,7 5,6
我的矩阵很生锈。我相信会有一种整洁的方式来使用它们来做到这一点，但我会给你我的老套答案。
假设这不是一个更普遍问题的实例，您可以执行以下操作：
function mapCoords(xIn,yIn){
return {
x:Math.floor((xIn+yIn)/2),
y:6+xIn-yIn
}
}
将进行概括，并以更优雅的方式进行，但据我了解，这可以解决您的示例。
【讨论】：
//笛卡尔到等距：
isoX = cartX - cartY
isoY = (cartX + cartY) / 2
//等距到笛卡尔：
cartX = (2 * isoY + isoX) / 2
cartY = (2 * isoY - isoX) / 2
【讨论】：