Opdracht 15: JavaScript Blackjack
CSS HTML Javascript

Versie: 1.0
Doel: Ervaring opdoen met OOP in JavaScript.

Om beter te snappen wanneer je een Class gebruikt en hoe je met Objects omgaat gaan we een kaartspel maken. Probeer goed na te denken hoe je de verschillende entiteiten (speler, dealer, kaarten) in je programma verwerkt.

De deelopdrachten worden iets minder uitgebreid beschreven zodat je meer zelf moet uitzoeken. 

In deze opdracht worden de spelregels versimpeld. We werken niet met meerdere speler, inzetten / betten, verdubbelen en splitsen. Wel geldt de regel dat de Aas als 1 of 11 punten gebruikt mag worden. Je programma kiest automatisch de waarde van de Aas.

Deel 1: Opdracht opzetten

  1. Maak een nieuwe map blackjack, vul deze map met 3 bestanden: index.html, style.css &, scripts.js.
  2. Stel GIT in zoals je hebt geleerd bij opdracht 5. 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 4. 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 15 – JavaScript Blackjack.

Deel 2: HTML & CSS

  1. Maak de 52 kaarten in HTML en CSS. Je mag zelf weten hoeveel aandacht je hieraan besteed. HTML en CSS is geen leerdoel in deze opdracht.
  2. Maak een element waarin de kaarten van de dealer kunnen worden getoond.
  3. Maak een element waarin de kaarten van de speler kunnen worden getoond.
  4. Plaats naast de dealer en de speler kaarten een element waarin de score kan worden getoond.
  5. Maak een knop met de tekst Delen en een knop met de tekst Pas.

Deel 3: Opzetten van entiteiten

  1. Maak in je code een kaartendeck zonder jokers. Wil je weten welke kaarten er in een deck zitten, kijk dan hier: https://nl.wikipedia.org/wiki/Speelkaart
  2. Laat alle 52 kaarten zien in de browser console.
  3. Maak een speler, een dealer en een spel.

Deel 4: Uitwerken van het spel

  1. Zorg ervoor dat er random kaarten uit het deck gehaald kunnen worden. Elke kaart mag maar één keer per spel gedeeld worden.
  2. Maak een delen functie die de dealer twee kaarten geeft, waarvan 1 zichtbaar, en de speler twee kaarten. 
  3. Na het delen verandert de delen knop in een hit knop.
  4. Maak een hit functie die de speler een random kaart geeft.
  5. Bereken de score van de speler na het delen en bij een hit. Geef op basis van de score aan wat de status is:
    1. 20 punten of minder, speler kan doorgaan.
    2. 21 punten, speler heeft blackjack, dus gewonnen.
    3. 22 punten of meer, de speler heeft verloren.
  6. Drukt de speler op de Pas knop, dan gaat de dealer spelen volgens de onderstaande regels:
    1. De dealer pakt een nieuwe kaart bij 16 punten of lager.
    2. De dealer stopt bij 16 punten als de speler ook 16 punten heeft. 
    3. Bij 17 punten of hoger stopt de dealer.
  7. Bepaal de uitkomst van het spel en geef dit weer in het speelveld.

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.