IoT Pong

Funktion

Der Spieler startet das Frontend und Backend im Terminal und kann dann die Spielseite im Browser öffnen.
Nachdem sich ein weiterer Nutzer eingeloggt hat, kann er sich mit diesem verbinden und mit dem Spiel beginnen. Für jeden Wurf läuft ein Timer ab, das ist die Zeit, die der Spieler hat um den Ball zu werfen. Trifft er einen Ball, ist das für den Gegner im Browser sichtbar. Falls man daneben wirft, muss man warten bis der Countdown abgelaufen ist. Nachdem ein Spieler alle zehn Becher getroffen hat, ist das Spiel beendet.

Prozess

Ziel des Projektes war es, ein Spiel zu entwickeln, welches jeder von zu Hause aus spielen kann. Enthalten sollten darin Aktuatoren und Sensoren sein. So entstand die Idee eines IoT Pongs, ein Spiel bei dem man Becher treffen muss.
Nachdem die Idee festgestanden war, ging es an die Umsetzung. Parallel haben wir an Backend, Frontend und Hardware gearbeitet.

Hardware

Für die Hardware haben wir Spielbretter gebaut, auf denen am Ende die Becher stehen, wodurch der Ball fällt. Direkt darunter haben wir die Sensoren angebracht. Der Ball fällt durch den Becher auf den Sensor. Der Ball reflektiert das Licht der LEDs auf die IR-Dioden und dadurch wird erkannt, dass der Becher getroffen wurde. Die einzelnen LEDs und Dioden haben wir auf der Rückseite des Spielbretts zusammen gelötet.
Der LED-Stripe auf dem Spielbrett zeigt die Zeit an, die der Spieler noch hat um den Ball zu werfen.

Frontend

Das Frontend ist die Seite, die der Spieler im Browser sieht. Die Daten, die im Frontend angelegt sind, werden mit den Daten, die es vom Backend bekommt, gefüllt. Das Frontend beruht auf dem Framework Vue.js und somit haben die einzelnen Komponenten die gleiche Grundstruktur.

Backend

Das Backend ist dafür zuständig, dass der Spieler die Daten seines Gegners übermittelt bekommt. Denn in dem Backend liegt die eigentliche Spielmechanik. Das Backend sendet mittels MQTT-Nachrichten Spiel relevante Daten raus, wie z. B. das Player-Objekt. Gleichzeitig hört das Backend in sogenannte Topics auf MQTT-Nachrichten von anderen Backends und verarbeitet die Daten. Zudem kommuniziert das Backend mit dem Frontend über Socket.io und versorgt das Frontend mit Daten, welche dann vom Frontend dargestellt werden. Für die Kommunikation zwischen Arduino und Backend wird Serialport genutzt.