Spaces:

awacke1
/

Slot-Machine-HTML5

Running

App Files Files Community

awacke1 commited on Apr 18, 2023

Commit

22654b1

1 Parent(s): 18a5d47

Update index.html

Browse files

Files changed (1) hide show

index.html +85 -35

index.html CHANGED Viewed

@@ -11,17 +11,22 @@
         }
         #slot-machine {
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
             border: 3px solid #ccc;
             padding: 20px;
             border-radius: 10px;
-            font-size: 2rem;
         }
         .slot {
             padding: 0 10px;
         }
         button {
@@ -44,42 +49,87 @@
 <body>
     <h1>Emoji Slot Machine</h1>
     <div id="slot-machine">
-        <div class="slot" id="slot1">🍌</div>
-        <div class="slot" id="slot2">🍌</div>
-        <div class="slot" id="slot3">🍌</div>
     </div>
-    <button id="spin-btn">Spin</button>
-    <div id="balance">Balance: $<span id="balance-amount">10.00</span></div>
-    <div id="history"></div>
-    <script>
-        document.getElementById('spin-btn').addEventListener('click', function () {
-            var emojis = ['🍎', '🍌', '🍒', '🍇', '🍉'];
-            var slot1 = document.getElementById('slot1');
-            var slot2 = document.getElementById('slot2');
-            var slot3 = document.getElementById('slot3');
-            var balanceAmount = document.getElementById('balance-amount');
-            var history = document.getElementById('history');
-            // Deduct 25 cents
-            var newBalance = parseFloat(balanceAmount.textContent) - 0.25;
-            if (newBalance < 0) {
-                alert("Insufficient balance.");
-                return;
-            }
-            balanceAmount.textContent = newBalance.toFixed(2);
-            slot1.textContent = emojis[Math.floor(Math.random() * emojis.length)];
-            slot2.textContent = emojis[Math.floor(Math.random() * emojis.length)];
-            slot3.textContent = emojis[Math.floor(Math.random() * emojis.length)];
-            if (slot1.textContent === slot2.textContent && slot2.textContent === slot3.textContent) {
-                var winAmount = Math.floor(Math.random() * 100) + 1;
-                newBalance = parseFloat(balanceAmount.textContent) + winAmount;
-                balanceAmount.textContent = newBalance.toFixed(2);
-                history.innerHTML += '<p>You won $' + winAmount + '! 🎉</p>';
             }
-        });
-    </script>
 </body>
 </html>

         }
         #slot-machine {
+            display: inline-block;
             border: 3px solid #ccc;
             padding: 20px;
             border-radius: 10px;
+        }
+        .line {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 10px;
         }
         .slot {
             padding: 0 10px;
+            font-size: 2rem;
         }
         button {
 <body>
     <h1>Emoji Slot Machine</h1>
     <div id="slot-machine">
+        <div class="line">
+            <div class="slot" id="slot1-1">🍌</div>
+            <div class="slot" id="slot1-2">🍌</div>
+            <div class="slot" id="slot1-3">🍌</div>
+            <div class="slot" id="slot1-4">🍌</div>
+            <div class="slot" id="slot1-5">🍌</div>
+        </div>
+        <div class="line">
+            <div class="slot" id="slot2-1">🍌</div>
+            <div class="slot" id="slot2-2">🍌</div>
+            <div class="slot" id="slot2-3">🍌</div>
+            <div class="slot" id="slot2-4">🍌</div>
+            <div class="slot" id="slot2-5">🍌</div>
+        </div>
+        <div class="line">
+            <div class="slot" id="slot3-1">🍌</div>
+            <div class="slot" id="slot3-2">🍌</div>
+            <div class="slot" id="slot3-3">🍌</div>
+            <div class="slot" id="slot3-4">🍌</div>
+            <div class="slot" id="slot3-5">🍌</div>
+        </div>
+        <div class="line">
+            <div class="slot" id="slot4-1">🍌</div>
+            <div class="slot" id="slot4-2">🍌</div>
+            <div class="slot" id="slot4-3">🍌</div>
+            <div class="slot" id="slot4-4">🍌</div>
+            <div class="slot" id="slot4-5">🍌</div>
+        </div>
     </div>
+<button id="spin-btn">Spin</button>
+<div id="balance">Balance: $<span id="balance-amount">10.00</span></div>
+<div id="history"></div>
+<script>
+    function countMatches(line) {
+        const counts = {};
+        for (const emoji of line) {
+            counts[emoji] = (counts[emoji] || 0) + 1;
+        }
+        return Math.max(...Object.values(counts));
+    }
+    document.getElementById('spin-btn').addEventListener('click', function () {
+        var emojis = ['🍎', '🍌', '🍒', '🍇', '🍉'];
+        var balanceAmount = document.getElementById('balance-amount');
+        var history = document.getElementById('history');
+        var winAmount = 0;
+        // Deduct 25 cents
+        var newBalance = parseFloat(balanceAmount.textContent) - 0.25;
+        if (newBalance < 0) {
+            alert("Insufficient balance.");
+            return;
+        }
+        balanceAmount.textContent = newBalance.toFixed(2);
+        for (let row = 1; row <= 4; row++) {
+            const line = [];
+            for (let col = 1; col <= 5; col++) {
+                const emoji = emojis[Math.floor(Math.random() * emojis.length)];
+                line.push(emoji);
+                document.getElementById(`slot${row}-${col}`).textContent = emoji;
             }
+            const matches = countMatches(line);
+            if (matches === 3) {
+                winAmount += 1;
+            } else if (matches === 4) {
+                winAmount += 5;
+            } else if (matches === 5) {
+                winAmount += 100;
+            }
+        }
+        if (winAmount > 0) {
+            newBalance = parseFloat(balanceAmount.textContent) + winAmount;
+            balanceAmount.textContent = newBalance.toFixed(2);
+            history.innerHTML += '<p>You won $' + winAmount + '! 🎉</p>';
+        }
+    });
+</script>
 </body>
 </html>