05 / Echtzeit-Multiplayer · Eigenes Projekt
3D Target Challenge
Eine Arena. Gemeinsame Zeit. Individuelle Punkte.
Raum erstellen, Freunde einladen und in einer 3D-Ziel-Challenge antreten. Classic, Survival und Blitz sorgen für Abwechslung; die tägliche Challenge bietet einen Solo-Einstieg.
- Meine Rolle
- Spielentwicklung, 3D-Interaktion & Multiplayer-Backend
- Technologien
- React / TypeScript / Three.js / React Three Fiber / Supabase Realtime / PostgreSQL
Das Problem
Ein Browsergame braucht direktes visuelles Feedback; Multiplayer-Runden benötigen konsistente Zeit und Punkte auf verschiedenen Geräten. Auf mobilen Bildschirmen muss dasselbe Spielfeld gut nutzbar bleiben.
Meine Umsetzung
Ich entwickelte die Oberfläche mit React und TypeScript und die 3D-Arena mit React Three Fiber und Three.js. Anonyme Supabase-Sessions, Raumcodes und Echtzeit-Abonnements verbinden Spieler; PostgreSQL-Funktionen verwalten Runden, Treffer und Punkte.
Die Herausforderung
Das Spiel reaktionsschnell darstellen und gleichzeitig Serien, Powerups und doppelte Treffer konsistent behandeln. Die Countdowns der Clients müssen zudem mit Server-Zeitstempeln übereinstimmen.
Technischer Ansatz
Die Datenbank berechnet Punkte und Powerup-Zustände, prüft Spieleridentität und Trefferzeit und sperrt den Rundendatensatz während Änderungen. Eindeutige Treffer verhindern doppelte Wertung. Der Client schätzt die Server-Zeitabweichung; die Arena passt die Kamera an das Bildschirmformat an und nutzt instanzierte Partikel für Treffer-Effekte.
Workflow-Übersicht
Eine Arena. Gemeinsame Zeit. Individuelle Punkte.
- 01Anonyme Session & Raum
- 02Gemeinsame Runde & Ziele
- 03Geprüfter Treffer & Punkte
- 04Echtzeit-Ergebnis & Revanche
Vereinfachte Darstellung des Produktablaufs.
Das Ergebnis