Mein perfektes Tetris
Was ist das
Tetris ist ein legendäres Spiel und eines, das mir sehr viel Freude bereitet. Ich liebe das Spiel wirklich und spiele es gerne. Es ist ein großartiger Stressabbau. Als spaßiges Wochenendprojekt beschloss ich, das Spiel als Browser-Spiel/App für Desktop und Mobil zu bauen, basierend auf den Prinzipien des Vibe-Coding. Die mobile Seite dieser Version wurde von Play-Tetris inspiriert, das ein wirklich schönes Mobil-Setup mit seinen Wisch-Steuerungen hat. Schau dir meine Implementierung von Tetris hier an und spiele sie, es ist das, was ich für die “perfekteste” Version von Tetris halte.
Über den Code hinaus
Ich hatte nicht vor, einen Tetris-Klon als Portfolio-Projekt zu erstellen oder etwas Neues zu lernen. Ich habe ihn gebaut, weil ich ihn wirklich gebraucht habe. Wenn ich gestresst bin, sei es wegen einer harten Arbeitswoche oder weil das Leben sich anhäuft, ist Tetris eines der wenigen gesunden Dinge, die mir tatsächlich helfen, wieder auf Reset zu schalten. Wenn ich gestresst bin, neige ich dazu, viel zu essen, was sich über die Zeit summiert, deshalb ist es für mich wichtig, etwas zu haben, das funktioniert ohne Nachteile. Nur 10 bis 30 Minuten Blöcke fallen lassen, und mein Gehirn fühlt sich ein wenig gereinigt an. Es ist für mich nicht nur ein beiläufiges Entspannen, es ist eine Möglichkeit, etwas Einfaches und Fokussiertes zu haben, in das ich diesen Stress hineingeben kann. Es gibt sogar einige interessante Forschungen, die zeigen, dass Tetris beeinflussen kann, wie das Gehirn mit aufdringlichen Erinnerungen und Stress umgeht, zum Beispiel in Trauma-Film-Experimenten, bei Menschen, die nach echten Unfällen behandelt wurden, und als Ergänzung zur Therapie mit messbaren Gehirnveränderungen. Ich versuche nicht, dieses Spiel in eine medizinische Behandlung zu verwandeln, aber es ist cool zu sehen, dass es möglicherweise echte Wissenschaft gibt, die das stützt, was ich bereits fühle: dass Tetris Menschen wirklich helfen kann, mit Stress umzugehen.
Also suchte ich nach einer guten Version von Tetris zum Spielen, und das Problem war, dass nichts wirklich so war, wie ich spielen wollte. Mobile Apps im iOS App Store sind voller Werbung und Mikrotransaktionen. Web-Versionen waren ruckelig oder fühlten sich auf einem Telefon schrecklich an. Die klassische NES-Version ist großartig, benötigt aber einen Emulator und zusätzliche Hardware. Ich habe sogar eine Miyoo Mini gekauft, weil ich dachte, sie würde das Problem lösen, und am Ende trug ich nur ein zweites Gerät herum, nur um Tetris zu spielen. Irgendwann wurde mir klar, dass ich mehr Zeit damit verbrachte, nach der richtigen Version zu suchen, als es dauern würde, einfach eine zu bauen.
Mit modernen Browsern, LLM-Tools wie Claude Code und Workflows wie Vibe-Coding fühlte es sich endlich wie der richtige Zeitpunkt an, das Tetris zu bauen, das ich selbst wollte. Schnell, minimal, keine Werbung, keine Konten, kein App-Store. Nur ein Browser-Spiel, das auf meinem Telefon und meinem Laptop funktioniert und das ich vollständig kontrolliere. In etwa einem Tag hatte ich eine funktionierende Version, und nach etwa einer Woche mit abwechselnder Arbeit, um sie robust zu machen und das Spielgefühl auf Desktop und Mobil richtig hinzubekommen, war ich zufrieden damit.
Ich teile es, weil es mich wirklich glücklich machen würde, wenn es auch nur einer anderen Person hilft, sich so zu entspannen, wie es mir hilft. Es ist eine kleine Sache, aber manchmal ist eine kleine Sache genau das, was man braucht.
Funktionen
- Klassisches 10x20 Tetris-Brett
- Volle Tastatursteuerung auf dem Desktop und Touch-Gestensteuerung auf Mobilgeräten
- Standard-Zufallsfolge mit sieben Beuteln
- Bereithalten eines Steins und Vorschau der nächsten Steine
- Geisterstein-Projektion, die zeigt, wo die Steine landen werden
- Levelbasierte Geschwindigkeitskurve mit dynamischer Sperrverzögerung
- Punkte-, Linien-, Level- und Highscore-Verfolgung, die in der lokalen Speicherung erhalten bleibt
- Punktevergabe für sanftes Absenken und schnelles Absenken
- In-Game-Menü mit Fortsetzen, Neustart, Beenden, Musik/SFX stummschalten und Link zum Quellcode
- Flash-Animation beim Lesen von Linien mit Soundeffekt
- Unterstützung für iOS Safe Area (Dynamic Island, Notch, Home-Indikator)
- Offline-Unterstützung über Service Worker (funktioniert ohne Internet nach dem ersten Besuch)
- Als PWA installierbar (Zum Startbildschirm auf iOS/Android hinzufügen für eine app-ähnliche Erfahrung)
Steuerung
Desktop (Tastatur)
| Aktion | Tasten |
|---|---|
| Bewegen | ← → oder A D |
| Sanftes Absenken | ↓ oder S |
| Schnelles Absenken | Space |
| Drehen im Uhrzeigersinn | ↑ W X |
| Drehen gegen den Uhrzeigersinn | Z |
| Bereithalten | C oder LShift |
| Menü | Esc oder M |
| Quellcode | G (Titelbildschirm) |
Mobil (Touch)
| Aktion | Geste |
|---|---|
| Bewegen | Wischen nach links / rechts |
| Sanftes Absenken | Gedrückt halten und nach unten ziehen |
| Schnelles Absenken | Kurzes schnelles Wischen nach unten |
| Drehen im Uhrzeigersinn | Tippen |
| Bereithalten | Kurzes schnelles Wischen nach oben |
Schwierigkeitsverlauf
Die Geschwindigkeitskurve und die Sperrverzögerung in dieser Version wurden mithilfe von Forschungen darüber abgestimmt, wie klassische und moderne Tetris-Spiele die Schwierigkeitsentwicklung handhaben. Im ursprünglichen NES Tetris erreicht die Gravitation pro Frame eine Reihe bei Level 29, was zum berühmten “Kill Screen” wurde, bei dem das Spiel für die meisten Menschen praktisch unspielbar wird. Das war nicht wirklich ein geplantes Ende, es war mehr ein Nebeneffekt der Hardware und davon, wie DAS (Delayed Auto Shift) zu langsam war, um mit der Fallgeschwindigkeit Schritt zu halten. Willis Gibson bewies dies 2024, als er darüber hinaus ging und das Spiel bei Level 157 abstürzen ließ.
Moderne Spiele wie TGM (Tetris: The Grand Master) lösten das anders. Anstatt die Teile einfach immer schneller fallen zu lassen, bis das Spiel zusammenbricht, begrenzt TGM die Gravitation bei 20G (Instant Drop) und verengt dann andere Zeitfenster wie Sperrverzögerung und DAS, um die Schwierigkeit zu erhöhen. Der Tetris Guideline-Standard verwendet 500 ms Sperrverzögerung mit bis zu 15 Bewegungs-Resets, dem dieses Spiel folgt. Forschungen zu TGM2 Death mode und TGM3 Shirase zeigten, dass die praktische Untergrenze für kompetitives Spiel bei etwa 250 ms Sperrverzögerung mit schnellem DAS liegt, während alles unter 133 ms Spezialgebiet ist.
Basierend auf alldem deckelt die hier verwendete Geschwindigkeitskurve die Gravitation bei 33 ms pro Reihe (ähnlich wie NES-Level 19 bis 28), anstatt auf Instant Drop zu gehen, und DAS skaliert von 170 ms bis auf 100 ms auf höheren Levels, damit man das Brett während der Sperrverzögerung durchqueren kann. Das Ziel war, hohe Levels brutal schnell, aber dennoch fair zu gestalten, näher an dem, wie Tetris 99 und TGM das Endspiel handhaben, statt dem ursprünglichen NES-Ansatz, die rohe Geschwindigkeit einfach die Steuerung überrennen zu lassen.
Unter der Haube
- Responsives Design, optimiert für Desktop und Mobil (Hochformat)
- Vorgefertigte Block-Sprites und Gitterhintergrund für Performance
- Verwendet ein Super Rotation System (SRS)-ähnliches Wall-Kick-Verhalten für Drehungen
- Geschwindigkeitsbasierte Touch-Gesten-Erkennung für zuverlässige Unterscheidung zwischen Schnippen und Ziehen
- Levelbasiertes Timing-System für Gravitationstempo und Sperrverzögerung
- Highscores und Audioeinstellungen werden mit
localStoragepersistiert - Hintergrundmusikquelle NmCCQxVBfyM
- Soundeffektquelle für Linienräumen UMViM2tHrOk
- Das Projekt ist vollständig Open-Source unter der MIT-Lizenz
- Gebaut mit den folgenden KI-Tools:
- Claude Code CLI - Codierung/Entwicklung
- Gemini CLI - Codierung/Entwicklung
- Cha CLI - Codierung und Schreiben
- xAI Grok - Logos und Icons
- Perplexity - Recherche von Bugs
- Google Search - Finden von SVGs und anderen Assets
- YouTube + yt-dlp - Beschaffen von Audioclips
- FFmpeg - Bearbeiten von Audiodateien
Abschließende Gedanken
Dies war eines jener Projekte, bei denen die Motivation nicht technischer, sondern persönlicher Natur war. Ich wollte einfach eine Version von Tetris, die so funktioniert, wie ich es möchte, ohne Werbung, ohne zusätzliche Hardware und ohne auf eine App von jemand anderem angewiesen zu sein, die jederzeit verschwinden oder sich ändern könnte. Die Tatsache, dass ich in etwa einer Woche mit gelegentlicher Arbeit mithilfe moderner KI-Werkzeuge und Vibe-Codierung von der Idee zu einem ausgefeilten Spiel gelangen konnte, sagt viel darüber aus, wo wir derzeit in der Softwareentwicklung stehen.
Seit ich sie gebaut habe, benutze ich diese Version fast täglich, und sie tut immer noch genau das, was ich brauche. Sie hilft mir, mich kurz von allem, was mich stresst, zurückzuziehen, mich ein paar Minuten lang auf etwas Einfaches zu konzentrieren und mit klarem Kopf zurückzukehren. Wenn du es ausprobierst und es bei dir dasselbe bewirkt, wäre das das beste Ergebnis, das ich mir wünschen könnte. Und wenn du einen Fork erstellen, die Geschwindigkeitskurve anpassen, die Steuerung ändern oder darauf aufbauen möchtest, nur zu. Wenn du einen Fehler findest oder einen Vorschlag hast, melde gerne ein Problem im GitHub-Repository. Genau darum geht es, es quelloffen zu machen.