diff --git a/Catch the falling Stars/README.md b/Catch the falling Stars/README.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/Catch the falling Stars/index.html b/Catch the falling Stars/index.html new file mode 100644 index 0000000000..4469040ead --- /dev/null +++ b/Catch the falling Stars/index.html @@ -0,0 +1,15 @@ + + + + + + Catch the Falling Stars + + + +
+
+
+ + + diff --git a/Catch the falling Stars/script.js b/Catch the falling Stars/script.js new file mode 100644 index 0000000000..d80a5fd35f --- /dev/null +++ b/Catch the falling Stars/script.js @@ -0,0 +1,47 @@ +const gameContainer = document.getElementById('game-container'); +const basket = document.getElementById('basket'); +let score = 0; + +document.addEventListener('mousemove', (event) => { + const basketX = event.clientX - (basket.offsetWidth / 2); + basket.style.left = `${basketX}px`; +}); + +function createStar() { + const star = document.createElement('div'); + star.classList.add('star'); + star.style.left = `${Math.random() * window.innerWidth}px`; + gameContainer.appendChild(star); + moveStar(star); +} + +function moveStar(star) { + let starY = 0; + const fallInterval = setInterval(() => { + if (starY > window.innerHeight) { + clearInterval(fallInterval); + star.remove(); + } else { + starY += 5; + star.style.top = `${starY}px`; + checkCollision(star); + } + }, 30); +} + +function checkCollision(star) { + const basketRect = basket.getBoundingClientRect(); + const starRect = star.getBoundingClientRect(); + if ( + starRect.bottom > basketRect.top && + starRect.top < basketRect.bottom && + starRect.right > basketRect.left && + starRect.left < basketRect.right + ) { + star.remove(); + score += 10; + console.log(`Score: ${score}`); + } +} + +setInterval(createStar, 1000); diff --git a/Catch the falling Stars/styles.css b/Catch the falling Stars/styles.css new file mode 100644 index 0000000000..3f84d4a528 --- /dev/null +++ b/Catch the falling Stars/styles.css @@ -0,0 +1,33 @@ +body { + margin: 0; + overflow: hidden; + background-color: #000; +} + +#game-container { + position: relative; + width: 100vw; + height: 100vh; + background-color: #000; + overflow: hidden; +} + +#basket { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + width: 100px; + height: 50px; + background-color: #fff; + border-radius: 10px; +} + +.star { + position: absolute; + top: -20px; + width: 20px; + height: 20px; + background-color: yellow; + border-radius: 50%; +}