Für eine Veranstaltung in der Arbeit habe ich angeboten ein Spiel (Jeopardy) zu erstellen das man mit Buzz-Controllern kontrollieren kann. Da das ganze nach Möglichkeit Plattformunabhängig sein soll und ich keine Lust hatte das in Java zu erstellen habe ich ein wenig mit HTML, JavaScript und CSS gespielt. Die Grundaufgabe ist zwar relativ einfach, allerdings liegt wohl wie immer der Teufel im Detail….
Buzz-Tasten
Ein Kollege war so freundlich ein paar BUZZ! Buzzer zu besorgen die über USB angeschlossen werden. Damit man diese allerdings Nutzen kann muss man ein wenig Tricksen. Zwar implementiert Mozilla eine JoystickAPI in seinen aktuellen Browsern, das funktioniert allerdings nicht in anderen Browsern. Daher habe ich mich dazu entschieden, die Tasten einfach auf normale Keyboard-Tasten zu mappen. Unter Linux funktioniert das wunderbar mit JoyToKey.
Persistenz
Das gesamte Spiel läuft mit Hilfe von Javascript, HTML und CSS auf Clientseite. Die Fragen kommen aus einem JSON Array. Tritt ein Problem im Spiel auf, oder wird aus versehen die Seite neu geladen ist der aktuelle Spielstand verloren. Um das Problem zu beheben stellt HTML5 diverse Möglichkeiten bereit. Da das ganze ohne Server laufen können soll fällt Session Storage allerdings weg. Web SQL Database wird nicht weiter entwickelt und IndexedDB hat keine schöne jQuery API. Aus diesem Grund verwende ich jetzt Local Storage dafür.
Local- und Session-Storage funktionieren beide letzten Endes gleich:
localStorage.setItem('variable', 'inhalt'); // Speichern von Inhalten
localStorage.getItem('variable'); // Abrufen von Inhalten aus dem Storage
localStorage.removeItem('variable'); // Löschen von Inhalten
Nachdem diese beiden “Problemchen” behoben wurden funktioniert das ganze jetzt einigermaßen fehlerfrei. Der Feier steht nichts mehr im Wege :-)