Terug

JavaScript 2 – Interactie en Timing

In deze les herhalen we wat we in les 1 geleerd hebben. Daarna introduceren we wat nieuwe kennis.

We gaan dus aan de slag met deze termen:
document.querySelector
variabelen
if-statements
onclick
functies
element.innerHTML
element.src
element.style
Komt hier iets je niet bekend voor?
Ga dan eerst weer terug naar les 1.

We maken ook weer gebruik van het CSS Grid

Het doel van deze les is het maken van een Whack-A-Mole spel. Als je op de mol klikt krijg je een punt!

  1. Ook voor deze les is een video beschikbaar. In deze tutorial rennen we in 14 minuten door onderstaand stappenplan. Het is natuurlijk de bedoeling dat jij in je eigen tempo kijkt, de video pauzeert wanneer nodig en zelf meedoet.
Tijdcodes:
00:23 Opstarten
01:39 Het Grid
04:50 JavaScript
06:46 setInterval()
12:16 Math.random()

Opstarten

  1. Maak een nieuwe map voor deze opdracht, plaats daar een nieuw HTML, CSS en JS bestand.
  2. Koppel het HTML bestand aan het CSS en JS bestand. Vergeet ook de CSS reset code niet!
  3. Maak in je projectmap ook een img map. Download daar deze afbeeldingen in.
  4. Maak dit grid na in HTML en CSS. Neem de id’s over in je eigen HTML.

Console

  1. Maak in je javascript een variabele. Deze variabele gaan we gebruiken om bij te houden waar de mol is. We gaan het script zo maken, dat als counter gelijk is aan 0, de mol links is, bij 1 is de mol in het midden, bij 2 rechts.
    var counter = 0;
    

Als je een abstract begrip zoals ‘de locatie van de mol’ op wilt slaan in variabelen, gebruiken we daar vaak een getal voor, omdat dit voor de computer makkelijker te begrijpen is.

  1. Om te kunnen zien wat er gebeurt met de variabele counter, moeten we onder de motorkap van de browser kunnen kijken. Dit doen we met de console. De console van Chrome open je met Ctrl Shift J (op Windows) of Ctrl Option J (op Mac).

    Plak deze code in je script:

    console.log(counter);
    

    Als je nu index.html opent in de browser, zie je in de console het volgende:

    Je ziet de inhoud van counter: 0. Met console.log() kun je dus de inhoud van een variabele in de browser zien. Handig als we zometeen met die variabele aan de slag gaan!

Handig: De console laat je ook foutmeldingen zien als er iets niet klopt aan je code. Meer hierover lees je in XXXXXXX. Het kan zijn dat je nu al een foutmelding ziet: een 404 (Not Found) melding over een favicon.ico. Die melding kun je veilig negeren, maar je kunt natuurlijk ook een favicon maken.

setInterval

  1. In de vorige les heb je geleerd dat functies codeblokken zijn die op een bepaald moment uitgevoerd worden. Voor ons spel maken we een functie die elke seconde gestart wordt.
    function change() {
        console.log(counter);
        counter = counter + 1;
    }
    
    var timer = setInterval(change, 1000);
    

    Wat zien we in deze code? We maken een nieuwe functie, genaamd change. In die functie wordt er 1 bij counter opgeteld, het resultaat wordt in de console getoond.

    In de laatste regel maken we een timer met setInterval. Tussen de ()-haakjes van setInterval zet je twee dingen:
    ● de functie die door de timer gestart moet worden (in ons geval change)
    ● de interval in milliseconden (1000 milliseconden is 1 seconde).

    Als het goed is zie je nu in de console de counter langzaam oplopen.

  2. Schrijf ín de functie een if-statement waarin je het volgende zegt: Als counter gelijk is aan 3, moet counter weer 0 worden.

    Als het goed is zie je in de console nu dat counter nooit groter wordt dan 2.

if-Statement

  1. Maak bovenaan je code (dus voor alle code die je al hebt) verwijzingen naar iedere div op je pagina. Hier gebruik je dus document.querySelector voor.

  2. Je hebt in de vorige les al geleerd hoe je de CSS-stijl van een element met JS aanpast:

    mijnVariabele.style.width = "150px";
    mijnVariabele.style.backgroundColor = "blue";
    

    In de volgende stap gaan we de achtergrondafbeelding aanpassen. Dat werkt precies hetzelfde:

    mijnVariabele.style.backgroundImage = "url(img/plaatje.jpg)"
    

    Je gaat nu drie if-statements maken. We hebben de logica alvast voor je uitgedacht, jij hoeft alleen nog de code te schrijven. Doe dat in de functie:

    Als counter gelijk is aan 0
        Dan is de achtergrondafbeelding van #left gelijk aan het plaatje van de mol
    Anders
        Dan is de achtergrondafbeelding van #left gelijk aan het plaatje van gras
    
    
    Als counter gelijk is aan 1
        Dan is de achtergrondafbeelding van #middle gelijk aan het plaatje van de mol
    Anders
        Dan is de achtergrondafbeelding van #middle gelijk aan het plaatje van gras
    
    
    Als counter gelijk is aan 2
        Dan is de achtergrondafbeelding van #right gelijk aan het plaatje van de mol
    Anders
        Dan is de achtergrondafbeelding van #right gelijk aan het plaatje van gras

    Als het goed is zie je de mol nu van links naar rechts bewegen, en dan weer links beginnen:

Score

  1. In deze stappen gaan we de score bijhouden en tonen aan de gebruiker. Maak bovenaan je code een nieuwe variabele, genaamd score, waar je de waarde 0 in stopt.

  2. In de vorige les heb je ook geleerd hoe je een functie start door op een element te klikken:

    function quiz() {
        // code
    }
    
    plaatje.onclick = quiz;
    

    Maak onderaan je code een nieuwe functie, die wordt gestart door het klikken op de linker div.

  3. In die functie schrijf je code aan de hand van de volgende logica:

    Als counter gelijk is aan 0 
        Dan gaat de score met 1 omhoog
        En zet je in de #header de volgende innerHTML: "Score:" + score

    Als het goed is zie je nu de score in beeld als je op de linker div klikt terwijl de mol daar is.

  4. Doe hetzelfde voor de andere twee div’s. Uiteraard verander je daar de if-statement zodat counter gelijk is aan 1 of 2.

Math.random()

  1. Het spel is nu wel heel voorspelbaar. Het zou leuker zijn als de mol op een willekeurige plek verschijnt. Hier gaan we Math.random() voor gebruiken. We willen JavaScript daarmee een willekeurige 0, 1 of 2 laten genereren.

    Verwijder uit je functie de code die 1 bij counter optelt, en de hele if-statement die zorgt dat counter niet te hoog wordt. De console.log(counter) laat je staan.

    In plaats daarvan plak je deze code:

    counter = Math.random();
    

    In de console zie je nu dat counter elke keer een willekeurig getal is, tussen de 0 en 1.

    Om van dit willekeurige getal een 0, 1 of 2 te maken, doen we twee toevoegingen aan deze regel.
    Eerst vermenigvuldigen we het willekeurige getal keer 3, zodat we een getal van 0 tot 3 krijgen:

    counter = Math.random()*3;
    

    Vervolgens halen we dat willekeurige getal door Math.floor(), die alles na de komma weghaalt:

    counter = Math.floor( Math.random()*3 );
    

    Als het goed is zie je nu de mol steeds op een willekeurige plek verschijnen. Spelen maar!

Extra uitdagingen

Hier lees je een aantal extra uitdagingen, waarmee je het spel nog kunt uitbreiden:

  1. Game Over!
    Voeg een extra if-statement toe aan je functie, waarin je het volgende doet:

    Als score groter is dan 4 
        Dan zet je in de #header de volgende innerHTML: "Game over!"
        En stop je de timer

    De timer stoppen doe je met clearInterval(timer);

  2. Mis
    Pas de if statements in je klik-functies aan, zodat je score omlaag gaat als je niet op de mol klikt.

  3. Versnellen
    Door de timer interval aan te passen kunnen we het spel steeds sneller laten verlopen. Maak bovenaan je code een nieuwe variabele waarin je de interval opslaat, zet daar de waarde 1000 in.

    Pas de setInterval code aan: vervang 1000 door de naam van je variabele.

    Zet in de drie functies de volgende de code:

    jouwVariabele = jouwVariabele - 100;
    clearInterval(timer);
    timer = setInterval(change, jouwVariabele);
    

    N.B.: We zetten in de laatste regel niet het woordje var voor timer, omdat we de bestaande variabele aanpassen, en niet een nieuwe variabele willen maken.

  4. Reset
    Op dit moment moet je het spel herstarten door de browser te verversen. Maak een knop die de score weer op 0 zet en de timer opnieuw start.
  5. Tijd
    Houd bij hoe lang je er over doet om het spel te spelen. Maak een variabele time die op 0 begint. Elke keer als de functie change wordt uitgevoerd tel je de variabele die je bij versnellen gemaakt hebt op bij time. Aan het eind van het spel laat je de verlopen tijd zien. Wie haalt de snelste tijd?