-
-
Notifications
You must be signed in to change notification settings - Fork 524
/
script.js
74 lines (65 loc) · 2.18 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
const screens = document.querySelectorAll(".screen");
const chooseInsectButtons = document.querySelectorAll(".choose-insect-btn");
const startButton = document.getElementById("start-btn");
const gameContainer = document.getElementById("game-container");
const timeElement = document.getElementById("time");
const scoreElement = document.getElementById("score");
const message = document.getElementById("message");
let seconds = 0;
let score = 0;
let selectedInsect = {};
startButton.addEventListener("click", () => screens[0].classList.add("up"));
const increaseScore = () => {
score++;
if (score > 19) message.classList.add("visible");
scoreElement.innerHTML = `Score: ${score}`;
};
const addInsects = () => {
setTimeout(createInsect, 1000);
setTimeout(createInsect, 1500);
};
const catchInsect = function () {
increaseScore();
this.classList.add("caught");
setTimeout(() => this.remove, 2000);
addInsects();
};
const 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 };
};
const createInsect = () => {
const insect = document.createElement("div");
insect.classList.add("insect");
const { x, y } = getRandomLocation();
insect.style.top = `${y}px`;
insect.style.left = `${x}px`;
insect.innerHTML = `<img src="${selectedInsect.src}"
alt="${selectedInsect.alt}"
style="transform: rotate(${Math.random() * 360}deg)" />`;
insect.addEventListener("click", catchInsect);
gameContainer.appendChild(insect);
};
const increaseTime = () => {
let m = Math.floor(seconds / 60);
let s = seconds % 60;
m = m < 10 ? `0${m}` : m;
s = s < 10 ? `0${s}` : s;
timeElement.innerHTML = `Time: ${m}:${s}`;
seconds++;
};
const startGame = () => setInterval(increaseTime, 1000);
chooseInsectButtons.forEach((button) => {
button.addEventListener("click", () => {
const image = button.querySelector("img");
const src = image.getAttribute("src");
const alt = image.getAttribute("alt");
selectedInsect = { src, alt };
screens[1].classList.add("up");
setTimeout(createInsect, 1000);
startGame();
});
});