nicht angemeldet
Isometrische Koordinatenberechnung - Letzte Ecke "ausschließen"
Hallo liebe Selfhtml-Community. (Vorweg: Das neue Design sieht sehr gut aus.)
Aber ...
Ich hab nen kleines Problemchenchenchen ...
Mathematischer Natur ...
Isometrischem Ursprungs ...
Ich habe jetzt zum Testen folgendes kleines Script gebastelt:
<html>
<head>
<title></title>
<meta name="author" content="">
<script>
window.onload = function() {
var x = 0;
var y = 0;
var pc = 30;
var w = 38;
var h = 19;
for(x = 0;x < w;x++) {
for(y = 0;y < h;y++) {
var left = Math.abs(y - (h / 2));
var elm = document.createElement("div");
elm.style.fontFamily = "Courier New";
elm.style.fontSize = "10px";
elm.style.textAlign = "center";
elm.style.color = "black";
elm.style.width = (pc - 2) + "px";
elm.style.height = (pc - 2) + "px";
elm.style.position = "absolute";
elm.style.top = ((y * pc) + 1) + "px";
elm.style.left = ((x * pc) + 1) + "px";
elm.style.background = "red";
if(Math.floor(x / 2) < (h / 2) - (y + 1)) {
elm.style.background = "#DFDFDF";
}
if(Math.floor(x / 2) > (h / 2) + y) {
elm.style.background = "#DFDFDF";
}
if(Math.floor(y) > Math.floor(h / 2) + (x / 2)) {
elm.style.background = "#DFDFDF";
}
elm.innerHTML = x + "<br>" + y;
document.body.appendChild(elm);
}
}
}
</script>
</head>
<body >
</body>
</html>
Führt man es aus, wird ein fast fertiges, vergrößertes Raster eines isometrischen Feldes dargestellt. Erkennt man leicht. Die hellgrauen Felder sind NICHT das isometrische Feld. Die roten jedoch schon.
Im Script sind die 3 ersten Ecken bereits "ausgeschlossen" mittels jeweils dazu passender If-Abfrage.
Was genau ich möchte: Ich möchte schlichtweg eine Funktion bauen, welche mir auf Basis der Höhe und der Breite eines isometrischen Feldes und der Übergabe einer dazu passenden Koordinate (z. b. x = 4 y = 7) sagt, ob es auf dem feld ist oder nicht.
Wer eine einfachere Lösung für mein Problem hat, welche ich aber auch verstehe.
(Ich will später mit Canvas arbeiten. Jedoch nicht auf eine HTML5-Canvas-Isometric-Libary zurückgreifen, die ich dann erst recht nicht verstehe).
Prioritär wärs mir erstmal wichtig, DIESE Sache zu lösen. Danach kann ich mich gern mit alternativen/optimierungen befassen. Geht mir schlichtweg darum, das erstmal hinzukriegen.
Hintergrundinformation:
-------------------
Ich arbeite derzeit an einem HTML5-Canvas-Basierendem Browsergame der Kategorie "Strategie-Racing-Game". Wer sich darunter nichts vorstellen kann, kann hier schauen: www.polepixel.de
Dieses Spiel möchte ich schlichtweg auch in isometrie anbieten. Mein Problem ist jedoch, dass ich nach umwandlung der Anzeige des Spielfeldes nicht in der Lage bin, die korrekte Feld-Position mit der Maus-Position abzugleichen.
Wer mir helfen möchte, diese Mathematische Hürde zu nehmen und ggf. auch später mithelfen möchte, der kann auf Wunsch später im Impressum oder auf der "Dankesseite" des Games eingetragen werden. ICQ, MSN und/oder Facebook wären dafür jedoch vorteilhaft (Kontakt).
-------------------
-
Ich denke, ich habe es selbst herausgefunden:
window.onload = function() { var x = 0; var y = 0; var pc = 30; var w = 38; var h = 19; for(x = 0;x < w;x++) { for(y = 0;y < h;y++) { var left = Math.abs(y - (h / 2)); var elm = document.createElement("div"); elm.style.fontFamily = "Courier New"; elm.style.fontSize = "10px"; elm.style.textAlign = "center"; elm.style.color = "black"; elm.style.width = (pc - 2) + "px"; elm.style.height = (pc - 2) + "px"; elm.style.position = "absolute"; elm.style.top = ((y * pc) + 1) + "px"; elm.style.left = ((x * pc) + 1) + "px"; elm.style.background = "red"; if(Math.floor(x / 2) < (h / 2) - (y + 1)) { elm.style.background = "#DFDFDF"; } if(Math.floor(x / 2) > (h / 2) + y) { elm.style.background = "#DFDFDF"; } if(Math.floor(y) > Math.floor(h / 2) + (x / 2)) { elm.style.background = "#DFDFDF"; } if((x / 2) > (w / 2) - (y + 0.5) + Math.floor((w / 2) / 2)) { elm.style.background = "#DFDFDF"; } elm.innerHTML = x + "<br>" + y; document.body.appendChild(elm); } } }Dieser Teil hat mir gefehlt. Ist mathematisch etwas chaotisch. Macht aber genau das, was ich will. Und das pixelgenau.
if((x / 2) > (w / 2) - (y + 0.5) + Math.floor((w / 2) / 2)) { elm.style.background = "#DFDFDF"; }