-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
78 lines (67 loc) · 2.14 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
const screens = document.querySelectorAll('.screen');
const choose_bug_buttons = document.querySelectorAll('.choose-bug-button');
const start_button = document.getElementById('start-button')
const game_container = document.getElementById('game-container')
const timeElem = document.getElementById('time')
const scoreElem = document.getElementById('score')
const message = document.getElementById('message')
let seconds = 0
let score = 0
let selected_bug = {}
start_button.addEventListener('click', () => screens[0].classList.add('up'))
choose_bug_buttons.forEach(button => {
button.addEventListener('click', () => {
const img = button.querySelector('img')
const src = img.getAttribute('src')
const alt = img.getAttribute('alt')
selected_bug = { src, alt }
screens[1].classList.add('up')
setTimeout(createBug, 1000)
startGame()
})
})
function startGame() {
setInterval(increaseTime, 1000)
}
function increaseTime() {
let m = Math.floor(seconds / 60)
let s = seconds % 60
m = m < 10 ? `0${m}` : m
s = s < 10 ? `0${s}` : s
timeElem.innerHTML = `Time: ${m}:${s}`
seconds++
}
function createBug() {
const bug = document.createElement('div')
bug.classList.add('bug')
const { x, y } = getRandomLocation()
bug.style.top = `${y}px`
bug.style.left = `${x}px`
bug.innerHTML = `<img src="${selected_bug.src}" alt="${selected_bug.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
bug.addEventListener('click', catchBug)
game_container.appendChild(bug)
}
function getRandomLocation() {
const width = window.innerWidth
const height = window.innerHeight
const x = Math.random() * (width - 200) + 100
const y = Math.random() * (height - 200) + 100
return { x, y }
}
function catchBug() {
increaseScore()
this.classList.add('caught')
setTimeout(() => this.remove(), 2000)
addBugs()
}
function addBugs() {
setTimeout(createBug, 1000)
setTimeout(createBug, 1500)
}
function increaseScore() {
score++
if(score > 19) {
message.classList.add('visible')
}
scoreElem.innerHTML = `Score: ${score}`
}