Hamer functie

De hamer functie is een beetje bijzonder. We zetten de muis-cursor uit, en we gaan met de <div class='hammer'> slepen.

Dit doen we door een aantal zogenaamde eventListeners aan de div te koppelen:

1. mousemove: verplaatst de hamer-div met de muis
2. mousedown: voeg de class active toe aan de hamer (roteer 45 graden)
3. mouseup: verwijder deze class weer van de hamer

/// 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')
})

Als je nu de pagina ververst en met de muis beweegt, zie je de hamer bewegen. En klik nu maar eens!

🍗

hacker level #4

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')
})