PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
L

Isometrisch grid

Door Lord Gaga op 02-09-2015 14:02 gewijzigd op 02-09-2015 14:12
2.249 views
Hallo,

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:


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.
		}
	}
}


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!
?
Onbekende gebruiker
02-09-2015 15:30 gewijzigd op 02-09-2015 15:30
Wat is het voor een grid? Canvas? En waarom bestaat het grid niet uit DOM-elementen waarbij je niet zelf aan het rekenen hoeft?
L
Lord Gaga
02-09-2015 16:06
Het grid bestaat uit DOM-elementen. Maar dan moet ik alsnog de positie van elke tegel berekenen + zelf controleren of een tegel is aangeklikt.

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. :-)


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;
			}
		}
	}
};
?
Onbekende gebruiker
02-09-2015 16:08
Mooi. Het helpt soms al als je het aan iemand uitlegt! :)
R
Remco van der Velde
03-09-2015 12:18
Ik denk dat je te moeilijk denkt, als je toch dom elementen hebt in het grid, waarom geen bind click op zo'n dom element zelf, dan hoef je niet te gaan berekenen waar er en welk element via het grid wordt geklikt.
L
Lord Gaga
04-09-2015 10:20 gewijzigd op 04-09-2015 10:32
@Eddy: Dit is een simpele eindopdracht voor school (vak "DHTML") en daar gebruik ik liever DOM elementen voor.

@Remco: Dat werkt niet omdat die div'jes rechthoekig zijn en elkaar overlappen.

Reageren

Inloggen om te reageren