Wie man Benutzerinteraktion in Ihrem HTML5 Spiel erstellt - dummies

Der größte Unterschied zwischen einem HTML5-Spiel und einer Animation ist die Benutzerinteraktion. Wenn Sie es zu einem Spiel machen wollen, müssen Sie den Benutzer einbinden. Und so geht es.

Hier ist der Code:

Auto. html var Szene; var Auto; function init () {scene = neue Szene (); Auto = neuer Sprite (Szene, "Auto. Png", 50, 30); Auto. setAngle (270); Auto. setSpeed ​​(0); Szene. start ();} // end init Funktion update () {Szene. klar(); // Schlüssel prüfen if (keysDown [K_LEFT]) { Auto. changeAngleBy (-5); } // Ende wenn if (keysDown [K_RIGHT]) { Auto. changeAngleBy (5); } // end if if (keysDown [K_UP]) { Auto. changeSpeedBy (1); } // end wenn if (keysDown [K_DOWN]) { Auto. changeSpeedBy (-1); } // Ende wenn Auto. update ();} // update beenden

Fahren Sie das Auto!

Wie Sie die Tastatur für Ihr Spiel verwenden

Irgendwie muss der Benutzer mit der Seite interagieren. Die Tastatur ist eines der einfachsten Eingabeelemente. simpleGame bietet einige Möglichkeiten, die Tastatur zu überprüfen, aber die leistungsstärkste Technik verwendet eine spezielle Variable namens keysDown. Und so funktioniert es:

• keysDown ist ein globales Array. Diese Variable wird automatisch erstellt, wenn Sie eine Szene erstellen. Es ist ein Array von Booleschen Werten - das heißt, jedes Element kann nur wahr oder nur falsch sein.

• Für jeden Schlüssel ist eine Konstante definiert. Jede Taste auf der Standardtastatur hat eine spezielle Konstante, die bereits definiert ist. Zum Beispiel repräsentiert K_A die A-Taste und K_B repräsentiert die B-Taste.

• keysDown zeigt den Status jeder Taste an. Wenn die A-Taste gerade gedrückt wird, enthält keysDown [A] den Wert true. Wenn die A-Taste nicht gedrückt wird, enthält keysDown [A] den Wert false.

• Sie können den aktuellen Status eines beliebigen Schlüssels bestimmen. Überprüfen Sie einfach das keysDown-Array, um den aktuellen Status eines beliebigen Schlüssels zu bestimmen.

• Sie können mehrere Schlüssel gleichzeitig ablegen. Der Hauptzweck dieser Technik ist es, mehrere Tasten gleichzeitig drücken zu können. Beim normalen Computing ist es ungewöhnlich, mehr als einen Schlüssel gleichzeitig zu haben. Beim Spielen ist es sehr üblich, mehr als einen Schlüssel gleichzeitig zu drücken, so dass Sie einen Mechanismus benötigen, der diese Erwartung unterstützt.

So verschieben Sie das Spiel-Sprite

Im Wesentlichen hat ein Sprite eine Position, die durch X- und Y-Eigenschaften gesteuert wird. Wenn Sie sich an die Math-Klasse erinnern, steht X für horizontale Werte und Y für vertikale Position. Der Ursprung (0, 0) ist die obere linke Ecke des Bildschirms.

X-Koordinaten funktionieren genau so, wie Sie sich aus der Mathematikklasse erinnern. Wenn die X-Werte größer werden, bewegt sich das Sprite nach rechts. In der Computergrafik verhält sich Y etwas anders als in der Mathematikklasse.Die meisten Hardware-Anzeigen werden von oben nach unten gescannt, sodass Y am oberen Bildschirmrand 0 ist und sich nach unten bewegt.

Beachten Sie, dass die maximale Höhe und Breite in Variablen gespeichert werden: Szene. Höhe und Szene. Breite.

Bei allen verschiedenen Bewegungsmethoden handelt es sich wirklich um die Manipulation von X und Y. Sie können diese Werte manuell setzen (setPosition (), setX () und setY ()), oder Sie können die Werte ändern (changeXby (), changeYby ()). Jede dieser Methoden wirkt sofort, sodass Sie sie verwenden können, um die Position oder Bewegung des Sprites zu steuern.

Einige dieser Funktionen ähneln einander. Zum Beispiel sieht changeXby () sehr ähnlich wie setChangeX () aus. Diese Funktionen haben einen feinen aber wichtigen Unterschied. Die Funktion changeXby () ändert den Wert von X einmal. Wenn Sie möchten, dass die Änderung fortgesetzt wird, müssen Sie diese Funktion weiterhin aufrufen.

Die Funktion setChangeX () ist leistungsfähiger, da Sie sie einmal aufrufen können. Sie ändert x immer um den Wert, den Sie festlegen, bis Sie setChangeX () erneut aufrufen.

Für die meisten Sprites wollen Sie dem Sprite einfach einen Winkel und eine Geschwindigkeit geben und es loslassen. Das Sprite-Objekt hat genau die Methoden, die Sie für dieses Verhalten benötigen. Mit setAngle () können Sie die Richtung bestimmen, in die das Sprite gehen soll. Mit setSpeed ​​() können Sie die Geschwindigkeit angeben, in die das Sprite gehen soll. Wie die meisten Bewegungsfunktionen gibt es auch die Methoden changeAngle () und changeSpeed ​​().

So steuern Sie das Auto in Ihrem Spiel

Der keysDown-Mechanismus kann mit den Bewegungsmethoden kombiniert werden, um Ihr Auto einfach zu steuern. Hier nochmal der relevante Code aus update ():

function update () {scene. klar(); // Schlüssel prüfen if (keysDown [K_LEFT]) { Auto. changeAngleBy (-5); } // Ende wenn if (keysDown [K_RIGHT]) { Auto. changeAngleBy (5); } // end if if (keysDown [K_UP]) { Auto. changeSpeedBy (1); } // end wenn if (keysDown [K_DOWN]) { Auto. changeSpeedBy (-1); } // Ende wenn Auto. update ();} // update beenden

Die eigentliche Codierung ist ziemlich einfach zu verstehen:

1. Löschen Sie die Szene.

   Wie üblich ist es die erste Aufgabe in der update () Funktion, das Spielzimmer aufzuräumen. Stellen Sie sicher, dass Sie den vorherigen Frame gelöscht haben, bevor Sie etwas anderes tun.

2. Prüfen Sie, ob der Pfeil nach links gedrückt wird.

   Verwenden Sie den keysDown-Mechanismus, um festzustellen, ob der linke Pfeil gerade gedrückt ist.

3. Wenn der linke Pfeil gedrückt wird, drehen Sie das Auto nach links.

   Wenn der Benutzer gerade die linke Pfeiltaste drückt, drehen Sie das Auto fünf Grad gegen den Uhrzeigersinn. Verwenden Sie die changeAngleBy () -Methode, um das Erscheinungsbild des Fahrzeugs sowie die Richtung, in die es fährt, zu ändern.

4. Wiederholen Sie diesen Vorgang für den rechten Pfeil.

   Die Rechtspfeilprüfung ist ähnlich, aber dieses Mal drehen Sie das Auto fünf Grad im Uhrzeigersinn.

5. Beschleunigen Sie mit dem Aufwärtspfeil.

   Wenn der Benutzer den Aufwärtspfeil drückt, ändern Sie die Geschwindigkeit des Autos. Verwenden Sie einen positiven Wert, um das Auto zu beschleunigen. Es dauert nicht viel, weil dieser Code 20 mal pro Sekunde überprüft wird.

6. Verlangsamen Sie den Wagen mit dem Pfeil nach unten.

   Verwenden Sie einen ähnlichen Mechanismus für den Abwärtspfeil.Ändern Sie die Geschwindigkeit durch einen negativen Wert, um das Auto zu verlangsamen. Dieser Ansatz ermöglicht negative Werte und das Auto wird gesichert, wenn Sie möchten.

7. Zeichne das Auto in die neue Position.

   Es ist wichtig, sich daran zu erinnern, dass der Aufruf der Bewegungsfunktionen des Sprites den Standort des Autos nicht ändert! Es werden nur interne Daten im Spielspeicher geändert. Sie müssen die update () -Methode des Autos aufrufen, um diese Änderungen in Aktion zu sehen.