Elementen koppelen

Nu we de opmaak en de HTML code op hun plek hebben, kunnen we de game gaan programmeren. Maak een file js/main.js aan.

Elementen koppelen

We zullen in de game interactie met de diverse html-elementen hebben. Om dit voor elkaar te krijgen, moeten we de afzonderlijke elementen in een variabele beschikbaar maken:

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

Game constanten

Vervolgens hebben we een aantal (configureerbare) constanten nodig waarmee we onze game eenvoudig kunnen aanpassen:

1. SCORE_ADDITION: het aantal punten dat we per keer bij de score optellen
2. MOLE: de afbeelding van de mol
3. MOLE_WHACKED: de afbeelding van de mol die een klap krijgt
4. SPEED_START: de start snelheid van de game
5. SPEED_FASTER: per geraakte mol wordt de snelheid met deze waarde opgevoerd
6. SPEED_UPDATE: de snelheid wordt met SPEED_FASTER opgevoerd per veelvoud van SPEED_UPDATE punten
7. SPEED_MIN: de snelste speed (bij veel sneller raakt de game onspeelbaar)
8. SPEEDS: een tekstuele aanduiding van de snelheid

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"}
]

Game variabelen

Verder hebben we nog wat modificeerbare variabelen nodig:

1. score: default 0 - de score
2. speed: de begin snelheid, default SPEED_START
3. time: het begin van de countdown, default 60 (1 minuut)

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

🐥

hacker level #3

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