Hallo zusammen,
zur Zeit möchte ich meine HTML und CSS Kenntnisse wesentlich erweitern und habe mich daher an die Entwicklung eines Browsergames gewagt.
Hauptbestandteil dieses Browsergames ist die Verwaltung von Ressourcen und der Auf- und Abbau sowie die Aufwertung von Gebäuden auf der
bebaubaren Karte des Spielers.
Das Problem
Da die Karte des Spielers größer ist als der durchschnittliche Spielerbildschirm und das Spiel auch auf allen Plattformen spielbar sein soll habe
ich nach langer Suche die "utterscroll.js" für jQuery für mich entdeckt, die es dem Anwender ermöglicht frei über die aufgerufene Seite zu scrollen,
was dem Mouse Movement auf Google Maps sehr ähnelt.
(siehe Demo)
Mein Problem besteht darin, dass Utterscroll nur so lange hervorragende Arbeit leistet, bis die DIVs der zum Bauen benötigten Gitternetzlinien (siehe id=grid, unten)
verlinkt sind. Das jedoch muss allerdings zwingend nötig sein um das entsprechende Baumenü aufzurufen.
Statt bei einem gedrückten MouseDown über die Map zu scrollen zieht der Mauszeiger Drag and Drop artig die Map hin und her (siehe Bild), was natürlich
nicht Sinn der Sache sein soll.
Lösungsversuche
Ich habe bereits versucht das Link-"Drag and Drop" mittels eines JS-Script Codes auszuschalten, was auch gelang.
Das Problem des fehlenden Mouse Movements besteht allerdings leider weiter.
HTML Struktur und CSS
Die HTML Struktur sieht wie folgt aus:
Die CSS Struktur von Viewport:
Utterscroll
In game.html über </head>:
In game.html unter </body>:
JS-Files (via Github)
Erwartung
Da die Erwartungshaltung vieler Nutzer schon im Vorfeld mehr als ungeklärt ist und es viele verärgerte Forennutzer verständlicherweise
"nicht einsehen" jemandem die Problemlösung "auf dem Silbertablett" zu servieren möchte ich noch folgendes klar stellen um
Missverständnisse zu vermeiden:
Ich habe absolut keine Ahnung von JS, jQuery oder Ajax und mir fehlt auch leider die Zeit um die Sprachen und ihre Bibliotheken und
Erweiterungen zu studieren.
In diesem Fall ist die Anwendung eines solchen Scripts ein zwangsläufiges Mittel zum Zweck.
Daher weiß ich weder im geringsten wie man dieses Problem lösen könnte noch sehe ich mich mit Tutorials oder kleinen "Gehhilfen" dazu
in der Lage auf den richtigen Nenner zu kommen.
Ich würde mich daher sehr freuen jemanden unter euch zu finden, der dieses Problem für mich lösen kann und mir im besten Falle noch erklärt
wie und warum er das gemacht hat, was er gemacht hat, um die Problematik vielleicht besser nachvollziehen zu können.
Da ich PHP programmiere verstehe ich zumindest ein kleinwenig von dem, was dort geschrieben steht.
Für deine Mühe mir zu helfen hinterlasse ich Dir natürlich auch ein Trinkgeld.
zur Zeit möchte ich meine HTML und CSS Kenntnisse wesentlich erweitern und habe mich daher an die Entwicklung eines Browsergames gewagt.
Hauptbestandteil dieses Browsergames ist die Verwaltung von Ressourcen und der Auf- und Abbau sowie die Aufwertung von Gebäuden auf der
bebaubaren Karte des Spielers.
Das Problem
Da die Karte des Spielers größer ist als der durchschnittliche Spielerbildschirm und das Spiel auch auf allen Plattformen spielbar sein soll habe
ich nach langer Suche die "utterscroll.js" für jQuery für mich entdeckt, die es dem Anwender ermöglicht frei über die aufgerufene Seite zu scrollen,
was dem Mouse Movement auf Google Maps sehr ähnelt.
(siehe Demo)
Mein Problem besteht darin, dass Utterscroll nur so lange hervorragende Arbeit leistet, bis die DIVs der zum Bauen benötigten Gitternetzlinien (siehe id=grid, unten)
verlinkt sind. Das jedoch muss allerdings zwingend nötig sein um das entsprechende Baumenü aufzurufen.
Statt bei einem gedrückten MouseDown über die Map zu scrollen zieht der Mauszeiger Drag and Drop artig die Map hin und her (siehe Bild), was natürlich
nicht Sinn der Sache sein soll.
Lösungsversuche
Ich habe bereits versucht das Link-"Drag and Drop" mittels eines JS-Script Codes auszuschalten, was auch gelang.
Das Problem des fehlenden Mouse Movements besteht allerdings leider weiter.
HTML Struktur und CSS
Die HTML Struktur sieht wie folgt aus:
HTML-Code:
<div class="viewport"> <a href="#"><div id="grid">Erstes Grid</a> <a href="#"><div id="grid">Zweites Grid</a> <a href="#"><div id="grid">Drittes Grid</a> usw... </div>
Die CSS Struktur von Viewport:
HTML-Code:
.viewport { width: 100%; height: 100%; position: fixed; pointer-events: none; }
Utterscroll
In game.html über </head>:
Code:
<script type="text/javascript"> jQuery(function($) { debiki.Utterscroll.enable(); }); </script>
In game.html unter </body>:
Code:
<script src='_js/debiki-utterscroll.js'></script>
JS-Files (via Github)
Erwartung
Da die Erwartungshaltung vieler Nutzer schon im Vorfeld mehr als ungeklärt ist und es viele verärgerte Forennutzer verständlicherweise
"nicht einsehen" jemandem die Problemlösung "auf dem Silbertablett" zu servieren möchte ich noch folgendes klar stellen um
Missverständnisse zu vermeiden:
Ich habe absolut keine Ahnung von JS, jQuery oder Ajax und mir fehlt auch leider die Zeit um die Sprachen und ihre Bibliotheken und
Erweiterungen zu studieren.
In diesem Fall ist die Anwendung eines solchen Scripts ein zwangsläufiges Mittel zum Zweck.
Daher weiß ich weder im geringsten wie man dieses Problem lösen könnte noch sehe ich mich mit Tutorials oder kleinen "Gehhilfen" dazu
in der Lage auf den richtigen Nenner zu kommen.
Ich würde mich daher sehr freuen jemanden unter euch zu finden, der dieses Problem für mich lösen kann und mir im besten Falle noch erklärt
wie und warum er das gemacht hat, was er gemacht hat, um die Problematik vielleicht besser nachvollziehen zu können.
Da ich PHP programmiere verstehe ich zumindest ein kleinwenig von dem, was dort geschrieben steht.
Für deine Mühe mir zu helfen hinterlasse ich Dir natürlich auch ein Trinkgeld.
Kommentar