Game Engine

Nu moeten we de game-engine maken. Deze is redelijk eenvoudig:

1. zoek een random hole uit de holes-array (regel #2)
2. reset de timer
3. zet de mol in dat willekeurig hole
4. Zet de timer op basis van de speed variabele

/// Game Engine
const main = () => {    
    const hole = holes[getRandomHole()]
    let timer = null
    const img = createMole()
    hole.appendChild(img)

    timer = setTimeout(() => {
        hole.removeChild(img)
        main()
    }, speed)
}

Je ziet dat we hier twee functies aanroepen: getRandomHole() en createMole(). Deze bestaan niet, dus die gaan we eerst even optuigen.

Create Mole

De createMole functie werken we in de volgende stap uit. Voor nu zetten we hier even een 'lege' functie in!

const createMole = () => {
    return {}
}

Random hole

De getRandomHole() functie kunnen we wel maken. Neem de lengte van de holes array, en bereken daar een random getal uit:

const getRandomHole = () => {
    return( Math.floor(Math.random() * holes.length) )
}

Countdown

Laten we de countDown functie ook alvast maken en inzetten:

1. Trek 1 af van de huidige time (default 60)
2. Update het timerBoard
3. Als de tijd verlopen is (0), verwijder de timer en verwijder de content-div in de html pagina

const countDown = () => {
    time--
    timerBoard.textContent = `${ time }s`
   
    if (time == 0) {
      clearInterval(countDownTimerId)
      content.remove()
    }
}

Aanroep

Nu moeten we deze functies alleen nog aanroepen. Voeg deze code onderaan je main.js toe:

/// GO!
let countDownTimerId = setInterval(countDown, 1000)
main()

Als je nu je pagina ververst, zie je de timer aflopen en verder gebeurt er niks. Als de timer bij 0 is, verdwijnt het veld met de gaten.

🎗

hacker level #5

Volledige code (tot nu toe)

const hammer = document.querySelector('.hammer')
const holes = document.querySelectorAll('.hole')
const content = document.querySelector('.content')

const scoreBoard = document.querySelector('.score')
const speedBoard = document.querySelector('.speed')
const timerBoard = document.querySelector('.timer')

const SCORE_ADDITION = 50

/// Mole
const MOLE = './assets/img/mole.png'
const MOLE_WACKED = './assets/img/mole-whacked.png'

/// Speed 
const SPEED_START = 1250
const SPEED_FASTER = 50
const SPEED_UPDATE = 100
const SPEED_MIN = 750

const SPEEDS = [
    { max: SPEED_START, txt: "SLOW" },  
    { max: SPEED_START - SPEED_UPDATE, txt: "MEDIUM" }, 
    { max: SPEED_START - (2 * SPEED_UPDATE), txt: "FAST" }, 
    { max: SPEED_START - (4 * SPEED_UPDATE), txt: "RIDICULOUS"}
]

let score = 0
let speed = SPEED_START
let time = 60

/// Hamer
window.addEventListener('mousemove', e => {
    hammer.style.top = e.pageY + 'px'
    hammer.style.left = e.pageX + 'px'
})

window.addEventListener('mousedown', () => {
    hammer.classList.add('active')
})

window.addEventListener('mouseup', () => {
    hammer.classList.remove('active')
})


/// Countdown
const countDown = () => {
    time--
    timerBoard.textContent = `${ time }s`
   
    if (time == 0) {
      clearInterval(countDownTimerId)
      content.remove()
    }
   
}

/// Random Hole
const getRandomHole = () => {
    return( Math.floor(Math.random() * holes.length) )
}

/// Mole
const createMole = () => {
    return {}
}

/// Game Engine
const main = () => {    
    const hole = holes[getRandomHole()]
    let timer = null
    const img = createMole()
    hole.appendChild(img)

    timer = setTimeout(() => {
        hole.removeChild(img)
        main()
    }, speed)
}

/// GO!
let countDownTimerId = setInterval(countDown, 1000)
main()