-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
102 lines (84 loc) · 3.09 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
const screens = document.querySelectorAll('.screen');
const choose_insect_btn = document.querySelectorAll('.choose-insect-btn');
const game_container = document.getElementById('game-container');
const start_btn = document.getElementById('btn-start');
const timeEl = document.getElementById('time');
const scoreEL = document.getElementById('score');
const stop_btn = document.getElementById('btn-stop');
let second = 0;
let score = 0;
let selected_insect = {};
let gameInterval;
start_btn.addEventListener('click', () => screens[0].classList.add('up'));
choose_insect_btn.forEach(btn => {
btn.addEventListener('click', () => {
const img = btn.querySelector('img');
const src = img.getAttribute('src');
const alt = img.getAttribute('alt');
selected_insect = { src, alt };
screens[1].classList.add('up');
setTimeout(createInsect, 1000);
startGame();
});
});
stop_btn.addEventListener('click', stopGame);
function startGame() {
gameInterval = setInterval(increaseTime, 1000);
}
function increaseTime() {
let m = Math.floor(second / 60);
let s = second % 60;
m = m < 10 ? `0${m}` : m;
s = s < 10 ? `0${s}` : s;
timeEl.innerHTML = `Time: ${m}:${s}`;
second++;
}
function createInsect() {
const insect = document.createElement('div');
insect.classList.add('insect');
const { x, y } = getRandom();
insect.style.top = `${x}px`;
insect.style.left = `${y}px`;
insect.innerHTML = `<img src="${selected_insect.src}" alt="${selected_insect.alt}" style="transform:rotate(${Math.random() * 360}deg)"/>`;
insect.addEventListener('click', catchInsect);
game_container.appendChild(insect);
}
function getRandom() {
const padding = 100; // Adjust padding as needed to ensure insects don't spawn too close to the edges
const width = game_container.offsetWidth - padding;
const height = game_container.offsetHeight - padding;
const x = Math.random() * height + padding / 2;
const y = Math.random() * width + padding / 2;
return { x, y };
}
function catchInsect() {
increaseScore();
this.classList.add('caught');
setTimeout(() => this.remove(), 1000);
addInsect();
}
function addInsect() {
setTimeout(createInsect, 1000);
setTimeout(createInsect, 1500);
}
function increaseScore() {
score++;
scoreEL.innerHTML = `Score: ${score}`;
}
function stopGame() {
clearInterval(gameInterval);
second = 0;
score = 0;
selected_insect = {};
timeEl.innerHTML = `Time: 00:00`;
scoreEL.innerHTML = `Score: 0`;
game_container.innerHTML = `
<h3 id="time" class="time">Time: 00:00</h3>
<h3 id="score" class="score">Score: 0</h3>
<button id="btn-stop" class="btn-stop">Stop Game</button>
`;
// Reattach the event listener to the stop button
document.getElementById('btn-stop').addEventListener('click', stopGame);
// Remove the 'up' class from all screens to reset them
screens.forEach(screen => screen.classList.remove('up'));
}