Der größte Unterschied zwischen einem HTML5-Spiel und einer Animation ist Interaktion mit dem Benutzer. Wenn Sie es ein Spiel machen wollen, müssen Sie den Benutzer, sich zu engagieren. Und hier ist, wie das zu tun.

Hier ist der Code:

 
Fahre das Auto!

Wie die Tastatur für Ihr Spiel verwenden

Irgendwie muss der Benutzer mit der Seite interagieren. Die Tastatur ist eine der einfachsten Eingabeelemente zu verwenden. simpleGame bietet ein paar Möglichkeiten, um die Tastatur, aber die stärkste Technik verwendet eine spezielle Variable zu überprüfen genannt keysDown. So funktioniert das:

• keysDown ist ein globales Array. Diese Variable wird automatisch erstellt, wenn Sie eine Szene aufzubauen. Es ist ein Array von Booleschen Werten -, die jedes Element bedeutet nur wahr sein kann oder nur falsch.

• Es ist eine Konstante für jede Taste definiert. Jede Taste auf der Standard-Tastatur verfügt über eine spezielle Konstante bereits definiert. Beispielsweise, K_A stellt die EIN Schlüssel und K_B stellt die B Schlüssel.

• keysDown erzählt den Status jeder Taste. wenn der EIN Taste gerade gedrückt, keysDown [A] enthält den Wert wahr. wenn der EIN Taste nicht gedrückt wird, keysDown [A] enthält den Wert falsch.

• Sie können den aktuellen Status jeder Taste bestimmen. Überprüfen Sie einfach die keysDown [] Array den aktuellen Status einer beliebigen Taste zu bestimmen.

• Sie können mehrere Tasten nach unten. Der primäre Zweck dieser Technik ist es zu ermöglichen, für mehrere Tasten gleichzeitig gedrückt werden. In normalen computing, ist es ungewöhnlich, mehr als eine Taste auf einmal haben. In Spielen, ist es sehr häufig mehr als einen Schlüssel zu einem Zeitpunkt, zu drücken, so dass Sie benötigen einen Mechanismus, der diese Erwartung unterstützen kann.

Wie man das Spiel Sprite zu bewegen

Im Wesentlichen weist ein Sprite eine Position, die durch X und Y-Eigenschaften gesteuert wird. Wenn Sie von der Math-Klasse erinnern, X für horizontale Werte und Y für die vertikale Lage. Das Herkunft (0, 0) ist die linke obere Ecke des Bildschirms.

X koordiniert die Arbeit genau wie Sie von Mathe-Unterricht erinnern. Als X-Werte größer werden, nach rechts wird das Sprite bewegt. In der Computergrafik wirkt Y ein wenig anders, als es in Mathematik Klasse tat. Die meisten Display-Hardware-Scans von oben nach unten, so ist Y 0 am oberen Rand des Bildschirms und erhöht sich, wenn Sie nach unten bewegen.

Man beachte, dass die maximale Höhe und Breite werden in Variablen gespeichert: scene.height und scene.width.

All die verschiedenen Bewegungsmethoden sind wirklich über die Manipulation X und Y. Sie diese Werte manuell einstellen (setPosition (), setX (), und Sethos ()), Oder können Sie die Werte ändern (changeXby (), changeYby ()). Jede dieser Methoden wirkt sofort, so dass Sie sie verwenden können, um die Position oder Bewegung des Sprites zu lenken.

Einige dieser Funktionen scheinen ähnlich zueinander. Beispielsweise, changeXby () sieht viel wie setChangeX (). Diese Funktionen haben einen feinen, aber wichtigen Unterschied. Das changeXby () Funktion ändert den Wert von X einmal. Wenn Sie die Änderung fortsetzen wollen, müssen Sie diese Funktion halten aufrufen.

Das setChangeX () Funktion ist leistungsfähiger, weil Sie es einmal nennen kann, und es ändert sich wiederholt x durch den Wert, bestimmen Sie, bis Sie anrufen setChangeX () aufs Neue.

Für die meisten Sprites, die Sie wirklich wollen, um einfach das Sprite einen Winkel geben und eine Geschwindigkeit, und lassen Sie es gehen. Das Elf Objekt hat genau die Methoden, die Sie für dieses Verhalten benötigen. setAngle () Damit können Sie die Richtung der Sprite gehen, um zu bestimmen, und setSpeed ​​() können Sie die Geschwindigkeit in diese Richtung zu gehen angeben. auch wie die meisten Bewegungsfunktionen gibt es changeAngle () und changeSpeed ​​() Methoden.

So steuern Sie das Auto in Ihrem Spiel

Das keysDown Mechanismus kann mit den Bewegungsmethoden kombiniert werden, um Ihr Auto leicht zu steuern. Hier ist der relevante Code aus aktualisieren() aufs Neue:

 Funktion Update () {scene.clear () - // Kontrolltasten if (keysDown [K_LEFT]) { car.changeAngleBy (-5) - } // End if if (keysDown [K_RIGHT]) { car.changeAngleBy (5) - } // End if if (keysDown [K_UP]) { car.changeSpeedBy (1) - } // End if if (keysDown [K_DOWN]) { car.changeSpeedBy (-1) - } // End ifcar.update () -} // end Update

Die eigentliche Codierung ist recht einfach zu verstehen:

1. Deaktivieren Sie die Szene.

   Wie üblich, der erste Auftrag des Geschäfts in der aktualisieren() Funktion ist es, das Spielzimmer aufzuräumen. Stellen Sie sicher, dass Sie das vorherige Bild gelöscht haben, bevor Sie etwas anderes tun.

2. Suchen Sie nach einer links, Pfeil drücken.

   Verwenden Sie die keysDown Mechanismus, um zu bestimmen, ob der linke Pfeil aktuell gedrückt.

3. Wenn die linke Pfeiltaste gedrückt wird, schalten Sie das Auto verlassen.

   Wenn der Benutzer gerade die linke Taste; Pfeil, drehen Sie das Auto fünf Grad gegen den Uhrzeigersinn. Verwenden Sie die changeAngleBy () Verfahren auf das optische Erscheinungsbild des Autos ändern sowie die Richtung es fährt.

4. Wiederholen Sie dies für den Pfeil nach rechts.

   Der rechte Pfeil Prüfung ist ähnlich, aber dieses Mal das Auto fünf Grad im Uhrzeigersinn drehen.

5. Verwenden Sie den Pfeil nach oben zu beschleunigen.

   Wenn der Benutzer den Pfeil nach oben drückt, die Geschwindigkeit des Fahrzeugs ändern. Verwenden Sie einen positiven Wert, das Auto zu beschleunigen. Es wird nicht viel nehmen, weil dieser Code 20-mal pro Sekunde überprüft wird.

6. Langsam das Auto mit dem Pfeil nach unten nach unten.

   Verwenden Sie einen ähnlichen Mechanismus für den Pfeil nach unten. Ändern Sie die Geschwindigkeit durch einen negativen Wert zu bremsen, das Auto nach unten. Dieser Ansatz ermöglicht eine negative Werte, und das Auto wird dann sichern, wenn Sie wollen.

7. Zeichnen Sie das Auto in seiner neuen Position.

   Es ist von entscheidender Bedeutung, sich daran zu erinnern, dass die Sprites Bewegungsfunktionen aufrufen nicht den Standort des Autos zu ändern! Es ändert sich nur interne Daten im Speicher des Spiels. Sie müssen das Auto nennen aktualisieren() Methode, um diese Änderungen in Aktion zu sehen.