Changed around line 1
+
+
+
+
+ .container {
+ max-width: 600px;
+ margin: 20px auto;
+ text-align: center;
+ font-family: Arial, sans-serif;
+ }
+
+ .slot-machine {
+ background: #2c3e50;
+ padding: 20px;
+ border-radius: 10px;
+ margin: 20px auto;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+ }
+
+ .reels {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ margin: 20px 0;
+ }
+
+ .reel {
+ width: 100px;
+ height: 100px;
+ background: white;
+ border-radius: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 40px;
+ border: 3px solid #gold;
+ }
+
+ #spinButton {
+ background: #e74c3c;
+ color: white;
+ border: none;
+ padding: 15px 30px;
+ font-size: 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background 0.3s;
+ }
+
+ #spinButton:hover {
+ background: #c0392b;
+ }
+
+ #spinButton:disabled {
+ background: #95a5a6;
+ cursor: not-allowed;
+ }
+
+ .credits {
+ font-size: 24px;
+ color: white;
+ margin: 10px 0;
+ }
+
+ .message {
+ font-size: 20px;
+ color: #2ecc71;
+ min-height: 30px;
+ margin: 10px 0;
+ }
+
+
+
+
+
+ const symbols = ["🍒", "🍋", "🍇", "🍎", "7️⃣", "💎"];
+ const reels = [
+ document.getElementById("reel1"),
+ document.getElementById("reel2"),
+ document.getElementById("reel3"),
+ ];
+ const spinButton = document.getElementById("spinButton");
+ const creditsDisplay = document.getElementById("credits");
+ const messageDisplay = document.getElementById("message");
+ let credits = 100;
+ let isSpinning = false;
+
+ function updateCredits(amount) {
+ credits += amount;
+ creditsDisplay.textContent = credits;
+ }
+
+ function getRandomSymbol() {
+ return symbols[Math.floor(Math.random() * symbols.length)];
+ }
+
+ function checkWin(results) {
+ if (results[0] === results[1] && results[1] === results[2]) {
+ const multiplier = symbols.indexOf(results[0]) + 2;
+ return 20 * multiplier;
+ }
+ return 0;
+ }
+
+ async function spinReel(reel, delay) {
+ return new Promise((resolve) => {
+ let spins = 0;
+ const maxSpins = 20 + Math.floor(Math.random() * 10);
+ const interval = setInterval(() => {
+ reel.textContent = getRandomSymbol();
+ spins++;
+ if (spins >= maxSpins) {
+ clearInterval(interval);
+ resolve(reel.textContent);
+ }
+ }, 100);
+ });
+ }
+
+ async function spin() {
+ if (isSpinning || credits < 10) return;
+
+ isSpinning = true;
+ spinButton.disabled = true;
+ messageDisplay.textContent = "";
+ updateCredits(-10);
+
+ const results = await Promise.all([
+ spinReel(reels[0], 1000),
+ spinReel(reels[1], 2000),
+ spinReel(reels[2], 3000),
+ ]);
+
+ const winAmount = checkWin(results);
+ if (winAmount > 0) {
+ messageDisplay.textContent = `Winner! +${winAmount} credits!`;
+ updateCredits(winAmount);
+ } else {
+ messageDisplay.textContent = "Try again!";
+ }
+
+ isSpinning = false;
+ spinButton.disabled = false;
+ }
+
+ spinButton.addEventListener("click", spin);
+
+
+