jQuery Vibration Game (3) - Spiel's noch einmal, Sam

Schriftsteller lassen Ihre Romanhelden absichtlich leiden, um die Spannung zu erhöhen und den Leser bei der Stange zu halten. Auch wir haben einen wichtigen Grundstein für die Spielmotivation gelegt, sind aber noch nicht am Ende unserer Möglichkeiten.

Wie schon zu Beginn unseres kleinen Let's Codes erwähnt, sind die Schlösser intelligent und ergreifen Gegenmaßnahmen, um Angriffe abzuwehren. Außerdem sind sie lernfähig und können Ihre Gegenmaßnahmen mit jedem Mal schneller durchführen.

Um den Spieler zu motivieren seine Leistung zu verbessern, wollen wir also seine letzte Highscore als neuen Countdown verwenden. Die Highscore könnten wir in einer Datenbank hinterlegen oder per Cookie speichern, allerdings wollen wir den Spieler nicht nötigen sich vorm Spielen anmelden zu müssen. Es muss also eine bessere Methode her.

Local Storage ist das Zauberwort

Ein weiteres nettes Feature von HTML 5 ist die Möglichkeit Daten dauerhaft (bzw. bis der User seine Daten löscht) auf dem Rechner des Users zu hinterlegen. Der Nutzen für JavaScript-Anwendungen liegt auf der Hand. Es müssen nicht mehr zusätzlich große Daten zwischen Client und Server ausgetauscht werden, um Einstellungen zu laden oder zu speichern. Alles das erfolgt Client-seitig.

Wir wollen hier aber das Rad nicht neu erfinden und greifen deshalb auf ein Library (jStorage - simple JavaScript plugin to store data locally) zurück, welches die Eigenheiten der verschiedenen Browser ausgleicht und uns eine angenehmere API zur Verfügung stellt. Die Einzelheiten der API werde ich im Folgenden nicht detailliert erleutern, da wir uns ja größtenteils mit der Vibration API beschäftigen wollen.

Wir ergänzen unsere Funktion vgHandleWin() um ein paar Zeilen, in denen wir überprüfen ob die Gewinnzeit kleiner ist, als die zuvor gespeicherte. Immer gesetzt den Fall, dass der User vorher schon einmal gespielt hat. Wenn der User also entweder zum ersten Mal spielt oder eine neue Highscore erreicht hat, speichern wir seine Zeit in der jStorage-Variablen vgTimerBest.

if (typeof $.jStorage.get('vbTimerBest') == "number") {
     var vgTimerBest = $.jStorage.get('vbTimerBest');
     if (vgTimerBest > vgTimerCurrent) {
       $.jStorage.set('vbTimerBest', vgTimerCurrent);
     }
  }
  else {
    $.jStorage.set('vbTimerBest', vgTimerCurrent);
  }
}

Diese laden wir bei jedem Neustart des Spiels und ersetzen unseren Default Timer von 60 Sekunden durch den neuen Wert.

var vgTimerMax = 60;
if (typeof $.jStorage.get('vbTimerBest') == "number") {
  vgTimerMax = parseInt($.jStorage.get('vbTimerBest'));
}

Das Spiel wird also nach jedem Sieg schwieriger und der User muss sich von Mal zu Mal mehr anstrengen. Dies funktioniert natürlich nur bis zu einem Minimum, ab dem man sich (aufgrund der Spielstruktur) nicht mehr verbessern kann. Von unseren zu Anfang angedachten Features fehlt nun nur noch das Speichern der Highscore. Immerhin sollen sich die Spieler ja auch untereinander messen können.

Weitere Artikel der Serie

Noch keine Kommentare vorhanden.