Wie man eine Mausantwort zu Ihrem HTML5-Spiel für mobilen Zugriff hinzufügt - Dummies

Da Webbrowser inkonsistent in der Art sind, wie sie die Position der Maus melden, ist die Mauseingabe in normalem JavaScript in der HTML schwierig. Spielwelt. Die Bibliothek simpleGame erledigt dies, indem sie dem Scene-Objekt die Methoden getMouseX () und getMouseY () hinzufügt. Diese Methoden sind nicht immer genau richtig, aber sie sind nah genug für die meisten Spielprogramme.

Jedes Mal, wenn Sie eine normale Maus lesen möchten, verwenden Sie einfach die Funktionen getMouseX () und getMouseY () des Scene-Objekts, um die ungefähre Mausposition zu bestimmen.

Die meiste Zeit, wenn Sie die Mausposition haben wollen, ist es, weil Sie ein Objekt, in dem sich die Maus befindet, bewegen oder ein Objekt auf die Maus richten.

Oft möchten Sie den Mauszeiger ausblenden, damit Sie die hideCursor () - Methode des Scene-Objekts verwenden können, um den Cursor auszublenden. (Natürlich können Sie den Cursor mit der Methode showCursor () abrufen.)

Wenn Sie einen Touchscreen lesen möchten, gibt es einen einfachen Schritt. Die Bibliothek simpleGame hat ein virtuelles Joystick-Objekt namens Joy. Erstellen Sie eine Instanz dieser Klasse, um die Lesefunktionen des Touchscreens einzuschalten.

Beachten Sie, dass die Touch-Oberfläche von Mobilgeräten nicht genau mit der Maus übereinstimmt und daher eine andere Schnittstelle benötigt. Sobald Sie jedoch ein Joy-Objekt erstellt haben, bewirken die Funktionen getMouseX () und getMouseY (), dass sich die Fingereingabe wie eine normale Maus verhält.

touchMouse. html versteckt den normalen Mauszeiger und bewegt einen Ball, wohin die Maus gerade zeigt. Dieses spezielle Beispiel funktioniert sowohl mit einem herkömmlichen Browser als auch mit einem Touchscreen-Gerät.

Die Bibliothek simpleGame vereinfacht die Arbeit mit dem Mauszeiger drastisch, indem sie einige einfache Methodenaufrufe bereitstellt. Hier ist der Code:

touchMouse. html var Kugel; var Spiel; var Freude; function init () {game = neue Szene (); ball = neues Sprite (Spiel, "redBall. png", 25, 25); Ball. setSpeed ​​(0); Spiel. hideCursor (); Freude = neue Freude (); Spiel. start ();} // end init Funktion update () {Spiel. klar(); followMouse (); Ball. update ();} // end update Funktion followMouse () { x = Spiel. getMouseX (); y = Spiel. getMouseY (); if (game. Touchable) { // Objekt für Touchscreens etwas höher bewegen y - = 100; } // Touchscreen-Test beenden. setPosition (x, y); }

Um ein Sprite der Maus zu folgen, muss man nur wissen, welche Methoden aufgerufen werden sollen.

1. Blenden Sie den Mauszeiger aus.

   Das Scene-Objekt hat eine hideCursor () -Methode.Dies ist die einfachste Möglichkeit, den normalen Mauszeiger auszublenden. Wenn Sie der Maus mit einem Objekt folgen, meinen Sie normalerweise, dass sich das Objekt wie der neue Mauszeiger verhält, sodass Sie den normalen Pfeil ausblenden.

2. Erstellen Sie eine Variable für den virtuellen Joystick.

   Wenn Sie mit einem Touchpad-Gerät arbeiten, benötigen Sie eine Variable, die das virtuelle Joystick-Objekt enthält. (Wenn dieses Spiel nur auf Desktop-Rechnern mit normalen Mäusen verwendet wird, benötigen Sie kein Joystick-Objekt.)

3. Initialisieren Sie den Joystick.

   Erstellt eine Instanz des Joy-Objekts in der Funktion init (). Wenn Sie den Joystick erstellen, wird der Motor aufgefordert, eine Touch-Eingabe zu erwarten und diese den normalen Mausbefehlen zuzuordnen.

4. Fügen Sie eine followMouse () - Funktion hinzu.

   Generell ist es gut, eine neue Funktion zur Eingabe zu erstellen. Die Funktion followMouse () weist das Objekt an, der Maus zu folgen. Wenn Sie ein Objekt erstellen, das der Maus folgt, können Sie dies natürlich zu einer Methode für dieses Objekt machen.

5. Verwenden Sie die Methoden getMouseX () und getMouseY ().

   Das Scene-Objekt hat Methoden namens getMouseX () und getMouseY (). Verwenden Sie diese Methoden, um die X- und Y-Koordinaten der Maus in der Szene zu erhalten. Beachten Sie, dass die Koordinaten nicht immer exakt sind.

6. Überprüfen Sie, ob Sie einen Touchscreen haben.

   Das Scene-Objekt hat eine berührbare Eigenschaft, die wahr ist, wenn der Browser über einen Touchscreen verfügt. Sie möchten normalerweise nicht, dass das Objekt durch Ihren Finger verdeckt wird. Daher sollten Sie häufig ein Objekt versetzen, wenn Sie einen Touchscreen als Eingabe verwenden.

7. Bewegen Sie das Objekt höher als Ihr Finger.

   In einer Touchscreen-Umgebung sollte das Sprite normalerweise immer noch sichtbar sein, sodass Sie die Y-Achse oft um einen bestimmten Betrag versetzen, damit sie nicht vom Finger des Spielers verdeckt wird. Subtrahiere einen Wert von Y, um diesen Effekt zu erhalten.