Wie Hinzufügen Maus Antwort auf Ihre HTML5-Spiel für Mobile Access

Da Web-Browser auf dem Weg inkonsistent sind berichten sie die Position der Maus, Mauseingabe in normalen javascript in HTML-Gaming-Welt heikel ist. Das simpleGame Bibliothek behandelt dies durch Hinzufügen getMouseX () und getMouseY () Methoden der Szene Objekt. Diese Methoden sind nicht immer genau richtig, aber sie sind nahe genug für die meisten Spiele-Programmierung.

Jedes Mal, wenn eine normale Maus lesen möchten, verwenden Sie einfach die Szene Objekt getMouseX () und getMouseY () Funktionen, um die ungefähre Position des Mauszeigers zu bestimmen.

Die meiste Zeit, wenn Sie die Mausposition wollen, ist es, weil du gehst, um ein Objekt zu bewegen, wo die Maus ist oder ein Objekt in Richtung der Maus zeigen.

Oft möchten Sie den Mauszeiger zu verstecken, so können Sie mit dem Szene Objekt hideCursor () Methode, um den Cursor zu verstecken. (Natürlich können Sie den Cursor mit der abrufen Showcursor () Verfahren.)

Wenn Sie einen Touch-Screen zu lesen möchten, gibt es ein einfacher Schritt. Das simpleGame Bibliothek hat einen virtuellen Joystick-Objekt aufgerufen Freude. Erstellen Sie eine Instanz dieser Klasse auf dem Touchscreen Lesefunktionen einzuschalten.

Beachten Sie, dass die Touch-Oberfläche von mobilen Geräten nicht genau wie die Maus ist, so braucht es eine andere Schnittstelle. Allerdings, wenn Sie erstellt haben eine Freude Objekt, das getMouseX () und getMouseY () Funktionen wie eine normale Maus handeln Touch-Eingabe zu machen.

touchMouse.html verbirgt sich die normale Maus-Cursor und bewegt einen Ball, wo sich die Maus gerade zeigt. Dieses Beispiel arbeitet mit einem herkömmlichen Browser und einem Touchscreen-Gerät.

bild0.jpg

Das simpleGame Bibliothek drastisch vereinfacht den Prozess mit dem Mauszeiger zu arbeiten, indem sie einige einfache Methode Anrufe bereitstellt. Hier ist der Code:

touchMouse.html  

Erste ein Sprite mit der Maus zu folgen ist nur eine Sache zu wissen, welche Methoden zu nennen.

  1. Ausblenden des Mauszeigers.

    Das Szene Objekt hat eine hideCursor () Verfahren. Dies ist der einfachste Weg, um den normalen Mauszeiger zu verbergen. Normalerweise, wenn Sie die Maus mit einem Objekt zu folgen, bedeuten Sie für das Objekt wie der neue Mauszeiger zu handeln, so dass Sie den normalen Pfeil verstecken werde.

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

    Wenn Sie mit einem Touchpad Gerät arbeiten werden, müssen Sie eine Variable, die den virtuellen Joystick Objekt zu enthalten. (Wenn dieses Spiel nur auf Desktop-Computern mit normalen Mäusen verwendet werden, werden Sie mit dem Joystick Objekt nicht benötigen.)

  3. Initialisieren Sie den Joystick.

    Machen Sie eine Instanz der Freude Objekt in der drin() Funktion. Einfach den Joystick zu schaffen wird der Motor sagen Touch-Eingabe zu erwarten und es zu den normalen Mausbefehle zuordnen.

  4. Füge hinzu ein followMouse () Funktion.

    Es ist gut, eine neue Funktion zu erstellen Eingang zu handhaben. Das followMouse () Funktion wird das Objekt sagen, die Maus zu folgen. Natürlich, wenn Sie ein Objekt Gebäude sind, die die Maus folgt, können Sie dies eine Methode des Objekts machen, wenn Sie es vorziehen.

  5. Benutzen getMouseX () und getMouseY () Methoden.

    Das Szene Objekt verfügt über Methoden genannt getMouseX () und getMouseY (). Verwenden Sie diese Methoden, um die X- und Y-Koordinaten der Maus auf die Szene zu bekommen. Beachten Sie, dass die Koordinaten nicht immer exakt sind.

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

    Das Szene Objekt hat eine berührbaren Eigenschaft, die wahr ist, wenn der Browser über einen Touchscreen verfügt. Sie wollen nicht, normalerweise das Objekt, indem Sie Ihre Finger versteckt werden, so oft Sie wollen ein Objekt zu versetzen, wenn Sie einen Touch-Screen für die Eingabe verwenden.

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

    In einem Touch-Screen-Umgebung, möchten Sie normalerweise das Sprite noch sichtbar sein, so dass man oft die Y-Achse wird um einen Betrag versetzt, so dass es durch den Spieler Finger nicht verdeckt wird. einen Wert von Y subtrahieren diesen Effekt zu erhalten.

Menü