├── .github
└── FUNDING.yml
├── README.md
├── app.js
├── index.html
├── mole.jpg
└── styles.css
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: kubowania
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
13 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # whac-a-mole
2 | Vanilla JavaScript game
3 |
4 |
5 | Learn to make a simple grid-based game using HTML, CSS and JavaScript. The idea of whack-a-mole is simple! The player needs to hit the grid with the mole in as many times as possible until the time runs out. In this tutorial, we will cover:
6 |
7 | - document.querySelector
8 | - textContent
9 | - forEach
10 | - addEventListener
11 | - setInterval
12 | - classList.add
13 |
14 | ...and much more.
15 |
16 | View the full tutorial [here]:(https://youtu.be/rJU3tHLgb_c)
17 |
18 | As always, if you get stuck or have any questions, please do comment below and I will be sure to get back to you!
19 |
20 | I would love to see what you made so please tag me on twitter on @ania_kubow or mention me on Youtube so I can find it and see.
21 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const squares = document.querySelectorAll('.square')
2 | const mole = document.querySelector('.mole')
3 | const timeLeft = document.querySelector('#time-left')
4 | const score = document.querySelector('#score')
5 |
6 | let result = 0
7 | let hitPosition
8 | let currentTime = 60
9 | let timerId = null
10 |
11 | function randomSquare() {
12 | squares.forEach(square => {
13 | square.classList.remove('mole')
14 | })
15 |
16 | let randomSquare = squares[Math.floor(Math.random() * 9)]
17 | randomSquare.classList.add('mole')
18 |
19 | hitPosition = randomSquare.id
20 | }
21 |
22 | squares.forEach(square => {
23 | square.addEventListener('mousedown', () => {
24 | if (square.id == hitPosition) {
25 | result++
26 | score.textContent = result
27 | hitPosition = null
28 | }
29 | })
30 | })
31 |
32 | function moveMole() {
33 | timerId = setInterval(randomSquare, 500)
34 | }
35 |
36 | moveMole()
37 |
38 | function countDown() {
39 | currentTime--
40 | timeLeft.textContent = currentTime
41 |
42 | if (currentTime == 0) {
43 | clearInterval(countDownTimerId)
44 | clearInterval(timerId)
45 | alert('GAME OVER! Your final score is ' + result)
46 | }
47 |
48 | }
49 |
50 | let countDownTimerId = setInterval(countDown, 1000)
51 |
52 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Whac-a-mole
7 |
8 |
9 |
10 |
11 |