[HOW-TO/TUTORIAL] Bildschirm-Koordinaten

[lidZ1]

Hallo zusammen,

ich bin gerade dabei ein kleines Spiel zu entwerfen.
Bis jetzt hat auch alles super geklappt und das Spiel läuft ohne Probleme.

Zum Spiel:

Es handelt sich um eine kleines Suchspiel. In einem Bild muss man etwas suchen und finden. Die Informationen(X und Y Koordinate , usw.) zu den jeweils gesuchten Gegenständen liegen in einer
Datenbank die am Anfang ausgelesen wird. Wenn der Spieler dran ist, kann er in das Bild klicken um den Gegenstand zu finden.
Es werden die Koordinaten aus der Datenbank mit den geklickten Koordinaten verglichen und ausgewertet.

Zu meinem Problem:

Ich habe meinen Elementen eine Absolute Position gegeben, weil das Bild in dem gesucht werden soll, sich nicht in der Größe ändern darf.
Wenn sich die Größe verändert, würden die abgespeicherten Koordinaten nicht mehr stimmen.

Wie kann man an die Sache heran gehen, dass das Spiel mit allen Auflösungen funktioniert, ohne das der Spieler immer links und rechts Scrollen muss.

Es ist zurzeit auf eine Auflösung von 1920x1090 angepasst.

 

[j-l-n]

Für diese Aufgabe ist meiner Meinung nach eine image map deutlich besser geeignet.
--> HTML-Tag area / map

 

[kkapsner]

@Julian: man kann durch die <area>s aber per Tab durch gehen und sieht an der Umrandung (ich hab' jetzt auf die schnelle kein CSS gefunden, das das unterbindet), so wie liegen... würde das Spiel so etwas witzlos machen.

@lidZ1: speicher' die Koordinaten in Relation zur Bildgröße. Also wenn der Punkt bei 40/30 liegt und das Bild 80/300 groß ist, dann speicher doch 0.5/0.1. Beim klicken kannst du dann auch die aktuelle Größe des Bildes auslesen und dann aus der Relativkoordinate die Realkoordinate ausrechnen und mit der Klickposition vergleichen.