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 @@