Week 15: Implementing game logic & manipulating css style

• JavaScript
• MBO
• Studiejaar 2

Doel van deze les

• Aan het einde van de les heb jij code geschreven die wordt uitgevoerd na een event middels een event listener.
• Aan het einde van de les verandert de stijl van jouw pagina na een event.

Feedback lesdoel: Maartje: De student kan aan het einde van de les een web pagina maken met een titel, plaatje en formulier middels het koppelen html en css. Het knopje maken wij bruin.

Ainhoa: De lesdoel is te lang.

Wat heb je nodig?

Voor deze les, moet je Node.js hebben geinstalleerd en basis DOM manipulatie begrijpen. Deze zijn in de vorige les behandeld.

Meer hierover in de studentenhandleiding op onderwijs online.

Waar waren wij gebleven?

De knop werkt niet

Het afhandelen van de event is niet compleet

De game logic moet worden geïmplementeerd

De CSS stijl moet aangepast worden

mboutrecht.onderwijsonline.nl

Game logic implementeren

De knop doet nu niet zoveel. Dit komt omdat er ook geen geheim getal is wat geraden moet worden. Laten wij daar eerst mee beginnen.

Game logic implementeren

Om een willekeurige nummer te generen. Wat kunnen wij hiervoor het beste gebruiken?

Als je een random nummer wilt genereren wat kan je het beste doen?

1. Een functie schrijven die dat doet
2. Een method schrijven die dat doet
3. Op internet zoeken naar een bestaande oplossing
4. Random schrijven en kijken of auto complete iets voorstelt.

developer.mozilla.org

Game logic implementeren

JS heeft een Math library. Op deze pagina (vorige dia) kan je de vele verschillende methods zien die het heeft. Echter om snel te vinden waar wij naar opzoek zijn, zoeken wij op de pagina naar 'random'. Dat kan je doen met control + F of CMD + F.

Game logic implementeren

Je kan nu zien dat de random method gebruikt kan worden door het aan te roepen zoals beschreven op de pagina.

Game logic implementeren

Je kan ook lezen dat de method een cijfer genereert tussen de 0 en 1. Laten wij dit bekijken in code.

Game logic implementeren

Geen enkele professionele developer herlaad zijn website zo vaak zoals wij dat hebben gedaan.

Gelukkig is daar een oplossing voor.

Game logic implementeren

Het resultaat is een klein getal. Dit is natuurlijk niet wat wij willen.

Hoe moeten wij dit getal veranderen naar zoiets als: 11.xxx?

Game logic implementeren

Door het te vermenigvuldigen met 20 kunnen wij een willekeurig getal genereren tussen de 1 en 20.

Maar er blijven vele decimalen achter de komma, hoe halen wij die weg?

Zoek op MDN welke method in de Math library jij kan toepassen om het getal af te ronden. Schrijf hieronder welk method jij hebt gebruikt.

Game logic implementeren

Door de trunc method, rond je cijfers af. Dit lijkt perfect te zijn voor ons probleem.

Opdracht

Implementeer dit zelfstandig in jouw code!

Game logic implementeren

Opdracht

Opdracht

Als er op de knop gedrukt wordt dan moeten de volgende berichten in 'message' op de pagina geprinten worden:

==>

Implementeer de tekst aan de rechterkant op de juiste wijze.

Antwoord opdracht 

High score implementeren

Nu wij het nummer kunnen raden, moeten wij een begin maken aan de high score. De speler mag 20 keer een nummer raden, elke keer als de speler het fout heeft, dan wordt er 1 afgetrokken van de high score.

Game over

Wanneer de high score 0 bereikt is het spel voorbij.

High score implementeren

Declareer een variabele waar jij de score in wilt bijhouden.

Zorg ervoor dat wanneer de speler het nummer verkeerd heeft geraden, de score met 1 daalt.

Zorg ervoor dat de nieuwe score wordt geschreven.

Zorg ervoor dat bij 0 de gebruiker '💥 You lost the game!' te zien krijgt.

Antwoord opdracht 

CSS manipuleren

Het zou fijn zijn als de speler er beter op geattendeerd wordt wanneer het het spel gewonnen heeft of niet.

Dat kunnen wij doen door met de stijl te spelen zoals in het plaatje hiernaast.

CSS manipuleren

Om de code nog enigszins overzichtelijk te houden is het raadzaam om commentaar toe te voegen zodat jij je weg sneller kan vinden in de code.

Achtergrond manipuleren

Om de achtergrondkleur te veranderen moeten wij de body selecteren omdat dat is waar je nu tegenaan kijkt.

Achtergrond manipuleren

Ook hier gaan wij DOM manipulatie gebruiken om de stijl aan te passen.

Als allereerst valt het nu op dat wij backgroundColor willen bewerken maar als wij kijken naar de 

Achtergrond manipuleren

Als allereerst valt het nu op dat wij backgroundColor willen bewerken maar als wij kijken naar de CSS file dan staat er 'background-color'.

Dat komt omdat JS dat niet oke vindt. Dus gebruiken wij camelCase.

Achtergrond manipuleren

Specifieke elementen manipuleren

Om de breedte aan te passen van de 'number' element, moeten wij ook hier DOM gebruiken.

Je ziet dat wij altijd een string gebruiken om de waarde van de elementen te veranderen. Ook hier is 30rem gebruikt.

Specifieke elementen manipuleren

Als je zelfs goed kijkt en het vergelijkt met de CSS code, dan zie je dat daar ook de rem eenheid wordt gebruikt.

In JS hebben wij dus de waarde en de eenheid meegegeven.

Wat waren de doelen?

• Aan het einde van de les heb jij jouw JS-code gekoppeld aan webpagina in HTML en CSS.
• Aan het einde van de les laat jij jouw pagina reageren op clicks door click events af te handelen.

Denk je dat je de leerdoelen hebt behaald?

Ja

Nee

Wat gaan wij de volgende keer doen? Meerdere antwoorden mogelijk!

1. Meer game logic implementeren
2. Code challenge!
3. Variabelen veranderen
4. Scrummen!