Wie ein süßes HTML5 Spiel William Malone Make

von William Malone

Eine herunterladbare Demo des Spiels ist es am Ende des Artikels zur Verfügung.

Lassen Sie uns vorbereiten

Lassen Sie uns zunächst das BlocksJS Spiel Rahmen von GitHub herunterladen. Herunterladen

Dann lassen Sie uns eine HTML-Datei erstellen und im Kopf-Tag gehören die BlocksJS CSS-Datei wir gerade heruntergeladen haben. Zu diesem Artikel werden wir bauen 0.5.11 verwenden.

Die Invasion beginnt

Jetzt, da wir den Rahmen unseres Spiels haben wir den nächsten Schritt des Fallenlassens Eis am Stiel kann beginnen.

Lassen Sie sich durch Hinzufügen eines Hintergrunds einer screne Landschaft von Gras und Wolken beginnen.

Um den Hintergrund wir eine BLOCKS.slice mit dem Dateinamen erstellen, um die src-Eigenschaft des Parameters Objekt zugeordnet.

Was ist eine BlocksJS Scheibe?

Slice-Animationen können gestoppt werden, pausiert, gespielt, Reset usw. und haben Eigenschaften, die die Animation zu Auto-Reset und Schleife ermöglichen.

wmalone.com/sprite: Sie können im folgenden Artikel weitere Details über Sprite-Animation lesen. Zusätzlich können Sie den Slice-Code in der „src / js“ -Ordner auf Github anzuzeigen.

Wir wollen, dass der Hintergrund auf der unteren Ebene gemacht werden, so setzen wir die Schicht Eigenschaft Scheibe das Spiel Schicht mit einem Index von 0. Schließlich fügen wir die Scheibe auf der Spielstufe, so dass der Hintergrund als Teil des Spiels Schleife machen wird.

Lassen Sie uns eine dropPopsicle Funktion erstellen, damit wir fallen Eis am Stiel kann beginnen.

Ähnlich wie wir den Hintergrund haben wir unser erstes Eis am Stiel erstellen gehen. Der einzige Unterschied vom Hintergrund ist, dass unser Eis am Stiel hat zwei Zustände: ein, wenn es fällt und eine andere, wenn es auf dem Boden abgestürzt ist.

Um das Eis am Stiel wir eine BLOCKS.block anstelle eines BLOCKS.slice erstellen. Ein Block tut alles, was eine Scheibe tut, aber es unterstützt mehrere Staaten. In der Tat kann ein Block besteht aus Scheiben werden. Da unser Eis am Stiel zwei verschiedene Zustände hat, kann man es als ein einzelnen Block behandeln und, wenn es ist der Boden wir einfach sein ändern „abgestürzt“ in Scheiben schneiden. Wir definieren die beiden Scheiben des Blocks mit dem auf die src-Eigenschaft zugewiesen Dateiname und der Name der Scheibe auf den Namen Eigenschaft zugewiesen.

Was ist ein BlocksJS Block?

Die Blöcke sind der Namensgeber des BlocksJS Spiele-Framework. Die Leistung eines Blocks ist seine Fähigkeit, zwischen Scheiben (Bilder oder Animationen) nahtlos zu wechseln, während nicht seine Eigenschaften wie Position ändern, Transparenz, Größe, etc. Zum Beispiel, wenn wir ein Astronaut fliegen durch den Raum haben und Klopfen auf ihr ein schaffen Kraftfeld. Statt ein unsere Astronauten zu verstecken und dann einen neuen Astronauten mit einem Kraftfeld zu schaffen und ihnen die gleiche Position, Geschwindigkeit zuweisen usw. können wir nur dem Astronauten Block sagen zu seinem Kraftfeld in Scheiben schneiden und alle Animationseigenschaften automatisch sein werden mich ändern auf das Kraftfeld Version des Astronauten zugewiesen.

Zusätzlich erbt ein Block der Eigenschaften eine Scheibe und eine Ansicht, die es bedeutet, Funktionalität, wie die Kollisionserkennung unterstützt, Motoren (Verhaltensweisen wie Tweens), Hotspots, und Animationssteuerung, wie Play, Stop und Pause.

Sie können in der „src / js“ -Ordner auf Github den Blockcode anzuzeigen.

Wir wollen, dass das Eis am Stiel über dem Hintergrundschicht (Schicht 0) gerendert wird wir seine Schicht-Eigenschaft auf das Spiel Schicht mit einem Index von 2. Wie zuweisen, bevor wir den Block der Spielstufe hinzufügen, so dass das Eis am Stiel als Teil des Putzes wird Spielschleife.

Jetzt haben wir eine Funktion, aus der wir neue Instanzen von Eis am Stiel laichen können, die den Terror auf unser Dorf regnen wird. Wenn wir ein neues Eis am Stiel laichen wir nicht wollen, dass es von der exakt gleichen Stelle fallen zu lassen, so dass wir Math.random verwenden. die eine Zufallszahl zwischen 0 und 1 (gut acutally 0,999999.) zurück. unseren Zufallswertes mit der Breite des Bildschirms erhalten wir eine zufällige x-Position auf dem Bildschirm durch die Multiplikation. Und da wir nicht wollen, ein Eis am Stiel teilweise von der rechten Seite des Bildschirms wird wir mehrere von der Spielbreite minus dem Eis am Stiel Breite.

Die Y-Position des Eis am Stiel ist auf minus der Höhe des Eis am Stiel. Dies legen Sie das Eis am Stiel in unmittelbarer Nähe der oberen Rand des Bildschirms.

Der nächste Schritt in unserem dropPopsicle ist das Eis am Stiel von seiner Ausgangsposition auf den Boden zu animieren.

Eis am Stiel-Tropfen-Animation

Der Wert der Callback-Eigenschaft des addMotor Methode wird eine Funktion aufrufen, sobald die Animation abgeschlossen ist. In dieser anonymen Funktion ändern wir das Eis am Stiel in seine „abgestürzt“ Scheibe wird die „abgestürzt“ -Version der Ei am Stiel Bild anzuzeigen.

Was ist ein BlocksJS Motor?

Ein BlocksJS Motor fügt ein Verhalten zu einer Ansicht (beispielsweise Block oder Scheibe). Befestigen eines Motors kann eine numerische Eigenschaft wie Position oder Skalierung oder Rotation Tweens. Ein Motor ist nicht nur ein Tween, weil es eine Ansicht ziehbar machen kann, oder es kann als ein Bewegen einer Ansicht auf einer Diagonalen auf einmal solche mehrere Eigenschaften steuern, welche die X- und Y-Positionen mit unterschiedlichen Raten ändert.

Sie können in der „src / js“ -Ordner auf Github den Motorcode anzuzeigen.

Innerhalb der Callback-Funktion erstellen wir auch einen Ticker, der die Schmelze Funktion nach ein paar Sekunden aufrufen wird das zerstörte Eis am Stiel aus dem Spiel zu entfernen.

Was ist ein BlocksJS Ticker?

In der Hitze unserer ruhigen Landschaft unseres Eis am Stiel auf dem Boden nicht lange bleiben. Ein paar Sekunden nach der Kollision jeden Eis am Stiel-Instanz, die Schmelze Funktion aufruft. Der Schmelzprozess fügt drei Motoren zum Eis am Stiel-Block, der 3 Eigenschaften tweenen werden: alpha. cropHeight. und Y-Position.

Eis am Stiel Melt-Animation

Um das Eis am Stiel Eigenschaften tweenen zu simulieren schmelzen wir Motoren für jede Eigenschaft hinzufügen werden:

Der Alpha-Motor wird die Transparenz des Eis am Stiel von vollständig undurchsichtig bis transparent Tween.
Der Y-Motor wird das Eis am Stiel nach unten durch ein Eis am Stiel Höhe bewegen.
Der cropHeight Motor wird die Unterseite des Eis am Stiel beschneiden, wie es schmilzt.

Wir werden eine Lockerung Wert von „easeIn“ gesetzt, wie wir mit dem Eis am Stiel haben den Beginn der Animation zu verlangsamen.

Nachdem die Schmelze abgeschlossen ist werden wir das Eis am Stiel aus der Welt und aus dem Gedächtnis zerstören. Dazu müssen wir eine Funktion zum Rückruf von einem der Motoren hinzuzufügen. Die Zerstörung des Eis am Stiel beinhaltet den Block von der Spielstufe entfernt wird, Aufruf der Methode zerstören und schließlich alle Bezugnahme auf das Eis am Stiel-Instanz zu entfernen, indem sie auf null.

Der Aufruf Bewehrungen

Beherrschung der Welt würde von mehr als eine Art von Eis am Stiel profitieren:

Um zusätzliche Eis am Stiel zu unterstützen definieren wir die Eis am Stiel Spezifikation genau wie wir mit dem creamsicle tat aber diesmal legen wir die Definitionen in ein Array sind wir spec.popsicles aufrufen. Dies ermöglicht den Zugriff auf zusätzliches Eis am Stiel genannt: „bombpop“, „Eis am Stiel“ und „Push-up“.

Für den Zugriff auf vollständig unseren Zucker Arsenal wir wieder zu Math.random drehen. Wir mehr durch die Länge des spec.popsicles Array und dann diesen Wert Math.floor und wir am Ende mit einer Zufallszahl (d.h.en 0. 1. 2 oder 3). Der folgende Code wird eine zufällige Eis am Stiel-Block aus dem Array erstellen wir gerade gemacht.

Wir müssen tatsächlich das Eis am Stiel fallen. Wir tun dies, indem Sie die dropPopsicle Funktion aufrufen.

Um es Eis am Stiel regnet wir Ticker am Ende der dropPopsicle Funktion hinzufügen müssen. Dadurch wird sichergestellt, dass das Eis am Stiel kommenden halten. Der zweite Parameter des addTicker Methode ist die Verzögerung, bevor die Funktion aufrufen. In dieser Demo werden wir es wirklich regen machen, indem ein Eis am Stiel zweimal pro Sekunde oder 500 Millisekunden fallen.

Die folgende Demo fällt zufällig am Stiel ganz über den Platz.

Es nimmt ein Dorf

Es wäre nicht Zerstörung, ohne etwas zu zerstören. Lassen Sie uns einige Strukturen schaffen.

Zuerst haben wir einen neuen Block in einer Funktion namens spawnStructure erstellen. Da unsere Struktur drei verschiedene Zustände hat definieren wir drei verschiedene Scheiben in dem Scheiben-Array des neuen Blocks. Jede Scheibe Definition enthält den Namen der Scheibe ( „inaktiv“. „Aktiv“ und „gebrochen“) und die Dateinamen der Scheibe des Bildes über seine Eigenschaft src.

Lassen Sie sich die Strukturen auf der Schicht mit dem Index von 1 gesetzt, so dass es über dem Hintergrund (Schicht 0) und hinter dem Eis am Stiel (Schicht 2) sein wird. Und schließlich haben wir die Struktur auf der Spielstufe über seine addView Methode hinzufügen.

Lassen Sie sich zufällig die x-Position der neuen Struktur positionieren, so wie wir, bevor sie mit dem Eis am Stiel taten. Wir setzen die y an die Stelle des Bodens. Wir initialisieren auch eine numHits Eigenschaft, die wir später eine Struktur, den Überblick über die Anzahl der von einem Eis am Stiel getroffen zu halten verwenden.

Statt eine neue Struktur aus dem Nichts nur erscheinen, machen sie es ins Leben animiert.

Laichen Struktur-Animation

Wir können das Laichen der Struktur animieren, indem Sie ein paar Motoren und fügte hinzu:

Der Y-Motor wird die Struktur in der Y-Richtung bewegen. Wir setzen die Dauer-Eigenschaft auf 500 Millisekunden und die Menge Eigenschaft auf die negative Höhe der Struktur. Die Lockerung der Eigenschaft „easeOut“ wird die Animation am Ende verlangsamen.
Der cropHeight Motor wird das Zelt beschneiden, um es aus dem Boden zu simulieren kommen. Wir setzen die gleichen Eigenschaftswerte als y Motor außer wir einen positiven Wert der Strukturhöhe verwenden, da wir die cropHeight zu erhöhen, wie es belebt werden sollen.

Kollisionserkennung

Jetzt, da wir Strukturen in dem Spiel lassen Sie uns vernichten!

Um festzustellen, ob das Eis am Stiel auf einer der Strukturen gelandet werden wir Kollisionserkennung verwenden. Es gibt viele verschiedene Arten von Kollisionserkennung; in diesem Fall werden wir eine Rechteck-Rechteck-Technik verwenden. Wir werden den Begrenzungsrahmen (ein Rechteck mit der gleichen Position und die Breite und Höhe) des Eis am Stiel werden verglichen und Begrenzungsbox der Struktur. Wenn die beiden Rechtecke Overlay in irgendeiner Weise dann betrachten wir eine Kollision erkannt.

Um die Dinge etwas einfacher sind wir nur einmal gehen zu überprüfen, wenn das Eis am Stiel landet. Das Kollisionstest müssen auf alle Strukturen in einer einfachen for-Schleife durchgeführt werden, sobald das Eis am Stiel auf dem Boden aufschlägt.

Unter Verwendung des BlocksJS isRectInside Verfahren, die auf jeder Ansicht verfügbar ist (beispielsweise Block oder Scheibe) wir die Begrenzungsbox des Eis am Stiel mit dem Begrenzungsrahmen jeder Struktur zu vergleichen.

Wie funktioniert BlocksJS rechteckige Kollisionserkennung handhaben?

BlocksJS unterstützt mehrere verschiedene Arten von Kollisionserkennung. Um zu bestimmen, ob zwei Rechtecken Overlay wir die isRectInsideRect Methode in der Toolbox verwenden können. Dieses Verfahren ist auch auf jeder Ansicht (beispielsweise Block oder Scheiben).

Die Funktion nimmt zwei Rechtecken als Argument und vergleicht dann die Bounding-Boxen, die Position unter Verwendung von (x und y) und den Abmessungen (Breite und Höhe), um zu bestimmen, ob es eine Kollision gibt. Wenn eine Kollision wird die Funktion return true erkannt wurde.

Wenn eine Kollision erkannt wird erhöht wir die numHits Eigenschaft der Struktur, die wir mit kollidierte.

Der erste Kollisions ändert sich die Farbe der Struktur für einen Moment, der zweite es zusammenbricht.

Das erste Mal wird die Struktur getroffen (auch bekannt als die numHits Eigenschaft 1), dann werden wir die Struktur der Scheibe auf „aktiv“ setzen. Dadurch wird die Struktur Bild auf das rote Zelt ändern.

Außerdem haben wir einen Ticker, der die resetStructure nach 2500 Millisekunden rufen sie zu ändern, um seine ursprüngliche Farbe zurück.

Die resetStructure Funktion wird unsere „aktiv“ (rot) Struktur in seinem „inaktiv“ (braun) slice zurückgesetzt. Allerdings müssen wir vorsichtig sein; durch die Zeit, die Funktion noch Eis am Stiel genannt, die die Struktur getroffen haben könnte und brach es. Wenn das der Struktur passiert wäre in der „broken“ (kollabierten) Zustand sein, so hätten wir es nicht (ein nicht kollabierten rot) zurück zu seiner „aktiven“ ändern wollen Zustand. Zum Glück können wir die Struktur des aktuellen Status mit Hilfe der getSlice Methode des Blocks bestimmen. Es gibt den aktiven Slice-Block. Wir können die aktive Scheibe Namen Eigenschaft lesen, um zu bestimmen, welche Scheibe zur Zeit-Anzeige wird. So können wir nur zurückgesetzt, um die Struktur, wenn die Eigenschaft Name der Scheibe ist gleich der Zeichenfolge „aktiv“.

Wenn die Struktur zweimal getroffen wurde (auch bekannt als die numHits Eigenschaft ist 2), dann werden wir die Struktur der Scheibe zu „gebrochen“ setzen. Dadurch wird das Bild des Zeltes in ihre zusammengeklappte Version ändern.

Wir haben auch ein paar Tickern, die sowohl die Struktur zerstören und dann eine neue laichen.

Genau wie wie wir zerstörten das Eis am Stiel wir die Struktur des Block von der Bühne zu entfernen, rufen die Methode zerstören, und die Struktur aus dem Strukturfeld entfernen.

Jetzt sehen wir die Zerstörung in unserer zweiten Demo erfolgen.

Der Held in allen uns

Wir haben müßig die Zerstörung unseres Dorfes zu lange beobachtet. Es ist Zeit, wir wehren!

Um das Eis am Stiel Invasion stoppen müssen wir das Eis am Stiel in tausend Stücke erschließen. Hinzufügen eines Ereignis-Listener das Controller-Objekt des Spiels wird es uns ermöglichen, eine Funktion aufzurufen, wenn ein Benutzer mit einer Maus klickt oder ein berührt den Bildschirm auf einem Touch-Gerät. Beide Veranstaltungen werden in einen „tap“ Ereignis abstrahiert. Wir fügen die Zeichenfolge „tap“ und die Funktion gameTapped als Parameter der addEventListener-Methode des Controller-Objekt. Dies wird die gameTapped Funktion aufrufen, wenn ein „tap“ Ereignis ausgelöst wird.

Wie funktioniert BlocksJS Interaktion mit dem Benutzer umgehen?

BlocksJS hat ein Controller-Objekt, das auf das Spiel für uns automatisch Zuhörer Interaktion mit dem Benutzer hinzufügt. Statt Ereignis-Listener für beide Maus und Touch-Geräte hinzufügen, die können wir auf ein „tap“ Ereignis hören. Das Controller-Objekt behandelt dies sowohl durch das Hören Touch und Mausereignisse. Wenn jeder Fall die Steuerung erkannt wird, feuert ein „tap“ Ereignis von dem Controller-Objekt.

Der Controller löst auch die Maus und Touch-Ereignisse getrennt, falls Sie ein anderes Verhalten für Mausereignisse vs Touch-Ereignisse haben wollen. Sie können zum Beispiel durch den Zusatz „mouseDown-“ als erstes Argument der addEventListener Methode nur für ein Maus-Down-Ereignis hören.

Ein andere Sache, das Controller-Objekt für uns tut, ist es die Position der Mausklick oder Berührung mit dem Finger auf das Spiel beziehen, anstatt relativ zu dem Fenster gibt das Spiel in vorhanden ist. Dies geschieht mit Hilfe der getElementPos Funktion durchgeführt, die die übergeordneten kriecht nach oben Elemente und stellt die Position des Spielelement die relative Position zu bestimmen.

Sie können in der "src / js" -Ordner auf Github den Controller-Code anzuzeigen.

Früher, zu bestimmen, ob ein Eis am Stiel und Struktur kollidiert, haben wir Rechteck-Rechteck-Erkennung. Um festzustellen, ob ein Eis am Stiel, und tippen Sie kollidieren werden wir Punkt-Rechteck Kollisionserkennung verwenden, da im Gegensatz zu der Struktur ein Hahn ein Punkt und kein Rechteck; es hat nur eine Position nicht mit einer Breite und Höhe.

Wie funktioniert BlocksJS Punkt Kollisionserkennung umgehen?

BlocksJS unterstützt mehrere verschiedene Arten von Kollisionserkennung. Um zu bestimmen, ob ein Punkt innerhalb eines Rechtecks ist, dass wir die isPointInsideRect Methode in der Toolbox verwenden können. Dieses Verfahren ist auch auf jeder Ansicht (beispielsweise Block oder Scheiben).

Die Funktion nimmt einen Punkt und ein Rechteck als Argumente, und bestimmt dann, ob der Punkt innerhalb des Begrenzungsrahmens des Rechtecks ist. Wenn eine Kollision wird die Funktion return true erkannt wurde.

Die gameTapped Funktion wird jedes Mal, wenn ein Benutzer tippt genannt. Es hat nur ein Argument: das Punktobjekt, das die X- und Y-Position dieses tap relativ zum Spiel enthält.

Um zu überprüfen, denn wenn der Benutzer ein Eis am Stiel uns Schleife durch die Anordnung von Eis am Stiel angezapft und rufen jedes isPointInside Methode des Eis am Stiel. Wenn die Methode true zurückgibt, dann haben wir ein Eis am Stiel angezapft.

Wenn wir ein Eis am Stiel tippen dann werden wir genaue Rache auf drei Arten.

Tippen Sie Popsicle-Animation

Zuerst stoppen wir das Eis am Stiel abfällt. Wir tun dies mit dem removeMotors Verfahren, das den y Motor entfernt wir hinzugefügt, die das Eis am Stiel verursacht zu bewegen.

Als nächstes werden wir das Eis am Stiel verblassen. Wir tun dies, indem sie einen neuen „Alpha“ Motor hinzufügen. Eine Ansicht beginnt standardmäßig mit einem Alpha-Wert von 1 (vollständig undurchsichtig). Durch Einstellen der Menge Eigenschaft des Motors auf -1 der „alpha“ Motor tweenen diesen Wert von 1 bis 0 (vollständig transparent).

Schließlich fügen wir einen Ticker, der die Funktion destroyPopsicle nach einer Verzögerung von 500 Millisekunden nennen.

In unserer letzten Demo sind Sie dran, dieses Invasion Eis am Stiel und speichert unser Dorf tippen!