Hoe we Unicorn Games in 7 dagen bouwden met AI en open webstandaarden

Hoe we Unicorn Games in 7 dagen bouwden: architectuur, AI pair programming en pure webstandaarden

Webgames in de browser zijn tegenwoordig hopeloos vastgelopen. Open vandaag een willekeurige spelletjessite op je telefoon of laptop. Voordat je ook maar één speelkaart of speelveld te zien krijgt, word je bedolven onder opdringerige cookiemeldingen, verplichte videoadvertenties van dertig seconden, verspringende knoppen en logge WebAssembly-bestanden van vijftig megabyte die je telefoon gloeiend heet maken.

Wij wilden laten zien dat het anders kan. Ons doel was onderzoeken of één zelfstandige software-engineer, in nauwe samenwerking met moderne kunstmatige intelligentie, in exact zeven kalenderdagen een volwaardig spelportaal kon ontwerpen, bouwen en lanceren met meer dan tien klassieke titels.

Zonder logge bedrijfsprocessen. Zonder overbodige bibliotheken. Zonder vervelende reclameblokkades. Louter klassieke kaart- en denkspellen die draaien op zestig beelden per seconden, direct speelbaar zonder installatie, gebouwd op open webstandaarden.

Dit is het complete architectuurplan, het technische dagboek en de gemaakte keuzes achter Unicorn Games.

Het architectuur-manifest: radicaal minimalisme

Snelheid op het web ontstaat nooit per ongeluk. Het is het resultaat van bewust nee zeggen tegen overbodige ballast.

Nog voordat we op maandagochtend de eerste regel code schreven, stelden we vijf keiharde ontwerpregels vast:

1. Volledig speelbaar beeld binnen één seconde. Zelfs over een haperende mobiele verbinding moet het speelveld binnen duizend milliseconden volledig op het scherm staan.

2. Geen externe game-engines. Geen gebruik van zware pakketten zoals Phaser, Unity WebGL of Godot. Voor klassieke kaart- en bordspellen voegen dat soort engines alleen maar onnodige megabytes toe.

3. Weergave via HTML5 Canvas 2D gekoppeld aan losstaande toestandsmachines. De spellogica moet draaien als zuivere wiskundige functies, zonder de DOM-structuur van de browser te belasten.

4. Volledige statische pagina-opbouw op de server voor alle overzichtspagina's. Elk spel, elk spelregels-overzicht en elke handleiding moet als kant-en-klaar HTML-bestand klaarstaan voor directe vindbaarheid zonder verspringingen.

5. Geen lay-out-verschuivingen (CLS = 0). Geen enkel element mag na het laden van positie veranderen.

Deze regels bepaalden onze technische basis: Next.js met App Router voor statische pagina's en snelle verspreiding, zuivere TypeScript voor de spellogica, HTML5 Canvas 2D voor soepele beelden en Firebase voor lichte gegevensopslag.

De 7-daagse sprint: het technische dagboek

Een compleet spelplatform neerzetten in honderdtachtenzestig uur vereist dat elke dag als een afgeronde fase wordt behandeld.

Dag 1: Zelfstandige kaart-engines en betrouwbare logica

Kaartspellen lijken eenvoudig tot je de officiële regels tot in detail moet vastleggen. Een potje Klondike Solitaire of FreeCell is geen simpele verzameling plaatjes: het is een wiskundige toestandsmachine die bij elke kaartverplaatsing strenge controles uitvoert.

Maandag werkten we aan de gedeelde kern: een kaart- en stapelstructuur geschreven in pure TypeScript, volledig los van het beeldscherm.

We splitsten het systeem op in drie duidelijke lagen:

Doordat de spellogica losstond van de browser, konden we in Node.js honderdduizenden testpotjes automatisch doorspelen nog voor er één pixel op het scherm was getekend.

Dag 2: De solitaire-reeks (Klondike, FreeCell en Spider)

Dinsdag stond in het teken van de visuele weergave en de besturing met muis en vingers voor de bekendste solitaire-varianten.

Kaarten tekenen op een HTML5 Canvas kent eigen valkuilen:

De weergave moet rekening houden met scherpe mobiele beeldschermen. Teken je op een standaardscherm op moderne telefoons, dan ogen de kaarten wazig. We bouwden een schaalmodule die de pixeldichtheid van het scherm meet, het interne tekengebied met die factor vermenigvuldigt en de getoonde maat via CSS terugbrengt. Het resultaat was vlijmscherpe randen en duidelijke cijfers.

De bediening vereiste één centrale verwerker voor muis, digitale pen en aanrakingen. Zodra een speler het scherm aanraakt, vertaalt het systeem het fysieke punt naar de virtuele canvas-positie, herkent de juiste kaart en controleert de minimale beweging voor de kaart wordt opgetild.

Tegen dinsdagnacht draaiden Klondike, FreeCell en Spider Solitaire stabiel op een strakke zestig beelden per seconde.

Dag 3: Slagenspellen en doordachte computertegenstanders

Woensdag kwamen de slagenspellen aan bod: Hearts en Spades.

Dit soort spellen valt of staat met het spelniveau van de virtuele tegenstanders. Spelen ze willekeurig, dan verdwijnt de spanning. Proberen ze diepe kansbomen over tweeënvijftig kaarten door te rekenen, dan hapert het scherm.

We bouwden een lichte beslisboom op basis van beproefde vuistregels:

Bij Spades beoordelen de bots hun kaarten vooraf door Azen, gedekte Heren en mogelijke introeven te tellen om een passend bod uit te brengen. Roept hun maat Nil, dan worden ze waakhond: ze spelen hun lange kleuren uit zodat de partner lastige kaarten kan weggooien en pakken gevaarlijke slagen met hoge troeven.

Bij Hearts onthouden de bots welke speler geen kaarten meer heeft in een bepaalde kleur. Speelt een tegenstander vroeg geen Klaveren meer bij, dan weet de bot dat die kleur leeg is. Bij de jacht op de Schoppenvrouw spelen ze kleine schoppen om de dekking van anderen weg te halen terwijl ze hun eigen vangnet bewaren.

De bots nemen hun beslissing in minder dan twee milliseconden, waardoor het spel soepel blijft doorlopen.

Dag 4: Rekenroosters en logische puzzels (Minesweeper en 2048)

Donderdag verlieten we de kaarttafels voor cijfermatige puzzelvelden.

Minesweeper eist dat een speler bij de eerste klik nooit direct verliest:

Het allereerste vakje mag nooit een mijn bevatten. Het bord plaatst de mijnen pas op het moment van die eerste klik rondom de gekozen plek, wat zorgt voor een veilige opening.

Om aaneengesloten lege vakken te openen, gebruikten we een iteratieve breedte-eerst-zoektocht (BFS). Gewone herhalingsmethodes laten het geheugen bij grote speelvelden vollopen; een eenvoudige wachtrij in een while-lus opent het veld in minder dan drie milliseconden, zelfs bij dertig bij zestien vakken.

Voor 2048 bouwden we een matrix-transformatie. Vier aparte functies voor de schuifrichtingen levert rommelige code op. We maakten het uniform: elke schuif draait het bord zodat de richting naar links wijst, past een standaard samenvoeging toe en draait het bord weer terug in de beginstand.

Dag 5: Meertaligheid en statische paginabouw

Vrijdag stond in het teken van de platformbasis, toegankelijkheid en vertalingen.

Een spelsite die alleen Engels spreekt, laat het overgrote deel van de wereld links liggen. We richtten een paginastructuur in voor tien volledige talen: Engels, Spaans, Duits, Frans, Italiaans, Portugees, Nederlands, Pools, Chinees en Hindi.

In plaats van vertaalscripts in de browser te gebruiken die het laden vertragen en tekst laten verspringen, verwerkten we de vertalingen direct in het statische bouwproces van Next.js.

Elk spel, elk blogbericht en elke handleiding wordt als vast HTML-bestand klaargezet voor alle tien de talen. Bezoekt iemand de site vanuit Amsterdam of Berlijn, dan verschijnt de pagina binnen veertig milliseconden in de eigen taal op het scherm.

Dag 6: Aanraakgevoeligheid, geheugenbeheer en audiosynthese

Zaterdag draaide om het verhelpen van haperingen en het bewaken van het werkgeheugen.

We bereikten drie belangrijke verbeteringen:

Ten eerste: het wegnemen van audiovertraging. Geluidsbestanden over het netwerk ophalen leidt tot vertraging bij snel kaartspelen. In plaats van MP3-bestanden in te laden, bouwen we de kaartgeluiden direct in de browser via de Web Audio API met digitale toongeneratoren. Geen netwerkverkeer, direct geluid bij aanraking.

Ten tweede: het voorkomen van geheugenopschoning-pauzes. Doorlopend nieuwe geheugenobjecten aanmaken dwingt de browser tot korte pauzes om op te ruimen, wat haperingen veroorzaakt. We maakten herbruikbare objectvoorraden voor coördinaten en aanrakingen. Het hergebruiken van geheugen maakte de beeldsnelheid stabiel.

Ten derde: cache-instellingen via Cloudflare. Omdat onze statische spelbestanden ongewijzigd blijven, leveren servers wereldwijd herhaalde bezoeken direct vanuit hun snelle geheugen uit.

Dag 7: Wereldwijde oplevering, zoekmachinecontrole en lancering

Zondag was de dag van de publieke start. We koppelden het hoofddomein, maakten deelbare voorbeeldafbeeldingen en toetsten de site grondig.

Elke pagina voldeed aan de officiële Core Web Vitals-normen van Google:

Zondagavond stond Unicorn Games live voor de hele wereld: tien complete spellen, direct speelbaar op telefoon en pc, zonder hinderlijke onderbrekingen.

Bewuste keuzes: wat we expres niet hebben gebouwd

De kwaliteit van software blijkt ook uit wat je bewust weglaat.

Deze mogelijkheden hebben we onderzocht en afgewezen:

We hebben WebGL en Three.js overgeslagen. Driedimensionale effecten zijn leuk in video's, maar trekken de accu van een telefoon snel leeg en duren langer om te starten. Voor klassieke 2D-spellen levert een schone Canvas 2D-omgeving moeiteloos zestig beelden per seconde met minimaal stroomverbruik.

We hebben tracking-scripts van derden geweigerd. Reclame- en analysetags voegen honderden overbodige kilobytes toe, plaatsen cookies en vertragen het laden. We kozen voor lichte interne tellingen die spelstarts bijhouden zonder de privacy van spelers te schenden.

We hebben navigatie via de browser voor onze artikelen afgewezen. Kant-en-klare statische HTML-pagina's worden direct door zoekmachines gelezen en staan meteen klaar voor de bezoeker.

De werkelijke rol van AI in de ontwikkeling

We hadden Unicorn Games niet in zeven dagen kunnen opleveren zonder de hulp van kunstmatige intelligentie. Onze manier van werken week echter sterk af van de verhalen over automatisch gegenereerde software.

We hebben nooit gevraagd om complete spellen uit het niets te maken. Dat levert zwakke code op die bij de minste uitzondering omvalt.

We hebben AI ingezet als systematische assistent bij drie specifieke taken:

Ten eerste: het opstellen van testseries. Voor onze kaartlogica schreef de AI honderden controlegevallen om te toetsen hoe de regels standhielden bij bijzondere combinaties.

Ten tweede: het raamwerk voor rekenkundige functies. Bij bordrotaties en vakjes tellen leverde de AI de eerste opzet, die we vervolgens zelf handmatig hebben verfijnd en ingebouwd.

Ten derde: de meertalige vertaling. Duizenden woorden aan technische regels en speluitleg vertalen naar negen talen zou handmatig weken kosten. De AI deed dit met de juiste vaktermen in enkele minuten.

Waar AI geen antwoord op had, was het fysieke speelgevoel: de gevoeligheid bij het slepen van kaarten, het lichte stuiteren bij het neerleggen en de reactietijd op mobiele schermen. Dat vroeg om handmatig testen en menselijk fingerspitzengefühl.

De cijfers op een rij

Het resultaat van deze week werken laat zich helder uitdrukken in meetbare feiten:

Alle JavaScript-code die nodig is om een potje Klondike Solitaire op Unicorn Games te spelen, is gecomprimeerd kleiner dan negentig kilobyte. Dat is lichter dan een gemiddelde reclamebanner op gewone spelsites.

De laadtijd blijft wereldwijd onder de achthonderd milliseconden. Het speelveld staat op het scherm zodra het HTML-bestand binnenkomt.

Het web heeft geen behoefte aan nog meer overladen websites die spelers als reclamevee behandelen. Het heeft behoefte aan snelle, schone software die trouw blijft aan de open standaarden van het internet.