Merge pull request #2938 from psykat1116/main

Add New Game : [Guess The Weapon]
kunjgit · Oct 4, 2023 · b3f6e00 · b3f6e00
2 parents 5c5c34e + b273c42
commit b3f6e00
Show file tree

Hide file tree

Showing 40 changed files with 481 additions and 1 deletion.
diff --git a/Games/Guess_The_Weapon/Asset/AA-12.png b/Games/Guess_The_Weapon/Asset/AA-12.png
diff --git a/Games/Guess_The_Weapon/Asset/AK-47.jpg b/Games/Guess_The_Weapon/Asset/AK-47.jpg
diff --git a/Games/Guess_The_Weapon/Asset/AKM.jpg b/Games/Guess_The_Weapon/Asset/AKM.jpg
diff --git a/Games/Guess_The_Weapon/Asset/AS50.jpg b/Games/Guess_The_Weapon/Asset/AS50.jpg
diff --git a/Games/Guess_The_Weapon/Asset/AUG.png b/Games/Guess_The_Weapon/Asset/AUG.png
diff --git a/Games/Guess_The_Weapon/Asset/AWM.png b/Games/Guess_The_Weapon/Asset/AWM.png
diff --git a/Games/Guess_The_Weapon/Asset/Banelli.jpg b/Games/Guess_The_Weapon/Asset/Banelli.jpg
diff --git a/Games/Guess_The_Weapon/Asset/BarretM82.jpg b/Games/Guess_The_Weapon/Asset/BarretM82.jpg
diff --git a/Games/Guess_The_Weapon/Asset/China_Lake.jpeg b/Games/Guess_The_Weapon/Asset/China_Lake.jpeg
diff --git a/Games/Guess_The_Weapon/Asset/Daewoo_K3.png b/Games/Guess_The_Weapon/Asset/Daewoo_K3.png
diff --git a/Games/Guess_The_Weapon/Asset/DesertEagle.jpg b/Games/Guess_The_Weapon/Asset/DesertEagle.jpg
diff --git a/Games/Guess_The_Weapon/Asset/F2000.jpeg b/Games/Guess_The_Weapon/Asset/F2000.jpeg
diff --git a/Games/Guess_The_Weapon/Asset/FAMAS.jpg b/Games/Guess_The_Weapon/Asset/FAMAS.jpg
diff --git a/Games/Guess_The_Weapon/Asset/FIM92-Stinger.jpg b/Games/Guess_The_Weapon/Asset/FIM92-Stinger.jpg
diff --git a/Games/Guess_The_Weapon/Asset/KAR98K.png b/Games/Guess_The_Weapon/Asset/KAR98K.png
diff --git a/Games/Guess_The_Weapon/Asset/LAW80.jpg b/Games/Guess_The_Weapon/Asset/LAW80.jpg
diff --git a/Games/Guess_The_Weapon/Asset/M16A4.png b/Games/Guess_The_Weapon/Asset/M16A4.png
diff --git a/Games/Guess_The_Weapon/Asset/M249.jpg b/Games/Guess_The_Weapon/Asset/M249.jpg
diff --git a/Games/Guess_The_Weapon/Asset/M4Carbin.jpg b/Games/Guess_The_Weapon/Asset/M4Carbin.jpg
diff --git a/Games/Guess_The_Weapon/Asset/M79.png b/Games/Guess_The_Weapon/Asset/M79.png
diff --git a/Games/Guess_The_Weapon/Asset/MG42.jpg b/Games/Guess_The_Weapon/Asset/MG42.jpg
diff --git a/Games/Guess_The_Weapon/Asset/Mossberg930.jpg b/Games/Guess_The_Weapon/Asset/Mossberg930.jpg
diff --git a/Games/Guess_The_Weapon/Asset/P-90.jpg b/Games/Guess_The_Weapon/Asset/P-90.jpg
diff --git a/Games/Guess_The_Weapon/Asset/PKP.jpg b/Games/Guess_The_Weapon/Asset/PKP.jpg
diff --git a/Games/Guess_The_Weapon/Asset/Panzerschreck.png b/Games/Guess_The_Weapon/Asset/Panzerschreck.png
diff --git a/Games/Guess_The_Weapon/Asset/RPG-7.png b/Games/Guess_The_Weapon/Asset/RPG-7.png
diff --git a/Games/Guess_The_Weapon/Asset/SA80.jpg b/Games/Guess_The_Weapon/Asset/SA80.jpg
diff --git a/Games/Guess_The_Weapon/Asset/SCARL.jpg b/Games/Guess_The_Weapon/Asset/SCARL.jpg
diff --git a/Games/Guess_The_Weapon/Asset/SPAS12.jpg b/Games/Guess_The_Weapon/Asset/SPAS12.jpg
diff --git a/Games/Guess_The_Weapon/Asset/SVD_Dragunov.jpg b/Games/Guess_The_Weapon/Asset/SVD_Dragunov.jpg
diff --git a/Games/Guess_The_Weapon/Asset/XM8.jpg b/Games/Guess_The_Weapon/Asset/XM8.jpg
diff --git a/Games/Guess_The_Weapon/Asset/rpd.jpg b/Games/Guess_The_Weapon/Asset/rpd.jpg
diff --git a/Games/Guess_The_Weapon/Image/icon.png b/Games/Guess_The_Weapon/Image/icon.png
diff --git a/Games/Guess_The_Weapon/README.md b/Games/Guess_The_Weapon/README.md
@@ -0,0 +1,40 @@
+# **Guess The Weapon**
+
+---
+
+<br>
+
+## **Description 📃**
+
+It is a weapon Guessing Game. By this you can came to about lots of new weapon from WWII,PUBG,COD etc.
+
+-
+
+## **functionalities 🎮**
+
+You will get five weapons to guess. You have to guess the weapon by looking at the image of the weapon. You will get 3 chances to guess the weapon. If you guess the weapon correctly you will get 3 points. If you guess the weapon incorrectly you will lose 1 points. If you guess the weapon correctly in the first chance you will get 3 points. If you guess the weapon correctly in the second chance you will get 2 points. If you guess the weapon correctly in the third chance you will get 1 points. If you guess the weapon incorrectly in the first chance you will lose 1 points. If you guess the weapon incorrectly in the second chance you will lose 1 points. If you guess the weapon incorrectly in the third chance you will lose 1 point and get 0 point.
+<br>
+
+## **How to play? 🕹️**
+
+First click the start button. Then you will get five weapons to guess. There will be also a mask over it. You have to identify them by looking at the small portion of the image. You can always show more portion by clicking into the hint button but you will lose one point each time. Again for each wrong ans you will lose one point. If you give wrong answer each time you will get point zero and move to the next question. After ending you can see your score. You can also play again by clicking the play again button.
+
+-
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+![image](../../assets/images/Guess_The_Weapon.png)
+
+<br>
+
+## **Working video 📹**
+
+<!-- add your working video over here -->
+
+<br>
+
+## **Creator**
+[Saikat Samanta](https://github.com/psykat1116)
diff --git a/Games/Guess_The_Weapon/index.html b/Games/Guess_The_Weapon/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <link rel="icon" type="image/png" href="./Image/icon.png" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+      crossorigin="anonymous"
+    />
+    <title>Guess The Weapon - A Game To Get Familiar With Weapons</title>
+  </head>
+  <body>
+    <div id="intro">
+      <h1>Guess The Weapon</h1>
+      <p>
+        This is a guess game for guessing the correct name of the weapon. You
+        will given five images and You will get three chance and to identify it.
+        In each chance you can see a larger picture than before.
+      </p>
+      <button id="start_btn">
+        Lets Start<i class="fa-solid fa-arrow-right"></i>
+      </button>
+    </div>
+    <div id="game" class="showResult">
+      <div id="image_box">
+        <div id="mask"></div>
+        <img src="" alt="Weapon" id="image" />
+      </div>
+      <ul>
+        <li id="opt1">Value1</li>
+        <li id="opt2">Value2</li>
+        <li id="opt3">Value3</li>
+        <li id="opt4">Value4</li>
+      </ul>
+      <div class="option">
+        <button id="hint_btn">Hint<i class="fa-regular fa-face-smile-wink"></i></button>
+        <button id="next_ques">
+          Next<i class="fa-solid fa-arrow-right"></i>
+        </button>
+      </div>
+    </div>
+    <div id="result" class="showReplay">
+      <h1>Awesome you are a Pro Player<br />Your score is 5</h1>
+      <button id="replay">Play Again<i class="fa-solid fa-play"></i></button>
+    </div>
+    <script src="./info.js"></script>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/Games/Guess_The_Weapon/info.js b/Games/Guess_The_Weapon/info.js
diff --git a/Games/Guess_The_Weapon/script.js b/Games/Guess_The_Weapon/script.js
@@ -0,0 +1,138 @@
+const startBtn = document.getElementById('start_btn');
+const image = document.getElementById("image");
+const replayBtn = document.getElementById("replay");
+const options = document.querySelectorAll("#game ul li");
+const nextBtn = document.getElementById("next_ques");
+const resultInfo = document.querySelector("#result h1");
+const gameBox = document.getElementById("game");
+const opt1 = document.getElementById("opt1");
+const opt2 = document.getElementById("opt2");
+const opt3 = document.getElementById("opt3");
+const opt4 = document.getElementById("opt4");
+const intro = document.getElementById('intro');
+const showHint = document.getElementById("hint_btn");
+const ansBody = document.getElementById("result");
+const maskImg = document.getElementById("mask");
+let question = [], i = 0, score = 0, wrongCount = 0, clickCount = 0;
+
+// Function to start the game by clicking the start button
+
+startBtn.addEventListener('click', () => {
+    intro.classList.add('fadeOut');
+    initQuestions();
+    gameBox.classList.remove("showResult");
+});
+
+// Array Of Objects For Questions And Answers
+
+const initQuestions = () => {
+    question = [];
+    i = 0; score = 0; clickCount = 0;wrongCount = 0;
+    while (question.length < 5) {
+        const randomInd = Math.floor(Math.random() * info.length);
+        if (!question.includes(randomInd)) {
+            question.push(randomInd);
+        }
+    }
+    changeQuestion(i);
+}
+
+// Function For Changing The Active Class
+
+options.forEach((option) => {
+    option.addEventListener("click", () => {
+        options.forEach((opt) => {
+            opt.classList.remove("active");
+        })
+        option.classList.add("active");
+    })
+});
+
+// Function For Changing The Question
+
+const changeQuestion = (i) => {
+    image.src = info[question[i]].img_src;
+    opt1.textContent = info[question[i]].option1;
+    opt2.textContent = info[question[i]].option2;
+    opt3.textContent = info[question[i]].option3;
+    opt4.textContent = info[question[i]].option4;
+}
+
+// Function For Checking The Answer And Deside the correct Answer and Wrong Answer and give score to the user
+
+nextBtn.addEventListener("click", () => {
+    let selected = document.querySelector(".active");
+    if (!selected) {
+        alert("Please select an option");
+        return;
+    }
+    if (selected.textContent === info[question[i]].answer) {
+        i++;
+        score += (3 - wrongCount);
+        if (i === 5) {
+            resultInfo.textContent = `Your Score is ${score}`;
+            gameBox.classList.add("showResult");
+            ansBody.classList.remove("showReplay");
+            options.forEach((opt) => {
+                opt.classList.remove("active");
+            })
+            initQuestions();
+            return;
+        }
+        clickCount = 0;
+        maskImg.style.height = "60%";
+        maskImg.style.width = "80%";
+        changeQuestion(i);
+        options.forEach((opt) => {
+            opt.classList.remove("active");
+        })
+    }
+    else {
+        alert("Wrong Answer");
+        wrongCount++;
+        if (wrongCount === 3) {
+            i++;
+            if (i == 5) {
+                resultInfo.textContent = `Your Score is ${score}`;
+                gameBox.classList.add("showResult");
+                ansBody.classList.remove("showReplay");
+                options.forEach((opt) => {
+                    opt.classList.remove("active");
+                })
+                initQuestions();
+                return;
+            }
+            clickCount = 0;
+            wrongCount = 0;
+            maskImg.style.height = "60%";
+            maskImg.style.width = "80%";
+            changeQuestion(i);
+            options.forEach((opt) => {
+                opt.classList.remove("active");
+            })
+        }
+    }
+})
+
+// Function For Giving Hint To The User
+
+showHint.addEventListener("click", () => {
+    if (clickCount === 0) {
+        maskImg.style.height = info[question[i]].maskh;
+        maskImg.style.width = info[question[i]].maskw;
+        clickCount++;
+        score--;
+    } else {
+        maskImg.style.height = "0%";
+        maskImg.style.width = "0%";
+        score--;
+    }
+})
+
+// Function For Restart The Game By Showing The Main Screen
+
+replayBtn.addEventListener("click", () => {
+    initQuestions();
+    ansBody.classList.add("showReplay");
+    intro.classList.remove('fadeOut');
+})