Fester Mauszeiger mit jQuery draggable fixiert

Question

Ich baue ein kleines Spiel in HTML5. Das Canvas-Element ist ein Viewport in die Spielwelt. Der Benutzer kann die Position des Viewports in der Welt verschieben, indem er mit der Maus auf ein kleines Symbol klickt und zieht.

Das Problem ist, dass das Scrollen stoppt, wenn der Mauszeiger den Bildschirmrand berührt. Wahrscheinlich wird das das Scrollen in eine Richtung stark einschränken, da sich das Symbol in einer der Ecken der Seite befindet.

Die einzige technische Lösung, die mir einfällt, wäre, die Position des Mauszeigers auf dem Symbol irgendwie zu fixieren und die relative Bewegung in jedem Frame zu erfassen. Im Grunde würde ich die Zeigerposition nach jedem Ziehvorgang einfach wieder in die Mitte des Symbols zurücksetzen. Leider bin ich ziemlich sicher, dass dies nicht möglich ist. Mit dem Mauszeiger des Benutzers herumzuspielen, ist aus usability- und sicherheitstechnischer Sicht ein großes No-Go.

Gibt es also einen anderen Weg, um zu erreichen, was ich möchte? Ich suche hauptsächlich nach technischen Ideen, aber Vorschläge für eine geeignetere Benutzeroberfläche sind ebenfalls willkommen.

Answer 1

Drei mögliche Lösungen:

1. Verschieben Sie dieses "Joystick"-Symbol um 100 Pixel von der Ecke weg. Geben Sie ihm eine Transparenz, bis es angeklickt wird. Lassen Sie die Klick- und Ziehbewegungen "fortbestehen", so dass Klick-Ziehen und Halten des Cursors 40 Pixel vom Joystick-Zentrum entfernt zu kontinuierlichem Bildschirmpanning führen.

2. Verwenden Sie Pfeile, ähnlich wie bei Google Maps. (Sie können diese Lösung auch mit der ersten kombinieren, indem Sie den Handgriffteil durch den "Joystick"-Teil ersetzen.)

3. Machen Sie etwas völlig anderes. Zum Beispiel das Bildschirmpanning aktivieren, wenn der Cursor einer der vier Kanten nahe kommt.