Naast natuurkundige modellen, heb ik ook simpele spelletjes geprogrammeerd tijdens het vak Imperatief Programmeren. Hierbij gebruikten we C# om object georiënteerd te programmeren.

Nou heb je in Javascript niet echt ingebouwde klasses, maar toch heb ik geprobeerd de code die ik in C# had geschreven hier naar een JS te porten. En wat blijkt? Als je alles gewoon in 1 script stopt, en de-in-HTML-gedefinieerde labels en buttons aanpast, heb je toch ineens een werkend reversi spel. Het is wel heel erg 90s á la www.spele.nl met lelijke bitmaps spelletjes maken in javascript. Maar toch wel leuk dat het kan!

Challenge Accepted

Dit is dus een programmeeropdracht bij het vak Imperatief programmeren. Hierbij lijkt de opdracht heel simpel, toch komen er een aantal dingen bij kijken. Zoals het netjes scheiden van de code die de tekenopdrachten op een canvas doet, en de code die de controles voor de zetten maakt. Vaak willen beginnende programmeurs dat nogal eens door elkaar halen. Maar door de twee te scheiden, kun je het heel simpel testen en makkelijker uitbreiden en onderhouden.

Mijn aanpak bestond uit de volgende stappen: 1) Speel een aantal spelletjes Reversi, om de feeling voor de regels te krijgen
2) Start met het maken van een array die de spel-toestand bepaald. Hierop zullen alle regels toegepast worden.
3) Maak een lege teken-functie, die dadelijk na een update van de spel-toestand aangeroepen kan worden om het bord elke keer opnieuw van scratch te tekenen.

Met deze ingrediënten is de basis van mijn framewerk gelegd. Front-end (tekenen) en back-end (spelregels) netjes gescheiden. Ik heb ervoor gekozen om bij het opstarten van de front-end gewoon een spel-toestand te verzinnen. Hierna heb ik met de hand mijn 2D array van 6x6 (back-end) ingevuld met verschillende waardes: 0, 1 en 2. Deze waardes staan voor een lege plek (0), een blauw steentje (1), en een rood steentje (2). Het lege bord kan getekend worden met simpele zwarte lijntjes. En door stapsgewijs alle plekjes langs te gaan in de 2D array, teken ik een steentje in het blauw of rood, afhankelijk of er een 1 of een 2 staat.

Interactie

Maar het tekenen van een bord, maakt nog niet gelijk een interactief spel. Dus de volgende stap was om code te schrijven die bij de muisklik wordt uitgevoerd. Hiervoor was ik eerst bezig om de muisklik in pixel-coordinaten uit te printen in de console.log. Vervolgens kon ik die coordinaten omzetten naar een specifiek hokje. Vanuit dat hokje kan ik de bijbehorened waarde in mijn 2D array aanpassen, en als test vulde ik deze gewoon met de waarde 1 (ongeacht wat er al stond). Hierdoor kon ik testen of mijn Teken functie inderdaad na een nieuwe spel-toestand netjes de blauwe steentjes plaatste op de plekken waar ik met mijn muis klikte. Uiteraard ging dit niet in 1x goed, en heb ik meerdere keren verkeerde coordinaten ingevuld, of te grote cirkels getekend, of zelfs asymmetrische ovalen.

Hierna kon ik een extra variabele bijhouden wie er aan de beurt was: speler 1 of speler 2. Zodra dat aangepast werd na elke klik, kon ik zien of er ook mooie rode steentjes geplaatst konden worden. Maarja, dan komen de regels. En die zijn voor Reversi niet altijd heel simpel. Je mag namelijk alleen een steentje plaatsen, als dit nieuwe geplaatste steentje een tegenstander's steentje klemt tussen een al-bestaand steentje van jezelf.

Spelregels

In feite kwam het erop neer, dat ik voor elke klik, alle 8 windrichtingen op moest gaan zoeken, en dan kijken of ik een tegenstander steentje tegenkwam. Zodra dat het geval is, moet ik een plekje verder kijken. Als ik dan een eigen steentje tegenkom, mag ik daar een zet doen en het nieuwe steentje plaatsen op het vierkantje waar ik op had geklikt. Maar als er nog een tegenstandersteentje ligt, dan moet ik weer in die richting verder kijken. Dit was allemaal niet heel simpel te programmeren. Maar met een for-loop over alle windrichtingen, en stap voor stap nadenken wat er moet gebeuren, kwam ik er toch aardig uit. En het resultaat kun je hieronder zelf uitproberen.

Finished?

Op het moment kun je met 1 iemand anders hotseat dit spelletje spelen. De volgende stap is een computer-player toevoegen die de rol van tegenstander speelt. Maar om dat goed te doen, moet je ook zetten vooruit denken en optimaal plannen, en dat vereist wat inhoudelijke kennis over optimaal Reversi spelen dat ik nu niet bezit. Maar wie weet...