So erstellen Sie Whack-a-Mole in Ihr HTML5 Spiel

Die Whack-a-Mole-Genre neu erstellt eine klassische physische Arcade-Spiel in HTML5-Spiel. Im Original-Spiel, haben Sie eine Reihe von Löchern und einen großen Hammer. Wie ein Maulwurf aus einem Loch erscheint, schmatzt der Benutzer sie mit einem Hammer, und es geht in das Loch zurück. Dieses Spiel ist einfach neu zu erstellen, für mobile und traditionelle Desktops und es kann hektischen Spaß sein.

Diese Version erstellt eine Anzahl der Mole in zufälligen Positionen. Jedes Mol hat zwei Zustände: nach oben und unten. Der Maulwurf beginnt im heruntergefahrenen Zustand. Ein Maulwurf im heruntergefahrenen Zustand hat eine zufällige Chance, in jedem Frame auftauchen. Ein Maulwurf, die derzeit auf ist bleibt für eine begrenzte Zeit.

Wenn der Benutzer klickt auf einen Maulwurf in der OBEN Zustand, der Maulwurf fällt und der Spieler erhält einen Punkt. Wenn der Maulwurf letzten Zeitlimit bleibt oben, fällt der Maulwurf, und der Spieler verliert ein Leben.

Wie ein Maulwurf in einem Loch Spiel zu bauen

Das grundlegende Konzept dieses Spiels ist der Maulwurf. Es ist ein einfaches Elf Objekt mit zwei Zuständen. Alles, was der Maulwurf tut, ist wirklich über Zustände zu ändern.

Der Maulwurf hat ein paar Eigenschaften, die es von einem normalen Sprite trennen:

• Bundesland: Die wichtigste Eigenschaft des Maulwurfs ist Bundesland. Dies kann entweder OBEN oder AB. Verschiedene Spiel Verhaltensweisen bewirken, dass der Zustand zu ändern.

• OBEN und AB: Diese Werte werden wie Konstanten behandelt, und sie sind die beiden möglichen Zustände des Maulwurfs verwendet, um anzuzeigen.

• imgUp und imgDown: Das sind die Bilder, die die beiden Staaten. Beachten Sie, dass beide Zustand Bilder gleich groß sein sollte, oder das Sprite erscheint auf dem Bildschirm zu springen, wenn es seinen Zustand ändert.

• popupPerc: Diese Eigenschaft gibt einen Maulwurf die Wahrscheinlichkeit, dass derzeit nach unten ist wird angezeigt. Der Anfangswert ist 1 Prozent. Denken Sie daran, wird dieser Wert 20-mal pro Rahmen überprüft werden, so dass bei 1 Prozent, wird ein nach unten Maulwurf Pop-up (im Durchschnitt) alle 5 Sekunden. Ändern Sie diesen Wert, um die Spielschwierigkeit zu ändern.

• popupLengthDiese Eigenschaft gibt an, wie lange ein Maulwurf sichtbar bleiben, wenn es immer wieder auftauchte. Der Standardwert ist 3 Sekunden, aber Sie können diese anpassen die Mole schneller oder sichtbar bleiben länger verschwinden zu lassen.

Hier sind die wichtigsten Methoden des Maulwurfs Objekt:

• setState (state)Legt den Zustand auf den angegebenen Zustandswert. Staaten werden als Konstanten gespeichert (OBEN und AB). Wenn sich der Zustand geändert wird, ist der Maulwurf Bundesland Eigenschaft wird geändert und das Bild der Maulwurf geändert wird, um den aktuellen Zustand zu reflektieren. Wenn der Staat ist auf OBEN, ein Zeitgeber beginnt, die verwendet wird, zu verfolgen, wie lange der Maulwurf sichtbar ist.

• CheckClick ()zu sehen Checks derzeit, ob der Maulwurf angeklickt wird. Wenn der Maulwurf ist derzeit OBEN, der Maulwurf auszublenden und die Punktzahl erhöhen.

• Checktime (): Das Verhalten dieser Funktion ist abhängig vom Status des Maulwurf. Wenn der Maulwurf noch unten ist, zufällig festzustellen, ob es sollte Pop-up. Wenn der Maulwurf oben ist, prüfen, ob das zu sehen popupLength überschritten wurde. Wenn ja, ein Leben zu verlieren und betrachten das Spiel endet.

Das Checktime Code ist der interessanteste Code in der Maulwurf Spiel, so ist hier die Methode:

 tMole.checkTime = function () {// wenn unten betrachten upif (this.state == DOWN) knallend {randVal = Math.random () - if (randVal lt; this.popupPerc) {this.setState (UP) -} // end if} else {// wenn, überprüfen, um zu sehen, wie lange wir uptime = this.timer.getElapsedTime waren () - if (time> dies. popupLength) {this.setState (DOWN) - // a lifelives verlieren --- if (Leben lt; 0) {saveHighScore () - alert ( "Sie verlieren") - document.location.href = "" -} // end if} // end if} // end if} // end Checktime

Weitere Merkmale der Maulwurf Spiel

Sobald ein einzelner Maulwurf erstellt wurde und wirkt richtig, ist es einfach eine Menge von ihnen zu bauen. Wie üblich, gibt es eine Reihe einer großen Anzahl von Objekten des gleichen Typs zu handhaben. ändern Sie die NUM_MOLES Konstante, die die Anzahl der Mole im Spiel zu ändern.

Beachten Sie auch, dass ein virtueller Joystick wurde hinzugefügt, wenn die Szene einen Hauch Objekt registriert. Dadurch wird der Touchscreen verursachen wie eine virtuelle Maus zu handeln, und ermöglicht das Spiel auf einem Touch-Gerät wiedergegeben werden.

Ein weiteres interessantes Feature ist die High-Score-Mechanismus. Der Computer verfolgt die hohe Punktzahl auf dieser speziellen Maschine. Der High-Score-Mechanismus verwendet ein relativ neues Feature namens lokaler Speicher. Es ist ähnlich wie die bekannten Cookie-Mechanismus, aber sicherer, leistungsfähiger und viel einfacher zu bedienen.

Das getHighScore () Funktion lädt den aktuellen High-Score. Wenn es noch nicht eine hohe Punktzahl, so wird es auf Null gesetzt werden.

 Funktion getHighScore () {// die hohe Punktzahl auf dieser Maschine erhalten mit localStoragehighScore = parseInt (localStorage.getItem ( "moleHighScore")) - console.log ( "Highscore", Highscores) -Wenn (Highscore == "null" | | Highscore == null || isNaN (Highscore)) {Highscore = 0-} // end if} // end getHighScore

Das saveHighScore () Funktion aufgerufen wird, wenn das Spiel endet. Es wird überprüft, um zu sehen, ob die aktuelle High-Score wurde überschritten. Wenn ja, wird die neue High-Score gespeichert.

 Funktion saveHighScore () {if (Hits> Highscores) {alert ( "Neuer High-Score!") - localStorage.setItem ( "moleHighScore", Hits) -} // end if} // end saveHighScore

Selbst wenn der Benutzer die Seite verlässt oder den Browser ausschaltet, wird die hohe Punktzahl aufrechterhalten werden.

Das lokaler Speicher Mechanismus hält nur den Überblick über den aktuellen Browser. Es kann nicht zu überprüfen globalen High-Scores verwendet werden. Dies erfordert serverseitige Programmierung.