Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Fruit Matcher #2157

Merged
merged 4 commits into from
Jul 6, 2024
Merged

Added Fruit Matcher #2157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
16e5bb7
Added Fruit Matcher
ayush-848 Jul 5, 2024
71d7052
updated
ayush-848 Jul 5, 2024
295e66f
updated
ayush-848 Jul 5, 2024
c3deff3
updated
ayush-848 Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions Fruit Matcher/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 10 additions & 0 deletions Fruit Matcher/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": []
}
78 changes: 78 additions & 0 deletions Fruit Matcher/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}`;
}

116 changes: 116 additions & 0 deletions Fruit Matcher/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

Loading