点击检测在2D等距网格？ [英] Click detection in a 2D isometric grid?
问题描述
我一直在做Web开发多年了，我慢慢变自己参与到游戏开发和我目前的项目，我有这个轴测图，在这里我需要使用算法来检测该领域正在被点击。这是所有支持JavaScript的浏览器的方式。
I've been doing web development for years now and I'm slowly getting myself involved with game development and for my current project I've got this isometric map, where I need to use an algorithm to detect which field is being clicked on. This is all in the browser with Javascript by the way.
地图
它看起来像这，我已经添加了一些数字来显示你的域结构（砖）和它们的ID。所有的领域都有着中心点（数组x，y），它的四个角都是以画当。
正如你可以看到它不是一个钻石形状，但是锯齿形图，有没有角（往下看），这就是为什么我无法找到答案我考虑到所有文章和计算通常是基于一个菱形同的角度。
The map
It looks like this and I've added some numbers to show you the structure of the fields (tiles) and their IDs. All the fields have a center point (array of x,y) which the four corners are based on when drawn.
As you can see it's not a diamond shape, but a zig-zag map and there's no angle (top-down view) which is why I can't find an answer myself considering that all articles and calculations are usually based on a diamond shape with an angle.
数字
这是一个动态图和所有大小和数量可以改变，以产生新的地图。
我知道这是不是很多数据，但是地图是根据地图和字段大小产生。
- 地图大小：X：800 Y：400
- 字段大小：80×80（角之间）
- 所有的字段中心位置（x，y）的
The numbers
It's a dynamic map and all sizes and numbers can be changed to generate a new map.
I know it isn't a lot of data, but the map is generated based on the map and field sizes.
- Map Size: x:800 y:400
- Field Size: 80x80 (between corners)
- Center position of all the fields (x,y)
目标
拿出一个算法，它告诉客户端（游戏）的字段鼠标位于在任何给定的事件（点击，移动等）。
The goal
To come up with an algorithm which tells the client (game) which field the mouse is located in at any given event (click, movement etc).
免责声明
我也想提一提，我已经拿出一个可行的解决方案我自己，但我100％肯定它可以写在一个更好的方法（我的解决方案涉及到很多嵌套if语句和循环），而这为什么我问这里。
Disclaimer
I do want to mention that I've already come up with a working solution myself, however I'm 100% certain it could be written in a better way (my solution involves a lot of nested if-statements and loops), and that's why I'm asking here.
这里的我的解决方案，我基本上找到在角落广场为例最近4已知位置，然后我得到的基础上，最近2场之间的最小平方我的结果。这是否有什么意义？
Here's an example of my solution where I basically find a square with corners in the nearest 4 known positions and then I get my result based on the smallest square between the 2 nearest fields. Does that make any sense?
问，如果我错过了一些东西。
Ask if I missed something.
推荐答案
下面是我想出了，
function posInGrid(x, y, length) {
xFromColCenter = x % length - length / 2;
yFromRowCenter = y % length - length / 2;
col = (x - xFromColCenter) / length;
row = (y - yFromRowCenter) / length;
if (yFromRowCenter < xFromColCenter) {
if (yFromRowCenter < (-xFromColCenter))--row;
else++col;
} else if (yFromRowCenter > xFromColCenter) {
if (yFromRowCenter < (-xFromColCenter))--col;
else++row;
}
return "Col:"+col+", Row:"+row+", xFC:"+xFromColCenter+", yFC:"+yFromRowCenter;
}
X和Y是在图像中的的coords，和长度是栅格的间距
X and Y are the coords in the image, and length is the spacing of the grid.
现在，它返回一个字符串，只是为了测试......结果应该是ROW和COL，而这些都是我选择的坐标：你的瓷砖1有COORDS（1,0）瓦2是（3,0），瓷砖图10是（0,1），瓦11是（2,1）。你可以将我的坐标到您的编号砖一两行。
Right now it returns a string, just for testing.. result should be row and col, and those are the coordinates I chose: your tile 1 has coords (1,0) tile 2 is(3,0), tile 10 is (0,1), tile 11 is (2,1). You could convert my coordinates to your numbered tiles in a line or two.
和一的jsfiddle测试 http://jsfiddle.net/NHV3y/
And a JSFiddle for testing http://jsfiddle.net/NHV3y/
干杯。
编辑：改变return语句，有一些变量我用来调试留在
changed the return statement, had some variables I used for debugging left in.
这篇关于点击检测在2D等距网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
