Mol maken

De volgende stap is dat we de mole daadwerkelijk gaan maken, hiervoor moeten we:

1. een img-element aanmaken
2. de css-class mole aan het img toevoegen
3. het plaatje MOLE aan het img toevoegen
4. Een EventListener op het img maken zodat we 'm kunnen 'slaan'
5. Zodra we geraakt hebben, de score bijwerken
6. Zodra we 'm geraakt hebben het plaatje vervangen door de MOLE_WHACKED-afbeelding

/// Mole
const createMole = () => {
    const img = document.createElement('img')
    img.classList.add('mole')
    img.src = MOLE

    img.addEventListener('click', () => {
        setScore()
        img.src = MOLE_WACKED
    })

    return(img)
}

Score instellen

Je ziet dat we de score aanpassen zodra we de mol geraakt hebben. Laten we deze dan ook meteen maar even maken:

1. tel SCORE_ADDITION bij de huidige score op
2. Schrijf de score naar het scherm
3. verhoog (of niet) de snelheid

/// Score
const setScore = () => {
    score += SCORE_ADDITION
    scoreBoard.textContent = score
    setSpeed()
}

Snelheid instellen

We kunnen nu de snelheid instellen:

1. Check of de huidige speed een veelvoud is van SPEED_UPDATE (modulus berekening)
2. en of de speed nog altijd groter is dan SPEED_MIN
3. Zo ja, verhoog de speed
4. Pas de tekst aan bij de snelheidsindicator (nieuwe functie)

const setSpeed = () => {  
    if( score % SPEED_UPDATE === 0 && speed > SPEED_MIN) {
        speed -= SPEED_FASTER
        speedBoard.textContent = getSpeedText(speed)
    }
}

Speedtext

De tekst op de snelheidsindicator kunnen we nu aanpassen:

const getSpeedText = (speed) => {
    let curSpeed = SPEEDS.filter( s => speed <= s.max)
    return(curSpeed[curSpeed.length - 1].txt)
} 

🏅

hacker level #6

That's all folks...

En dat was "Whack-a-Mole". Je ziet dat deze game niet zo gek veel om het lijf heeft.