Mijn Perfecte Tetris

GitHub-repository van het project



Wat Is Dit

Tetris is een legendarisch spel en een spel dat ik heel erg graag speel. Ik hou echt van het spel en speel het graag. Het is een geweldige stressverlichter. Voor een leuk weekendproject besloot ik het spel te bouwen als een browsergame/app ontworpen voor zowel desktop als mobiel, met gebruik van de principes van vibe coding. De mobiele kant van deze versie was geïnspireerd door Play-Tetris, die een echt mooie mobiele opzet heeft met zijn veeggebaseerde besturing. Bekijk en speel mijn implementatie van Tetris hier, het is wat ik denk dat de meest “perfecte” versie van Tetris is.



gameplay van mijn versie van tetris, speel het zelf hier

Voorbij De Code

Ik ben niet begonnen met het bouwen van een Tetris-kloon als portfolio-project of om iets nieuws te leren. Ik heb het gebouwd omdat ik het oprecht nodig had. Wanneer ik gestrest ben, of het nu een zware week op het werk is of gewoon het leven dat zich opstapelt, is Tetris een van de weinige gezonde dingen die me echt helpen om te resetten. Wanneer ik gestrest ben, heb ik de neiging veel te eten, wat na verloop van tijd oploopt, dus iets hebben dat werkt zonder nadelen is voor mij een groot ding. Slechts 10 tot 30 minuten blokken laten vallen en mijn brein voelt alsof het een beetje is opgeruimd. Het is voor mij niet alleen ontspannen op een casual manier, het is een manier om iets eenvoudigs en gefocusts te hebben waar ik die stress in kan laten vloeien. Er is zelfs wat gaaf onderzoek dat laat zien dat Tetris invloed kan hebben op hoe de hersenen opdringerige herinneringen en stress verwerken, bijvoorbeeld in trauma-filmexperimenten, bij mensen die na echte ongelukken werden behandeld, en als aanvulling op therapie met meetbare hersenveranderingen. Ik probeer dit spel niet om te vormen tot een medische behandeling, maar het is gaaf om te zien dat er misschien echte wetenschap is die bevestigt wat ik al voel, namelijk dat Tetris mensen echt kan helpen omgaan met stress.

Dus ging ik op zoek naar een goede versie van Tetris om te spelen, en het probleem was dat niets dat er was echt paste bij hoe ik wilde spelen. Mobiele apps in de iOS App Store zitten vol advertenties en microtransacties. Webversies waren traag of voelden verschrikkelijk aan op een telefoon. De klassieke NES-versie is geweldig, maar vereist een emulator en extra hardware. Ik kocht zelfs een Miyoo Mini in de veronderstelling dat dat het probleem zou oplossen, en uiteindelijk deed ik niets anders dan een tweede apparaat meeslepen om Tetris te spelen. Op een bepaald moment realiseerde ik me dat ik meer tijd besteedde aan het zoeken naar de juiste versie dan het zou kosten om er gewoon zelf een te bouwen.

Met moderne browsers, LLM-tools zoals Claude Code, en workflows zoals vibe coding, voelde het eindelijk als het juiste moment om zelf de Tetris te bouwen die ik wilde. Snel, minimalistisch, geen advertenties, geen accounts, geen app store. Gewoon een browsergame die werkt op mijn telefoon en mijn laptop en die ik volledig onder controle heb. In ongeveer een dag had ik een werkende versie, en na ongeveer een week van af en toe werken om het robuust te maken en het gevoel goed te krijgen op zowel desktop als mobiel, was ik er blij mee.

Ik deel het omdat als het uiteindelijk zelfs maar één andere persoon helpt om te ontstressen zoals het mij helpt, dat me echt blij zou maken. Het is iets kleins, maar soms is een klein ding precies wat je nodig hebt.

Functies

  • Klassiek 10x20 Tetris-bord
  • Volledige toetsenbordbesturing op desktop en touchgebarenbesturing op mobiel
  • Standaard zeven-bag-stukrandomizer
  • Houdstuk- en volgendestuk-voorvertoningen
  • Schaduwstukprojectie die laat zien waar stukken zullen landen
  • Snelheidskromme op basis van niveau met dynamische lock delay
  • Score-, lijnen-, niveau- en hoogste score-bijhouding opgeslagen in lokale opslag
  • Scoring voor soft drop en hard drop
  • In-game menu met hervatten, opnieuw starten, afsluiten, muziek/SFX dempen en broncodelink
  • Animatie met flits bij lijnverwijdering met geluidseffect
  • Ondersteuning voor iOS-veilige zone (Dynamic Island, inkeping, home-indicator)
  • Offline ondersteuning via Service Worker (werkt na het eerste bezoek zonder internet)
  • Te installeren als PWA (toevoegen aan beginscherm op iOS/Android voor een app-achtige ervaring)

Besturing

Desktop (Toetsenbord)

Actie Toetsen
Bewegen ← → of A D
Soft Drop ↓ of S
Hard Drop Space
CW roteren ↑ W X
CCW roteren Z
Vasthouden C of LShift
Menu Esc of M
Broncode G (titelscherm)

Mobiel (Touch)

Actie Gebaar
Bewegen Veeg links / rechts
Soft Drop Vasthouden en omlaag slepen
Hard Drop Snel omlaag flikkeren
CW roteren Tikken
Vasthouden Snel omhoog flikkeren

Moeilijkheidskromme

De snelheidskromme en lock delay in deze versie zijn afgesteld met onderzoek naar hoe klassieke en moderne Tetris-games de moeilijkheidsprogressie afhandelen. In de originele NES Tetris, bereikt de zwaartekracht één rij per frame op level 29, wat de beroemde “kill screen” werd waar het spel voor de meeste mensen in de praktijk onspeelbaar wordt. Dat was niet echt een ontworpen einde, het was meer een bijeffect van de hardware en hoe DAS (Delayed Auto Shift) te langzaam was om gelijke tred te houden met de daalsnelheid. Willis Gibson bewees dit in 2024 toen hij er voorbij ging en het spel liet crashen op level 157.



gameplay van de klassieke tetris uit 1989 voor nes (oorspronkelijke bron)

Moderne spellen zoals TGM (Tetris: The Grand Master) losten dit anders op. In plaats van stukken gewoon sneller te laten vallen totdat het spel stukgaat, begrenst TGM de zwaartekracht op 20G (instant drop) en versmalt het vervolgens andere timingvensters zoals lock delay en DAS om de moeilijkheid te verhogen. De Tetris-richtlijn-standaard gebruikt 500 ms lock delay met tot 15 move resets, wat deze versie volgt. Onderzoek naar TGM2 Death-modus en TGM3 Shirase liet zien dat de praktische ondergrens voor competitief spel rond 250 ms lock delay met snelle DAS ligt, terwijl alles onder 133 ms specialistisch terrein is.

Op basis van dit alles begrenst de snelheidskromme hier de zwaartekracht op 33 ms per rij (vergelijkbaar met NES-levels 19 tot en met 28) in plaats van naar instant drop te gaan, en schaalt DAS van 170 ms naar 100 ms op hogere niveaus zodat je het bord tijdens lock delay kunt doorkruisen. Het doel was om hoge niveaus brutaal snel te laten aanvoelen maar toch eerlijk, dichter bij hoe Tetris 99 en TGM eindspelmoeilijkheid afhandelen dan de oorspronkelijke NES-aanpak van simpelweg ruwe snelheid je invoer te laten overtreffen.

Onder De Motorkap

  • Responsief ontwerp geoptimaliseerd voor zowel desktop als mobiel (portret)
  • Voorgerenderde bloksprites en rasterachtergrond voor prestaties
  • Gebruikt wall kicks in Super Rotation System (SRS)-stijl voor stukrotatie
  • Op snelheid gebaseerde detectie van touchgebaren voor betrouwbare onderscheiding tussen flikker en slepen
  • Timing-systeem op basis van niveau voor zwaartekrachtsnelheid en lock delay
  • Hoge scores en audio-instellingen opgeslagen met localStorage
  • Bron voor achtergrondmuziek NmCCQxVBfyM
  • Bron voor geluidseffect bij lijnverwijdering UMViM2tHrOk
  • Het project is volledig open source onder de MIT-licentie
  • Gebouwd met de volgende AI-tools:

Slotgedachten

Dit was een van die projecten waarbij de motivatie niet technisch was, maar persoonlijk. Ik wilde gewoon een versie van Tetris die werkte zoals ik wilde dat hij werkte, zonder advertenties, zonder extra hardware, en zonder te vertrouwen op iemands anders app die op elk moment kon verdwijnen of veranderen. Het feit dat ik van idee tot een gepolijst spel kon gaan in ongeveer een week van af en toe werken met behulp van moderne AI-tools en vibe-coding zegt veel over waar we nu staan met softwareontwikkeling.

Ik gebruik deze versie sinds ik hem heb gebouwd bijna dagelijks, en hij doet nog steeds precies wat ik nodig heb dat hij doet. Hij helpt me even afstand te nemen van wat me ook maar stress bezorgt, me een paar minuten op iets eenvoudigs te concentreren, en met een helderder hoofd terug te komen. Als je hem uitprobeert en hij hetzelfde voor jou doet, dan is dat het beste resultaat dat ik me kan wensen. En als je hem wilt forken, de snelheidskromme wilt aanpassen, de bediening wilt veranderen, of erop verder wilt bouwen, ga je gang. Als je een bug vindt of een suggestie hebt, voel je vrij om een issue te openen op de GitHub-repository. Dat is precies het hele punt van het opensource maken ervan.