diff --git a/Games/Catch_Stars/app.js b/Games/Catch_Stars/app.js
index 788981f4a8..542f88990d 100644
--- a/Games/Catch_Stars/app.js
+++ b/Games/Catch_Stars/app.js
@@ -1,69 +1,85 @@
const screens = document.querySelectorAll('.screen');
-const start_btn = document.getElementById('start-btn')
-const game_container = document.getElementById('game-container')
-const timeEl = document.getElementById('time')
-const scoreEl = document.getElementById('score')
-const message = document.getElementById('message')
-let seconds = 0
-let score = 0
-let selected_star = { src: 'https://upload.wikimedia.org/wikipedia/commons/4/45/Star_icon-72a7cf.svg', alt: 'yellow star' }
+const start_btn = document.getElementById('start-btn');
+const reset_btn = document.getElementById('reset-btn');
+const game_container = document.getElementById('game-container');
+const timeEl = document.getElementById('time');
+const scoreEl = document.getElementById('score');
+const message = document.getElementById('message');
+let seconds = 0;
+let score = 0;
+let selected_star = { src: 'https://upload.wikimedia.org/wikipedia/commons/4/45/Star_icon-72a7cf.svg', alt: 'yellow star' };
+let interval;
start_btn.addEventListener('click', () => {
- screens[0].classList.add('up')
- setTimeout(createStar, 1000)
- startGame()
-})
+ screens[0].classList.add('up');
+ setTimeout(createStar, 1000);
+ startGame();
+});
+
+reset_btn.addEventListener('click', resetGame);
function startGame() {
- setInterval(increaseTime, 1000)
+ interval = 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
- timeEl.innerHTML = `Time: ${m}:${s}`
- seconds++
+ let m = Math.floor(seconds / 60);
+ let s = seconds % 60;
+ m = m < 10 ? `0${m}` : m;
+ s = s < 10 ? `0${s}` : s;
+ timeEl.innerHTML = `Time: ${m}:${s}`;
+ seconds++;
}
function createStar() {
- const star = document.createElement('div')
- star.classList.add('star')
- const { x, y } = getRandomLocation()
- star.style.top = `${y}px`
- star.style.left = `${x}px`
- star.innerHTML = ``
+ const star = document.createElement('div');
+ star.classList.add('star');
+ const { x, y } = getRandomLocation();
+ star.style.top = `${y}px`;
+ star.style.left = `${x}px`;
+ star.innerHTML = `
`;
- star.addEventListener('click', catchStar)
+ star.addEventListener('click', catchStar);
- game_container.appendChild(star)
+ game_container.appendChild(star);
}
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 }
+ 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 catchStar() {
- increaseScore()
- this.classList.add('caught')
- setTimeout(() => this.remove(), 2000)
- addStars()
+ increaseScore();
+ this.classList.add('caught');
+ setTimeout(() => this.remove(), 2000);
+ addStars();
}
function addStars() {
- setTimeout(createStar, 1000)
- setTimeout(createStar, 1500)
+ setTimeout(createStar, 1000);
+ setTimeout(createStar, 1500);
}
function increaseScore() {
- score++
+ score++;
if(score > 19) {
- message.classList.add('visible')
+ message.classList.add('visible');
}
- scoreEl.innerHTML = `Score: ${score}`
+ scoreEl.innerHTML = `Score: ${score}`;
+}
+
+function resetGame() {
+ clearInterval(interval);
+ seconds = 0;
+ score = 0;
+ timeEl.innerHTML = 'Time: 00:00';
+ scoreEl.innerHTML = 'Score: 0';
+ message.classList.remove('visible');
+ screens[0].classList.remove('up');
+ const stars = document.querySelectorAll('.star');
+ stars.forEach(star => star.remove());
}
diff --git a/Games/Catch_Stars/index.html b/Games/Catch_Stars/index.html
index 54635fda43..ed67291e31 100644
--- a/Games/Catch_Stars/index.html
+++ b/Games/Catch_Stars/index.html
@@ -19,6 +19,7 @@