Isometrisch grid
Ik heb een isometrich grid bestaand uit 10x10 tegels van elk 64x32 pixels.
Nu zou ik graag willen dat wanneer men op dat grid klikt, er wordt gekeken op welke tegel precies wordt geklikt.
Op internet staan verschillende formules om dit te controleren, maar ik krijg er geen werkend.
Dit is de code zoals ik het nu heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
var onClick = function(event)
{
for (var x = 0; x < Grid.width; x += 1)
{
for (var y = 0; y < Grid.height; y += 1)
{
var left = (((Grid.width * Grid.SQUARE_WIDTH) / 2) - (Grid.SQUARE_WIDTH / 2)) + ((y - x) * Grid.SQUARE_HEIGHT);
var top = (((y + x) * Grid.SQUARE_HEIGHT) / 2);
// Controle of event.x en event.y binnen de coordinaten van deze tegel vallen.
}
}
}
{
for (var x = 0; x < Grid.width; x += 1)
{
for (var y = 0; y < Grid.height; y += 1)
{
var left = (((Grid.width * Grid.SQUARE_WIDTH) / 2) - (Grid.SQUARE_WIDTH / 2)) + ((y - x) * Grid.SQUARE_HEIGHT);
var top = (((y + x) * Grid.SQUARE_HEIGHT) / 2);
// Controle of event.x en event.y binnen de coordinaten van deze tegel vallen.
}
}
}
Grid.width is de breedte van het grid, weergegeven in tegels (10).
Grid.height is de hoogte van het grid, weergeven in tegels (10).
Grid.SQUARE_WIDTH is de breedte van een tegel, weergegeven in pixels (64).
Grid.SQUARE_HEIGHT is de hoogte van een tegel, weergegeven in pixels (32).
Zou iemand mij kunnen helpen met de formule en hoe ik die in deze situatie toepas?
Alvast bedankt!
Gewijzigd op 02/09/2015 14:12:25 door Lord Gaga
Intussen zag ik dat event.x en event.y de posities zijn vanaf het scherm, en niet vanaf de parent. Ik heb deze toegevoegd aan de berekening en nu werkt het. :-)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var onClick = function(event)
{
for (var x = 0; x < Grid.width; x += 1)
{
for (var y = 0; y < Grid.height; y += 1)
{
var left = (((Grid.width * Grid.SQUARE_WIDTH) / 2) - (Grid.SQUARE_WIDTH / 2)) + ((y - x) * Grid.SQUARE_HEIGHT);
var top = (((y + x) * Grid.SQUARE_HEIGHT) / 2);
var xRadius = Math.abs((event.x - editor.offsetLeft) - (left + (Grid.SQUARE_WIDTH / 2)));
var yRadius = Math.abs((event.y - editor.offsetTop) - (top + (Grid.SQUARE_HEIGHT / 2)));
var radius = (xRadius / Grid.SQUARE_WIDTH) + (yRadius / Grid.SQUARE_HEIGHT);
if (radius <= 0.5)
{
var tile = document.createElement('div');
{
tile.setAttribute('class', 'tile');
tile.style.setProperty('left', left + 'px');
tile.style.setProperty('top', top + 'px');
}
floor.appendChild(tile);
return false;
}
}
}
};
{
for (var x = 0; x < Grid.width; x += 1)
{
for (var y = 0; y < Grid.height; y += 1)
{
var left = (((Grid.width * Grid.SQUARE_WIDTH) / 2) - (Grid.SQUARE_WIDTH / 2)) + ((y - x) * Grid.SQUARE_HEIGHT);
var top = (((y + x) * Grid.SQUARE_HEIGHT) / 2);
var xRadius = Math.abs((event.x - editor.offsetLeft) - (left + (Grid.SQUARE_WIDTH / 2)));
var yRadius = Math.abs((event.y - editor.offsetTop) - (top + (Grid.SQUARE_HEIGHT / 2)));
var radius = (xRadius / Grid.SQUARE_WIDTH) + (yRadius / Grid.SQUARE_HEIGHT);
if (radius <= 0.5)
{
var tile = document.createElement('div');
{
tile.setAttribute('class', 'tile');
tile.style.setProperty('left', left + 'px');
tile.style.setProperty('top', top + 'px');
}
floor.appendChild(tile);
return false;
}
}
}
};
Dan kan je gewoon iets als <span id="grid_h38_b83"> maken.
Met behulp van http://jdan.github.io/isomer/ moet dat niet moeilijk zijn...
Of via http://www.angrycoding.com/2011/04/isometric-grid-generator-based-on-html5.html ...
Gewijzigd op 02/09/2015 21:22:19 door Eddy E
@Remco: Dat werkt niet omdat die div'jes rechthoekig zijn en elkaar overlappen.
Gewijzigd op 04/09/2015 10:32:34 door Lord Gaga