Merge branch 'main' into main

kunjgit · Jul 5, 2024 · 4993e23 · 4993e23
2 parents 80211de + 671a572
commit 4993e23
Show file tree

Hide file tree

Showing 39 changed files with 2,300 additions and 178 deletions.
diff --git a/Games/Ant_Smasher/Readme.md b/Games/Ant_Smasher/Readme.md
@@ -0,0 +1,20 @@
+# **Game_Name**
+
+Ant Smasher
+
+## **Description 📃**
+
+Frontend game developed using HTML, CSS, JavaScript. Player has to kill all the Ants
+
+## **functionalities 🎮**
+
+- Player has to kill all the Ants by Smashing it.
+
+## **How to play? 🕹️**
+
+- Click the Start button to start the game
+- When players hits the ant the score will get increased.
+
+## **Screenshots 📸**
+
+![alt text](./img/image.png)
diff --git a/Games/Ant_Smasher/index.html b/Games/Ant_Smasher/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Ant Smasher Game</title>
+  <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <h1>Ant Smasher<span class="score">0</span></h1>
+  <button onClick="startGame()" style="float:right;">Start</button>
+
+  <div class="game">
+    <div class="hole hole1">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole2">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole3">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole4">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole5">
+      <div class="mole"></div>
+    </div>
+    <div class="hole hole6">
+      <div class="mole"></div>
+    </div>
+  </div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Ant_Smasher/script.js b/Games/Ant_Smasher/script.js
@@ -0,0 +1,47 @@
+const holes = document.querySelectorAll(".hole");
+const scoreBoard = document.querySelector(".score");
+const moles = document.querySelectorAll(".mole");
+let lastHole;
+let timeUp = false;
+let score = 0;
+
+function randomTime(min, max) {
+  return Math.round(Math.random() * (max - min) + min);
+}
+
+function randomHole(holes) {
+  const idx = Math.floor(Math.random() * holes.length);
+  const hole = holes[idx];
+  if (hole === lastHole) {
+    return randomHole(holes);
+  }
+  lastHole = hole;
+  return hole;
+}
+
+function peep() {
+  const time = randomTime(500, 2000);
+  const hole = randomHole(holes);
+  hole.classList.add("up");
+  setTimeout(() => {
+    hole.classList.remove("up");
+    if (!timeUp) peep();
+  }, time);
+}
+
+function startGame() {
+  scoreBoard.textContent = 0;
+  timeUp = false;
+  score = 0;
+  peep();
+  setTimeout(() => (timeUp = true), 10000);
+}
+
+function bonk(e) {
+  if (!e.isTrusted) return; // cheater!
+  score++;
+  this.parentNode.classList.remove("up");
+  scoreBoard.textContent = score;
+}
+
+moles.forEach((mole) => mole.addEventListener("click", bonk));
diff --git a/Games/Ant_Smasher/style.css b/Games/Ant_Smasher/style.css
@@ -0,0 +1,72 @@
+html {
+  box-sizing: border-box;
+  font-size: 10px;
+  background: #9b7653;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Amatic SC", cursive;
+}
+
+h1 {
+  text-align: center;
+  font-size: 10rem;
+  line-height: 1;
+  margin-bottom: 0;
+}
+
+.score {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 0 3rem;
+  line-height: 1;
+  border-radius: 1rem;
+}
+
+.game {
+  width: 600px;
+  height: 400px;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 auto;
+}
+
+.hole {
+  flex: 1 0 33.33%;
+  overflow: hidden;
+  position: relative;
+}
+
+.hole:after {
+  display: block;
+  background: url(../../assets/images/Ant_Smasher_dirt.svg) bottom center
+    no-repeat;
+  background-size: contain;
+  content: "";
+  width: 100%;
+  height: 70px;
+  position: absolute;
+  z-index: 2;
+  bottom: -30px;
+}
+
+.mole {
+  background: url("../../assets/images/Ant_Smasher.png") bottom center no-repeat;
+  background-size: 60%;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  height: 100%;
+  transition: all 0.4s;
+}
+
+.hole.up .mole {
+  top: 0;
+}
diff --git a/Games/Catch the falling Stars/README.md b/Games/Catch the falling Stars/README.md
diff --git a/Games/Catch the falling Stars/index.html b/Games/Catch the falling Stars/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Catch the Falling Stars</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="game-container">
+        <div id="basket"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Catch the falling Stars/script.js b/Games/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/Games/Catch the falling Stars/styles.css b/Games/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%;
+}
diff --git a/Games/Catch_Craze/README.md b/Games/Catch_Craze/README.md
@@ -0,0 +1,28 @@
+# **Game_Name** 
+Catch Craze
+
+---
+
+<br>
+
+## **Description 📃**
+In Catch Craze, you control a basket at the bottom of the screen, aiming to catch falling objects. The game gets progressively harder as you score more points, with objects falling faster and spawning more frequently. The goal is to score as many points as possible before the time runs out.
+
+
+## **Functionalities 🎮**
+
+1. Click the "Start Game" button to begin.
+2. Move the basket to catch the falling objects.
+3. Monitor the score and timer.
+4. When the timer reaches zero, the game ends, showing your final score and a button to restart the game.
+
+1. Controls: Use the left and right arrow keys to move the basket.
+2. Scoring: Each object caught increases your score by 1.
+3. Difficulty: Object speed and spawn rate increase every 5 points.
+4. Timer: The game lasts for 60 seconds.
+5. Game Over: When time runs out, the final score is displayed with an option to play again.
+
+<br>
+
+## **Screenshots 📸**
+![Catch_Craze](https://github.com/aditya-bhaumik/GameZone/assets/92214013/48ef4f13-db31-457c-b9bb-6e7611d9255e)
diff --git a/Games/Catch_Craze/back1.mp4 b/Games/Catch_Craze/back1.mp4
diff --git a/Games/Catch_Craze/index.html b/Games/Catch_Craze/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Catch Craze</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <video autoplay muted loop id="backgroundVideo">
+        <source src="back1.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <div id="gameContainer">
+        <canvas id="gameCanvas"></canvas>
+        <div id="scoreBoard">Score: 0</div>
+        <div id="timer">Time: 60</div>
+        <div id="startScreen">
+            <h1>Catch Craze</h1>
+            <button id="startButton">Start Game</button>
+        </div>
+        <div id="gameOverScreen">
+            <h1>Game Over!</h1>
+            <p id="finalScore"></p>
+            <button id="reloadButton">Play Again</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
+
+
+
+