Video: VirtualBox einrichten (Netzwerk, Controller, Image) 2025
Viele Touch-basierte HTML5-Spiele verwenden einen virtuellen Joystick-Mechanismus. Der Benutzer berührt den Bildschirm, um mit der Eingabe zu beginnen, und wischt dann, um eine Eingabe bereitzustellen. Das Wischen nach links wird genauso gelesen wie das Bewegen eines Joysticks nach links. Je weiter der Benutzer wischt, desto größer ist der Eingabewert. Die simpleGame-Bibliothek verfügt über ein virtuelles Joystick-Objekt, das die Implementierung eines virtuellen Joysticks auf Ihren berührungsbasierten Geräten vereinfacht.
Der virtuelle Joystick gibt numerische Daten zurück. Es ist oft am einfachsten zu verstehen, wie es funktioniert, indem die numerische Ausgabe betrachtet wird, bevor sie einem visuellen Element zugeordnet wird.
Joystick Test var Spiel; var Ausgang; var Joystick; function init () {game = neue Szene (); Ausgabe = Dokument. getElementById ("Ausgabe"); if (game. Touchable) { joystick = neuer Joy (); } else { alert ("Dieser Test erfordert eine berührungsbasierte Schnittstelle"); } Spiel. start ();} // end init Funktion update () { if (Spiel. berührbar) { jx = Joystick. getMouseX (); jy = Joystick. getMouseY (); jdx = Joystick. getDiffX (); jdy = Joystick. getDiffY (); result = "Joystick x:" + jx + "
"; Ergebnis + = "Joystick y:" + jy + "
"; result + = "Joystick dx:" + jdx + "
"; Ergebnis + = "Joystick dy:" + jdy + "
";
Ausgabe. innerHTML = result;} else {alert ("Dieses Beispiel erwartet einen Touchscreen");}} // end update Hier noch nichts
Der virtuelle Joystick ist sehr einfach zu benutzen:
-
Erstellen Sie eine Variable für den Joystick.
Sie können es Joystick nennen. Ein bisschen eingängig.
-
Erstellen Sie den Joystick wenn möglich.
Benutze das Spiel. berührbare Eigenschaft, um festzustellen, ob eine Berührungsschnittstelle vorhanden ist. Wenn nicht, senden Sie eine Nachricht an den Benutzer.
-
Holt die Mausposition.
Wenn das virtuelle Joystick-Objekt eine Berührung auf dem Bildschirm erkennt, löst es mouseX- und mouseY-Werte aus. Verwenden Sie die Methoden getMouseX () und getMouseY () des Joysticks, um die X- und Y-Positionen der Berührung zu bestimmen. Auf diese Weise verhält sich die Touch-Oberfläche ähnlich wie die herkömmliche Maus.
-
Holen Sie sich einen DiffX- und DiffY-Wert vom Joystick.
Wenn der Benutzer den Bildschirm berührt, verfolgt die Bibliothek die Koordinaten der anfänglichen Berührung. Es misst dann, wie weit der Benutzer gewischt hat. Der Unterschied in X heißt diffX und der Unterschied in Y heißt diffY. Verwenden Sie die Methoden getDiffX () und getDiffY () des virtuellen Joystick-Objekts, um zu bestimmen, wie viele Pixel in X und Y der Benutzer seit dem Berühren des Bildschirms bewegt hat.
-
Zeigt die aktuellen Werte an.
Für diesen ersten Durchgang ist es wichtig zu verstehen, was der Joystick anzeigt, also nehmen Sie einfach die Werte und drucken sie in eine Bildschirmausgabe.
Der Punkt eines virtuellen Joysticks ist natürlich das Verschieben von Dingen auf dem Bildschirm.
Hier ist der Code:
Joystick Test var Spiel; var Ball; var Joystick; function init () {game = neue Szene (); ball = neues Sprite (Spiel, "redBall. png", 50, 50); if (game. touchable) {Joystick = neuer Joy ();} else {alert ("Dieses Spiel erfordert einen Touchscreen");} // end if ball. setSpeed (0); Ball. setPosition (400, 300); Spiel. start ();} // end init Funktion update () {Spiel. klar(); wenn (Spiel. berührbar) {Ball. setDX (Joystick. getDiffX ()); Ball. setDY (Joystick. getDiffY ());} / Endbare Kugel. update ();} // end update
Dieses Beispiel ist noch einfacher als das vorherige.
-
Erstelle ein einfaches Ball-Sprite.
Für dieses Beispiel wird ein einfacher Ball verwendet. Erstellen Sie es wie jedes andere einfache Sprite.
-
Baue ein Joystick-Objekt.
Erstellt ein virtuelles Joystick-Objekt.
-
Ordnen Sie den DiffX des Joysticks und die Differenz zu den DX- und DY-Werten des Balls zu.
Dies ergibt eine extrem empfindliche Bewegung, daher sollten Sie die Empfindlichkeit anpassen, indem Sie diffX und diffY durch einen Skalierungsfaktor dividieren.
