Opdracht 13: JavaScript Yahtzee
CSS HTML Javascript

Versie: 1.0
Doel: Verdieping JavaScript, herhalen HTML en CSS.

In deze opdracht ga je Yahtzee bouwen in HTML, CSS en JavaScript. Yahtzee is een spel dat wordt gespeeld met vijf dobbelstenen. Je kunt stukjes van je code uit opdracht 10 herhalen. Dit is gelijk ook een belangrijk principe in het programmeren. Het is niet erg als je stukjes code hergebruikt in een nieuw project. Zorg er wel voor dat het goed past binnen je project en zorg er ook voor dat je goed snapt wat de code doet.

Tip 1: Deze opdracht is ingewikkelder dan de vorige opdrachten. Loop je vast? Probeer eerst zelf een oplossing te vinden. Lukt dit niet binnen 20 á 30 minuten? Vraag dan om hulp.

Tip 2: We zoeken niet naar een specifieke uitwerking van deze opdracht. Probeer het gerust op je eigen manier uit te voeren.

Speluitleg Yahtzee: https://www.dobbelstenenshop.nl/spelregels-yahtzee/

Deel 1: Opdracht opzetten

  1. Maak een nieuwe map yahtzee, vul deze map met 3 bestanden: index.html, style.css &, scripts.js.
  2. Stel GIT in zoals je hebt geleerd bij opdracht 4. Stappen 5 en 6 kun je overslaan. Voer ook al je eerste commit uit.
  3. Vul index.html met een leeg HTML document zoals je hebt geleerd in opdracht 3. Vergeet niet scripts.js te linken onderaan de <body> en vergeet niet de style.css te linken in de <head>.
  4. Verander de inhoud van het <title> element naar Opdracht 13 – JavaScript Yahtzee.

Deel 2: Speelveld 

Wil je geen herhaling in HTML en CSS? Sla dit deel dan over en download hier de bestanden: https://bit.ly/yahtzeeopdracht

  1. Maak het scoreblok in een HTML tabel:
  2. Maak een knop met de tekst Gooien!
  3. Maak een tabel met één rij en vijf kolommen, hier komen straks de waardes van je worp in.

Deel 3: Dobbelstenen simuleren

  1. Maak een functie die wordt aangeroepen zodra je op de Gooien! knop klikt.
  2. Zorg ervoor dat de functie in een array met 5 dobbelsteenwaardes returnt. Log deze array in de console. Gebruik eventueel stukjes code uit opdracht 10.
  3. Plaats het resultaat van de worp in de dobbelstenen-tabel (zie stap 7 van deze opdracht).

Deel 4: De worp verwerken

  1. Sorteer de worp op aantal ogen zoals bij opdracht 10.11.
  2. Vul alle mogelijk waardes in de scoretabel deel 1, dus het bovenste deel.
  3. Doe hetzelfde voor het tweede deel van de scoretabel.

Deel 5: Waardes vastzetten

  1. Als je op een score <td> klikt moet de score worden vastgehouden voor de volgende beurten.
  2. Zorg ervoor dat als je opnieuw op de Gooien! knop klikt alle punten uit de scoretabel weer gewist worden voordat ze opnieuw ingevuld worden.
  3. Als je op een <td> klikt moet deze een class tmpLocked krijgen. Geef de class tmpLocked m.b.v. CSS een andere achtergrondkleur.
  4. Er mag maar één element tegelijk een class tmpLocked hebben.
  5. Verander na Gooien! alle elementen classes tmpLocked in locked. Zorg ook dat de class locked een aparte achtergrondkleur krijgt, niet dezelfde kleur als tmpLocked.
  6. Zorg ervoor dat bij het klikken op de Gooien! knop de cel met tmpLocked z’n waarde behoudt en dus niet wordt leeggehaald.

Deel 6: Score berekenen

  1. Bij het toewijzen van een tmpLocked class moet de verschillende totaalscores worden berekend in de scoretabel. Zorg ervoor dat alleen de cellen die een class tmpLocked of locked worden gebruikt voor het berekenen van de totaalscores.
  2. Zodra er bij deel 1 in de scoretabel een subtotaal is van 63 punten of meer dan moet de bonus worden ingevuld.

Klaar? Vraag aan je ICT-begeleider of hij je werk wil reviewen en of je verder kunt met de volgende opdracht. Is je begeleider niet beschikbaar, start dan alvast met de volgende opdracht.