Overzicht

Randvoorwaarden webversie (geldt voor alle weken)

Techniek (simpel houden):

  • PHP + HTML (geen database nodig)
  • State (spelstand) bewaren met $_SESSION
  • Acties via POST (form knoppen)
  • Output: spelbord als <pre> (monospace) of eenvoudige <table>

Aanbevolen bestanden:

  • index.php (router + scherm)
  • functions.php (alle functies)
  • style.css (optioneel)
  • (optioneel) debug.php (var_dump van spelstaat)

Spelstaat (suggestie):

$_SESSION['spel'] = [
  'start' => ['blauw'=>0,'geel'=>10,'groen'=>20,'rood'=>30],
  'stappen' => ['blauw'=>0,'geel'=>0,'groen'=>0,'rood'=>0], // later arrays met 4 pionnen
  'laatste_worp' => null,
  'melding' => '',
  'beurt' => 'blauw'
];

Week 1 — Webbasis + bordweergave (start van PO)

Opdracht 1.1 – Project opzetten (web)

Doel: één pagina met een knop “Nieuw spel” die een lege spelstaat in $_SESSION zet.

Eisen

  • Bij “Nieuw spel” worden startposities ingesteld
  • Je toont de huidige spelstaat (mag nog simpel)

Inleveren

  • index.php + (eventueel) functions.php

Opdracht 1.2 – Functie toonSpelbord(...) → web-output

Gebaseerd op jouw opdracht 1 (speelbord)

Doel: maak een functie die het bord tekent op de webpagina.

Eisen

  • Functie: toonSpelbord($blauw, $geel, $groen, $rood)
  • Output in <pre> zoals in CLI (1 regel met 40 vakjes)
  • Toon B Y G R op de juiste posities, anders .

Extra keuze (leerling kiest 1):

  • A) Bord als <pre>
  • B) Bord als HTML <table> (40 cellen)

Inleveren

  • functie + screenshot van pagina

Opdracht 1.3 – Dobbelsteenfunctie

Gebaseerd op jouw opdracht 2A (dobbelsteen)

Doel: gooiDobbelsteen() geeft 1 t/m 6 terug en je toont de worp op de pagina.

Eisen

  • Knop “Gooi dobbelsteen”
  • Laat resultaat zien als tekst: “Je gooide: X”

Inleveren

  • functie + werkende knop

Week 2 — Mainloop wordt “stap-voor-stap” (geen while in web)

In web is een echte mainloop onhandig: je doet één stap per klik.

Opdracht 2.1 – “Volgende stap” (blauw beweegt)

Gebaseerd op jouw week 1 mainloop (2B) maar web-geschikt

Doel: knop “Speel beurt (blauw)”:

  1. gooit dobbelsteen
  2. verhoogt positie/stappen
  3. tekent bord opnieuw

Eisen

  • Stopconditie: blauw voorbij einde (zoals jij had: > 38 / later 39)
  • Toon melding “Spel afgelopen” als stopconditie bereikt is

Inleveren

  • werkende beurt-knop

Opdracht 2.2 – Functie kanBewegen(...)

Gebaseerd op jouw opdracht 3

Doel: kanBewegen($gezetteStappen, $dobbelsteen) → true/false

Eisen

  • Testpagina of testblok (mag via var_dump)
  • Je gebruikt de functie in de “Speel beurt” knop

Inleveren

  • functie + tests

Opdracht 2.3 – Functie huidigePositie(...)

Gebaseerd op jouw opdracht 4

Doel: huidigePositie($start, $gezetteStappen) berekent de bordpositie.

Eisen

  • Testcases (zoals tabel + eigen tests)
  • Gebruik deze functie om de bordpositie van blauw te tekenen

Inleveren

  • functie + tests

Week 3 — Spelfeedback + meerdere kleuren (maar nog 1 pion per kleur)

Opdracht 3.1 – Spelfeedback op de webpagina

Gebaseerd op jouw opdracht 6

Doel: na elke actie laat je zien:

  • laatste worp
  • foutmelding als zetten niet mag
  • (optioneel) “Beurt van: kleur”

Eisen

  • Meldingen komen uit $_SESSION['spel']['melding']

Inleveren

  • screenshot met meldingen

Opdracht 3.2 – speelBeurt($kleur, $gezetteStappen) (web)

Gebaseerd op jouw opdracht 5B

Doel: maak een functie die één beurt afhandelt en netjes info teruggeeft.

Eisen

  • Input: kleur + stappen
  • Output: nieuwe stappen + melding + worp (kies zelf returnvorm: array)

Inleveren

  • functie + in gebruik in index.php

Opdracht 3.3 – Andere kleuren toevoegen

Gebaseerd op jouw opdracht 7/8

Doel: je kunt nu ook geel/groen/rood laten spelen.

Keuze-opdracht (leerling kiest 1):

  • A) 4 knoppen: “Speel blauw/geel/groen/rood”
  • B) 1 knop “Volgende beurt” met beurtvolgorde (blauw→geel→groen→rood)

Inleveren

  • werkende meerdere kleuren

Week 4 — Wachtrij + 4 pionnen per kleur (state wordt complexer)

Opdracht 4.1 – Wachtrij & eindrij tekenen (alleen visueel)

Gebaseerd op jouw opdracht 9

Doel: breid toonSpelbord uit met:

  • wachtrij: 4 pionplekken per kleur
  • eindrij: (voorlopig leeg met _)

Eisen

  • Je weergave mag simpel zijn (bijv. onder elkaar in <pre>)

Inleveren

  • functie + screenshot

Opdracht 4.2 – Pion komt pas op bord bij 6 (1 pion per kleur)

Gebaseerd op jouw opdracht 10

Doel: stappen start op -1 (wachtrij). Bij worp 6: pion gaat naar 0 stappen.

Eisen

  • huidigePositie(...) retourneert -1 als pion in wachtrij is
  • toonSpelbord laat pion in wachtrij zien (letter) of _

Inleveren

  • functies aangepast + werkende beurt

Opdracht 4.3 – Van 1 pion naar 4 pionnen per kleur

Gebaseerd op jouw opdracht 11

Doel: stappen['blauw'] wordt [-1,-1,-1,-1] (en ook voor andere kleuren)

Eisen

  • toonSpelbord rekent pionposities uit voor alle pionnen
  • In speelBeurt speel je voorlopig met pion index 0 (later keuze)

Inleveren

  • spelstaat met arrays + correcte weergave

Week 5 — Keuzes maken: welke pion verzetten? + stopconditie

Opdracht 5.1 – speelBeurt met pionkeuze (4 pionnen)

Gebaseerd op jouw opdracht 12

Doel: speler kiest pion (als er meerdere opties zijn).

Web-aanpak (simpel):

  • Na worp toon je een lijst radio buttons met mogelijke pionnen
  • Knop “Verplaats geselecteerde pion”

Eisen

  • Als worp 6 en er zijn pionnen in wachtrij: speler mag kiezen (wachtrij pion plaatsen óf lopen) óf jij kiest een simpele regel (maar dan moet je die uitleggen).
  • Gebruik kanBewegen voordat je de stappen wijzigt

Inleveren

  • werkende pionkeuze via formulier

Opdracht 5.2 – Stopconditie “spel klaar”

Gebaseerd op jouw opdracht 12B

Doel: spel stopt pas als alle 4 pionnen van een kleur binnen zijn (of: eerste speler klaar—kies jij als docent).

Keuze-opdracht (leerling kiest 1):

  • A) Stop als blauw alle pionnen klaar heeft
  • B) Speel door tot alle kleuren klaar zijn en toon winnaar-volgorde

Inleveren

  • duidelijke stopconditie + melding

Week 6 — Eindrij + teruglopen (vereenvoudigd maar logisch)

Gebaseerd op jouw opdracht 13

Opdracht 6.1 – Bord uitbreiden met eindrij-logica

Doel: pion kan “te ver” gooien en dan teruglopen richting eindvakjes.

Eisen (didactisch simpel, maar wel correct):

  • Maak een functie (naam vrij) die:

    • berekent waar pion eindigt als hij voorbij het einde gaat
    • pion in eindrij “vastzet” als hij binnen is
  • Pion in eindrij mag niet meer bewegen

Inleveren

  • aangepaste berekening + korte uitleg in commentaar

Opdracht 6.2 – Eindrij tekenen

Doel: eindrij laat per kleur zien hoeveel/ welke pionnen binnen zijn.

Keuze-opdracht:

  • A) Toon alleen aantal binnen (bijv. Blauw: 2/4)
  • B) Toon echte eindvakjes in <pre> (bijv. B B _ _)

Inleveren

  • weergave + correct bijwerken

Week 7 — Spelregels “één pion per vakje” + polish

Gebaseerd op jouw opdracht 14/15/16

Opdracht 7.1 – Botsen: vakje bezet

Doel: op een bordvakje mag maar 1 pion staan:

  • staat er een tegenstander → die pion terug naar wachtrij (-1)
  • staat er een eigen pion → zet is ongeldig

Eisen

  • Check vóór het definitief zetten
  • Meldingen op de pagina

Inleveren

  • demonstratie (kan met testopstelling / debugknop)

Opdracht 7.2 – Regels bij 6 (keuze + extra beurt)

Doel: bij 6:

  • speler kiest: pion plaatsen of pion verzetten (als beide kan)
  • speler krijgt extra worp

Eisen

  • Extra worp is zichtbaar in de UI (bijv. “Je mag nog een keer!”)

Inleveren

  • werkende regel bij 6

Opdracht 7.3 – Weergave verbeteren (vrije opdracht)

Gebaseerd op jouw opdracht 16

Keuze-opdracht (vrij):

  • mooier bord (ASCII-art)
  • kleuren via CSS
  • “Logboek” met laatste 10 acties
  • “Reset spel” + “Debug aan/uit”
  • fair: beurtvolgorde + active player highlight

Inleveren

  • korte lijst: “Dit heb ik verbeterd” + screenshot

Beoordelingssuggestie (simpel te hanteren)

Per week 3 onderdelen:

  • Werkt het? (functioneel)
  • Code netjes & begrijpelijk (namen, commentaar, functies)
  • Testen/controle (minimaal: paar scenario’s / debugoutput)

Uitleg sessies Extra uitleg