Merge pull request #2157 from ayush-848/master

Added Fruit Matcher
Sulagna-Dutta-Roy · Jul 6, 2024 · dbcffcd · dbcffcd
2 parents e426f34 + c3deff3
commit dbcffcd
Show file tree

Hide file tree

Showing 4 changed files with 258 additions and 0 deletions.
diff --git a/Fruit Matcher/index.html b/Fruit Matcher/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Slot Machine Game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div class="container">
+    <div class="slot-machine">
+      <div class="slot">
+        <div class="reel" id="reel1"></div>
+        <div class="reel" id="reel2"></div>
+        <div class="reel" id="reel3"></div>
+      </div>
+      <div class="slot">
+        <div class="reel" id="reel4"></div>
+        <div class="reel" id="reel5"></div>
+        <div class="reel" id="reel6"></div>
+      </div>
+      <div class="slot">
+        <div class="reel" id="reel7"></div>
+        <div class="reel" id="reel8"></div>
+        <div class="reel" id="reel9"></div>
+      </div>
+    </div>
+    <div class="button-container">
+      <button id="spin-button">Spin</button>
+      <button id="reset-button">Reset</button>
+      <button id="rules-button">Rules</button>
+    </div>
+    <div class="info">
+      <div id="result"></div>
+      <div id="balance">Balance: $100</div>
+    </div>
+    <div id="rules-card" class="hidden">
+      <h2>Slot Machine Rules</h2>
+      <p>1. Each spin costs $10.</p>
+      <p>2. Match 3 symbols in any row to win $50.</p>
+      <p>3. If you win, $50 is added to your balance.</p>
+      <p>4. If you lose, $10 is deducted from your balance.</p>
+      <p>5. Click the reset button to restart the game with a $100 balance.</p>
+    </div>
+  </div>
+
+  <audio id="spin-sound" src="spin.mp3"></audio>
+  <audio id="win-sound" src="win.mp3"></audio>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Fruit Matcher/manifest.json b/Fruit Matcher/manifest.json
@@ -0,0 +1,10 @@
+{
+    "manifest_version": 3,
+    "name": "Fruit Matcher",
+    "version": "1.0",
+    "description": "A fun fruit slot machine game extension",
+    "browser_action": {
+      "default_popup": "index.html"
+    },
+    "permissions": []
+  }
diff --git a/Fruit Matcher/script.js b/Fruit Matcher/script.js
@@ -0,0 +1,78 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const reels = document.querySelectorAll(".reel");
+    reels.forEach((reel) => {
+      reel.textContent = getRandomFruit();
+    });
+  });
+
+  document.getElementById("spin-button").addEventListener("click", spin);
+  document.getElementById("reset-button").addEventListener("click", reset);
+  document.getElementById("rules-button").addEventListener("click", toggleRules);
+
+  const fruits = ["🍒", "🍋", "🍊", "🍇", "🍉", "🍍", "🍓", "🍌", "🍏"];
+  let balance = 100;
+
+  const spinSound = new Audio("spin.mp3");
+  const winSound = new Audio("win.mp3");
+
+  function getRandomFruit() {
+    return fruits[Math.floor(Math.random() * fruits.length)];
+  }
+
+  function spin() {
+    spinSound.play();
+
+    const reels = document.querySelectorAll(".reel");
+
+    reels.forEach((reel) => {
+      reel.style.transform = "rotateX(360deg)";
+    });
+
+    setTimeout(() => {
+      reels.forEach((reel) => {
+        reel.textContent = getRandomFruit();
+      });
+
+      const symbols = Array.from(reels).map((reel) => reel.textContent);
+      checkResult(symbols);
+    }, 500);
+  }
+
+  function checkResult(symbols) {
+    const result = document.getElementById("result");
+
+    const isWin = symbols[0] === symbols[1] && symbols[1] === symbols[2];
+
+    if (isWin) {
+      winSound.play();
+      balance += 50;
+      result.textContent = "🎉 You win $50! 🎉";
+      animateWinningSymbols();
+    } else {
+      balance -= 10;
+      result.textContent = "Try again!";
+    }
+    document.getElementById("balance").textContent = `Balance: $${balance}`;
+  }
+
+  function animateWinningSymbols() {
+    const reels = document.querySelectorAll(".reel");
+
+    reels.forEach((reel) => {
+      reel.classList.add("win-animation");
+      setTimeout(() => {
+        reel.classList.remove("win-animation");
+      }, 1000);
+    });
+  }
+
+  function toggleRules() {
+    const rulesCard = document.getElementById("rules-card");
+    rulesCard.classList.toggle("hidden");
+  }
+
+  function reset() {
+    balance = 100;
+    document.getElementById("balance").textContent = `Balance: $${balance}`;
+  }
+
diff --git a/Fruit Matcher/style.css b/Fruit Matcher/style.css
@@ -0,0 +1,116 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    min-height: 100vh;
+    color: #ecf0f1;
+    background: linear-gradient(
+      45deg,
+      #f1c40f,
+      #e67e22,
+      #d35400,
+      #c0392b,
+      #9b59b6,
+      #8e44ad,
+      #3498db,
+      #2ecc71
+    );
+    background-size: 400% 400%;
+    animation: rainbow-background 10s ease infinite;
+  }
+
+  @keyframes rainbow-background {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .slot-machine {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 100px; /* Adjust the margin-bottom value as needed */
+    margin-top: 50px; /* Add margin-top to center it vertically */
+  }
+
+  .slot {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 10px;
+  }
+
+  .reel {
+    width: 100px;
+    height: 100px;
+    border: 2px solid #ecf0f1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2em;
+    margin: 5px 0;
+    background-color: #34495e;
+    transition: transform 0.5s;
+    border-radius: 10px;
+  }
+
+  .button-container {
+    margin-bottom: 20px;
+  }
+
+  button {
+    padding: 10px 20px;
+    font-size: 1.2em;
+    background-color: #3498db;
+    color: #ecf0f1;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    margin: 0 10px;
+  }
+
+  button:hover {
+    background-color: #2980b9;
+    transform: scale(1.1);
+  }
+
+  .info {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  #result {
+    font-size: 1.5em;
+  }
+
+  #balance {
+    font-size: 1.2em;
+  }
+
+  #rules-card {
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 20px;
+    border-radius: 10px;
+    max-width: 300px;
+    transition: opacity 0.5s;
+    color: #ecf0f1;
+  }
+
+  .hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+