Hallo,
ich wurde von einem Freund gefragt ob ich ihm bei einem kleinen Browser-Game helfen kann. Ich hab das mal gleich als Begründung genommen tiefer in JavaScript einzusteigen
Meine Problemstellung ist folgende:
Gegeben ist ein übergroßen Bild (2000..3000px breit, 1000..2000px hoch - vielleicht auch größer, er zeichnet noch daran) das als Tile entworfen wurde so dass es lückenlos horizontal und vertikal gestapelt werden kann.
Der Sieht von diesem Bild immer nur einen Ausschnitt kann aber horizontal und vertikal endlos herum scrollen (also nicht via scrollbars sondern via mouse-drag bzw. touch-move)
Dann bekommt er die Aufgabe Dinge darin zu suchen und markieren. Also anzuklicken, und die werden dann irgendwie hervorgehoben.
Das ganze soll sowohl am PC als auch auf Tablets oder Smartphones spielbar sein.
So. Mit dieser Aufgabe hab ich mir mal das JavaScript Referenzhandbuch vorgenommen viell gelesen und mich dann versucht das als am Client laufende JavaScript App umzusetzen.Dabei versuche ich noch so wenig wie möglich externe Libs zu verwenden - damit auch klar ist was das ding wirklich tut.
Der Erste Ansatz war ein HTML-Div über das ganze Browser-Fenster zu spannen, das Tile als Background mit Repeat zu hinterlegen und anhand der Maus-Events einfach die X-Y-Location zu korrigieren. Damit sollte ja der Eindruck entstehen dass das Playfield gescrollt wird. Die Elemente die Geblickt werden könnten sollten dann über diesem Div liefen und so die Click-Events selbst bekommen (natürlich müssen die beim Scrollen auch verschoben werden)
Leider spielt mir HTML/CSS/JavaScript da nicht so ganz mit:
Setzte ich den Background via style.backgroundImage kann ich hier nur eine 'echte URL' hinterlegen, aber nicht ein base64-encodiertes Image.
Warum ich das möchte: Weil ich gerne das Background-Image ia JavaScript herunterladen möchte und eventuell noch für den Client passend skalieren möchte.
Scheinbar ist diese Kombination aber nicht möglich.
Alternativen wären jetzt: Das Image Server-Seitig zu skalieren und so on-the-fly korrekt an den Client zu übertragen. Das will ich aber vermeiden.
Oder: Das Image weiterhin as-is herunter zu laden und eben an ein anderes Control zu binden um es anzuzeigen. ein einfaches IMG unterstützt aber kein 'repeat' und so müsste ich zum Image erst kompliziert überlappende Bereche dazurechnen oder beim Move jedesmal das korrekt aus dem großen Bild herausrechnen. Ersteres wäre möglicherweise ein Problem bei mobile-devices mit knappen Resourcen, letzteres denke ich ist (zumindest mit dem IE) nicht ruckelfrei realisierbar.
Übersehe ich einen andereen offensichtlich leichteren weg das Problem zu lösen?
Gibt es vielleicht eine einfache 'leichtgewichtige' Bibliothek mit der man sowas machen kann (... aber ich möchte hier kein Unity & Co aufziehen - denn mit geht es eigentlich primär darum was in JavaScript zu machen und nicht die nächsten 6 Monate ein Gaming-Framework zu lernen)
lg Robert
ich wurde von einem Freund gefragt ob ich ihm bei einem kleinen Browser-Game helfen kann. Ich hab das mal gleich als Begründung genommen tiefer in JavaScript einzusteigen
Meine Problemstellung ist folgende:
Gegeben ist ein übergroßen Bild (2000..3000px breit, 1000..2000px hoch - vielleicht auch größer, er zeichnet noch daran) das als Tile entworfen wurde so dass es lückenlos horizontal und vertikal gestapelt werden kann.
Der Sieht von diesem Bild immer nur einen Ausschnitt kann aber horizontal und vertikal endlos herum scrollen (also nicht via scrollbars sondern via mouse-drag bzw. touch-move)
Dann bekommt er die Aufgabe Dinge darin zu suchen und markieren. Also anzuklicken, und die werden dann irgendwie hervorgehoben.
Das ganze soll sowohl am PC als auch auf Tablets oder Smartphones spielbar sein.
So. Mit dieser Aufgabe hab ich mir mal das JavaScript Referenzhandbuch vorgenommen viell gelesen und mich dann versucht das als am Client laufende JavaScript App umzusetzen.Dabei versuche ich noch so wenig wie möglich externe Libs zu verwenden - damit auch klar ist was das ding wirklich tut.
Der Erste Ansatz war ein HTML-Div über das ganze Browser-Fenster zu spannen, das Tile als Background mit Repeat zu hinterlegen und anhand der Maus-Events einfach die X-Y-Location zu korrigieren. Damit sollte ja der Eindruck entstehen dass das Playfield gescrollt wird. Die Elemente die Geblickt werden könnten sollten dann über diesem Div liefen und so die Click-Events selbst bekommen (natürlich müssen die beim Scrollen auch verschoben werden)
Leider spielt mir HTML/CSS/JavaScript da nicht so ganz mit:
Setzte ich den Background via style.backgroundImage kann ich hier nur eine 'echte URL' hinterlegen, aber nicht ein base64-encodiertes Image.
Warum ich das möchte: Weil ich gerne das Background-Image ia JavaScript herunterladen möchte und eventuell noch für den Client passend skalieren möchte.
Scheinbar ist diese Kombination aber nicht möglich.
Alternativen wären jetzt: Das Image Server-Seitig zu skalieren und so on-the-fly korrekt an den Client zu übertragen. Das will ich aber vermeiden.
Oder: Das Image weiterhin as-is herunter zu laden und eben an ein anderes Control zu binden um es anzuzeigen. ein einfaches IMG unterstützt aber kein 'repeat' und so müsste ich zum Image erst kompliziert überlappende Bereche dazurechnen oder beim Move jedesmal das korrekt aus dem großen Bild herausrechnen. Ersteres wäre möglicherweise ein Problem bei mobile-devices mit knappen Resourcen, letzteres denke ich ist (zumindest mit dem IE) nicht ruckelfrei realisierbar.
Übersehe ich einen andereen offensichtlich leichteren weg das Problem zu lösen?
Gibt es vielleicht eine einfache 'leichtgewichtige' Bibliothek mit der man sowas machen kann (... aber ich möchte hier kein Unity & Co aufziehen - denn mit geht es eigentlich primär darum was in JavaScript zu machen und nicht die nächsten 6 Monate ein Gaming-Framework zu lernen)
lg Robert
