Punktetafel
Umlaufende Punktetafel für Echtzeit-Spielstände
Was ist eine Punktetafel?
Eine Punktetafel ist ein Werkzeug zur Punkteverfolgung bei Sportveranstaltungen und Spielen. Diese Online-Punktetafel repliziert das Aussehen und die Umlaufanimation einer echten mechanischen Punktetafel und bietet ein immersives Erlebnis für Tischtennis, Badminton, Basketball, Brettspiele, Quizabende und mehr.
Sie bietet mehrere Farbschemas wie Rot-Blau und Rot-Gelb, unterstützt bis zu 6 Teams und verfügt über einen Vollbildmodus für Projektionen auf Großbildschirme. Alle Daten werden automatisch im lokalen Browser-Speicher gespeichert.
Eine digitale Anzeigetafel hält Punkte, Teams, Runden oder Zeitstände sichtbar fest. Sie eignet sich für Unterricht, Training, kleine Turniere, Quiz, Brettspiele und Livestreams. Vor dem Einsatz sollte klar sein, ob Punkte manuell geändert, zurückgesetzt oder nach Runden gespeichert werden müssen. Für offizielle Wettbewerbe braucht es zusätzlich Regeln, Protokollierung und eine zweite Kontrolle.So geht's
So geht's
- Farbschema wählen: Rot-Blau, Rot-Gelw und weitere
- Auf den Teamnamen klicken, um ihn zu bearbeiten
- Mit den Tasten + und – die Punktzahl anpassen
- Auf die Vollbild-Taste klicken, um auf den Großbildschirm zu projizieren
Anzeige-Tipps
- Aktivieren Sie den Vollbildmodus vor Veranstaltungsbeginn, damit Namen, Farben und Punktzahlen von den Zuschauerplätzen aus gut lesbar sind.
- Wenn die Punktzahlen offiziell zählen, führen Sie zusätzlich eine schriftliche oder systemseitige Aufzeichnung, falls der Browser-Tab geschlossen oder der lokale Speicher gelöscht wird.
Anwendungsfälle
Technisches Prinzip
Die Punktetafel läuft als kleiner clientseitiger Zustandsautomat: Jedes Team ist ein Objekt mit Name-, Punktzahl- und Farbfeldern, und die gesamte Mannschaftsliste wird bei jeder Änderung als JSON-Zeichenkette in window.localStorage persistiert. Da localStorage synchron ist und auf Ursprung plus Browserprofil beschränkt ist, überlebt derselbe Tab einen Refresh, aber ein anderer Browser oder ein Inkognito-Fenster beginnt mit einer leeren Mannschaftsliste. Die Flip-Ziffernanimation ist reines CSS: Jede Ziffer besteht aus zwei Hälften, die um die X-Achse rotieren, und eine Punktzahländerung tauscht die sichtbare Ziffer, während eine 300–400 ms dauernde transform: rotateX-Transition die Klappe animiert. Da die Animation vom lokalen Zustand und nicht von einem Netzwerkframe angetrieben wird, bleibt die Anzeige auch animiert, wenn das Venue-WiFi mitten im Spiel ausfällt. Die Vollbildpräsentation verwendet die Standard-Fullscreen-API (element.requestFullscreen, document.exitFullscreen), sodass die Tafel einen Projektor oder TV ohne Browser-Chrome ausfüllt. Die Synchronisierung mehrerer Tabs nutzt das storage-Event: Wenn sich der localStorage-Schlüssel in einem Tab ändert, empfängt jeder andere Tab auf demselben Ursprung ein StorageEvent und rendert aus dem aktualisierten JSON neu. So bleiben Schiedsrichter-Handy und Spielfeld-Laptop ohne jedes Backend synchron, da keine Daten das Gerät verlassen.
- Zustandspersistenz: window.localStorage.setItem mit einer JSON-stringifizierten Mannschaftsliste bei jeder Punktzahländerung, beschränkt auf Ursprung und Browserprofil
- Flip-Animation: zwei CSS-Pseudo-Hälften, animiert mit transform: rotateX über ca. 300–400 ms; keine JS-Animationsschleife nötig
- Fullscreen-API: element.requestFullscreen() / document.exitFullscreen() mit dem fullscreenchange-Event zur Erkennung des Beendens per Esc-Taste
- Multi-Tab-Synchronisierung: window.addEventListener('storage', handler) feuert auf jedem anderen Tab, wenn sich der Schlüssel ändert
- Punktzahlminimum: Punktzahlen werden bei Null begrenzt, sodass die Minustaste bei lockeren Spielen keine negativen Ergebnisse erzeugt
- Farbthema: CSS Custom Properties (--team-a, --team-b) tauschen die Palette ohne Neurendering des DOM-Baums
- Punktzahlgrenzen richten sich nach dem aktiven Regelsatz, z. B. Basketball hat keine Grenze, Tischtennis endet bei 11 mit einer 2-Punkte-Einzelerregel
Beispiele
Basketball-Anzeigetafel zur Halbzeit
Team A: Lakers Farbe: Rot
Team B: Celtics Farbe: Blau
Q1: 22 - 18
Q2: 41 - 38 (Halbzeit)
Q3: 60 - 55
Q4 Endstand: 82 - 76
Design: Rot-Blau, Vollbild auf HallenprojektorTennismatch nach Sätzen
Satz 1: 6 - 4 (Spieler A gewinnt)
Satz 2: 3 - 6 (Spieler B gewinnt)
Satz 3: 7 - 5 (Spieler A gewinnt)
Endstand: Spieler A gewinnt 2:1
Tipp: Teams in Spielernamen umbenennen, zwischen Matches zurücksetzenQuiz-Abend mit 4 Teams
Runde 1: Team Quokka 8, Team Otter 6, Team Bear 7, Team Wolf 5
Runde 2: 14, 13, 12, 10
Runde 3: 21, 22, 17, 16
Endstand: 30, 31, 25, 23 -> Otter gewinnt
Bis zu 6 Teams unterstützt, Punktestände werden im localStorage gespeichertTischtennis, Spiel auf 11 Punkte
Punktverlauf: 1-0, 2-0, 2-1, 3-1, 3-2, 3-3, 4-3, ..., 10-9
Einstand bei 10-10: zwei Punkte Vorsprung erforderlich
Endstand: 12 - 10
Design: Rot-Gelb für kontrastreiche Großbildansicht
„Punkte zurücksetzen“ behält Spielernamen für das nächste SpielFAQ
Für welche Sportarten passt es?
Ursprünglich für Tischtennis und Badminton im Klapp-Stil entworfen (plötzlicher Wechsel, große fette Ziffern). Funktioniert genauso gut für Brettspiele, Quizabende, Basketball, Volleyball, Esports-Turniere, Klassenwettbewerbe und jede schnelle Punktanzeige.
Kann ich Teamnamen und Farben anpassen?
Ja. Bearbeite Teamnamen direkt durch Anklicken. Wähle aus voreingestellten Farbthemen (rot-blau, rot-gelb usw.), passend zu deinem Event. Es gibt keine Logo- oder Bild-Upload-Funktion.
Wie funktioniert die Klapp-Animation?
Es ist eine CSS-3D-Transform-Animation, die mechanische Klappkarten nachahmt. Die Klappdauer ist kurz genug, um schnelles Punkten nicht zu bremsen (wenige hundert ms). Deaktiviere die Animation in den Einstellungen, wenn du sofortige Updates bevorzugst.
Bleibt der Punktestand beim Aktualisieren erhalten?
Ja. Die aktuelle Aufstellung (Teamnamen, Punkte, Farben) wird bei jeder Änderung in localStorage gespeichert, sodass ein Refresh im selben Browser den Stand erhält. Ein Browserwechsel oder Löschen der Website-Daten setzt auf 0:0 zurück.
Kann ich es auf einem Beamer oder großen Bildschirm nutzen?
Ja. Die Anzeigetafel unterstützt Vollbildmodus, sodass du sie auf Beamer, TV oder externem Monitor anzeigen kannst. Punkte werden in localStorage gespeichert und überstehen einen Refresh im selben Browser.
Unterstützt es Satz-/Spielzählung (z. B. Tennis)?
Manche Versionen ja – sie lassen dich eine „Best of N“-Satz-Struktur definieren und Punktzähler am Ende jedes Satzes zurücksetzen. Einfachere Builds tracken nur reine Punkte. Wähle den passenden Modus für deine Sportart.
Wird etwas hochgeladen?
Nein. Die Anzeigetafel läuft komplett in deinem Browser. Punkte leben in deinem Tab und (optional) in localStorage. Es wird nichts an einen Server geteilt.