Merge pull request #3832 from manishh12/Catch_stars

Added Catch_Stars Game
kunjgit · May 28, 2024 · e74c290 · e74c290
2 parents 3a25c36 + 44272f8
commit e74c290
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 0 deletions.
diff --git a/Games/Catch_Stars/README.md b/Games/Catch_Stars/README.md
@@ -0,0 +1,40 @@
+
+# **Catch Stars⭐** 
+
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- "Catch Stars" is a fun and engaging game where players must catch stars that appear randomly on the screen. The game tests your speed and reflexes as you try to catch as many stars as possible within a time limit. As you catch more stars, the game becomes more challenging with more stars appearing at a faster rate. 
+
+## **Functionalities 🎮**
+<!-- add functionalities over here -->
+- Start the game with a predefined star.
+- Stars appear at random positions on the screen.
+- Catch stars by clicking on them.
+- Timer keeps track of how long you have been playing.
+- Score increases with each star caught.
+- Special message appears when you catch more than 19 stars.
+- Responsive design suitable for various screen sizes.
+
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- Click the "Play Game" button to start.
+- Stars will appear randomly on the screen.
+- Click on the stars to catch them and increase your score.
+- Keep an eye on the timer and try to catch as many stars as possible before time runs out.
+- If you catch more than 19 stars, a special message will appear.
+
+<br>
+
+## **Screenshots 📸**
+![Catch_the_star](https://github.com/kunjgit/GameZone/assets/97523900/352c3cef-8112-4e98-a075-cbecfe8b947a)
+
+
+
+<br>
+
diff --git a/Games/Catch_Stars/app.js b/Games/Catch_Stars/app.js
@@ -0,0 +1,69 @@
+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' }
+
+start_btn.addEventListener('click', () => {
+    screens[0].classList.add('up')
+    setTimeout(createStar, 1000)
+    startGame()
+})
+
+function startGame() {
+    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++
+}
+
+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 = `<img src="${selected_star.src}" alt="${selected_star.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
+
+    star.addEventListener('click', catchStar)
+
+    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 }
+}
+
+function catchStar() {
+    increaseScore()
+    this.classList.add('caught')
+    setTimeout(() => this.remove(), 2000)
+    addStars()
+}
+
+function addStars() {
+    setTimeout(createStar, 1000)
+    setTimeout(createStar, 1500)
+}
+
+function increaseScore() {
+    score++
+    if(score > 19) {
+        message.classList.add('visible')
+    }
+    scoreEl.innerHTML = `Score: ${score}`
+}
diff --git a/Games/Catch_Stars/index.html b/Games/Catch_Stars/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Catch The Star</title>
+  </head>
+  <body>
+    <div class="screen">
+      <h1>Catch The Star</h1>
+      <button class="btn" id="start-btn">Play Game</button>
+    </div>
+
+    <div class="screen game-container" id="game-container">
+      <h3 id="time" class="time">Time: 00:00</h3>
+      <h3 id="score" class="score">Score: 0</h3>
+      <h5 id="message" class="message">
+        Are you enjoying the game? <br>
+        Try to catch more stars!!
+      </h5>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/Games/Catch_Stars/style.css b/Games/Catch_Stars/style.css
@@ -0,0 +1,113 @@
+@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #282c34;
+  color: #fff;
+  font-family: 'Press Start 2P', sans-serif;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  text-align: center;
+}
+
+a {
+  color: #fff;
+}
+
+h1 {
+  line-height: 1.4;
+}
+
+.btn {
+  border: 0;
+  background-color: #fff;
+  color: #282c34;
+  padding: 15px 20px;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.btn:hover {
+  opacity: 0.9;
+}
+
+.btn:focus {
+  outline: 0;
+}
+
+.screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  transition: margin 0.5s ease-out;
+}
+
+.screen.up {
+  margin-top: -100vh;
+}
+
+.game-container {
+  position: relative;
+}
+
+.time,
+.score {
+  position: absolute;
+  top: 20px;
+}
+
+.time {
+  left: 20px;
+}
+
+.score {
+  right: 20px;
+}
+
+.message {
+  line-height: 1.7;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  padding: 20px;
+  z-index: 100;
+  text-align: center;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -150%);
+  transition: transform 0.4s ease-in;
+}
+
+.message.visible {
+  transform: translate(-50%, 150%);
+  opacity: 1;
+}
+
+.star {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform 0.3s ease-in-out;
+}
+
+.star.caught {
+  transform: translate(-50%, -50%) scale(0);
+}
+
+.star img {
+  width: 100px;
+  height: 100px;
+}
diff --git a/README.md b/README.md
@@ -275,9 +275,11 @@ This repository also provides one such platforms where contributers come over an
 | [Pictionary_Game](https://github.com/Jagpreet153/GameZone/tree/main/Games/Pictionary_Game)               |
 | [HitYourFriend](https://github.com/kunjgit/GameZone/tree/main/Games/HitYourFriend)               |
 | [Random_joke_Generator](https://github.com/Jagpreet153/GameZone/tree/main/Games/Random_joke_Generator)               |
+| [Catch_Stars](https://github.com/Kunjgit/GameZone/tree/main/Games/Catch_Stars)               |
 | [LaserDarts] (https://github.com/Jagpreet153/GameZone/tree/main/Games/LaserDarts)
 | [Block Building](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Building)                                 |
 
+
 
 
  </center>

diff --git a/assets/images/Catch_Stars.jpeg b/assets/images/Catch_Stars.jpeg