fork download
copy 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.         .slot-machine {
  6.             background: #2c3e50;
  7.             padding: 20px;
  8.             border-radius: 10px;
  9.             text-align: center;
  10.         }
  11.  
  12.         .reels {
  13.             display: flex;
  14.             justify-content: center;
  15.             gap: 10px;
  16.             margin: 20px;
  17.         }
  18.  
  19.         .reel {
  20.             width: 100px;
  21.             height: 100px;
  22.             background: #ecf0f1;
  23.             border: 3px solid #bdc3c7;
  24.             border-radius: 5px;
  25.             font-size: 50px;
  26.             line-height: 100px;
  27.             transition: transform 0.1s;
  28.         }
  29.  
  30.         #spin-btn {
  31.             padding: 10px 30px;
  32.             font-size: 18px;
  33.             background: #27ae60;
  34.             color: white;
  35.             border: none;
  36.             border-radius: 5px;
  37.             cursor: pointer;
  38.         }
  39.  
  40.         #result {
  41.             margin-top: 20px;
  42.             font-size: 24px;
  43.             color: white;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="slot-machine">
  49.         <div class="reels">
  50.             <div class="reel" id="reel1">🍒</div>
  51.             <div class="reel" id="reel2">🍒</div>
  52.             <div class="reel" id="reel3">🍒</div>
  53.         </div>
  54.         <button id="spin-btn">Spin!</button>
  55.         <div id="result"></div>
  56.     </div>
  57.  
  58.     <script>
  59.         const symbols = ['🍒', '🍊', '🍋', '🍇', '🔔', '💎'];
  60.         const reels = document.querySelectorAll('.reel');
  61.         const spinBtn = document.getElementById('spin-btn');
  62.         const result = document.getElementById('result');
  63.  
  64.         let isSpinning = false;
  65.  
  66.         function getRandomSymbol() {
  67.             return symbols[Math.floor(Math.random() * symbols.length)];
  68.         }
  69.  
  70.         function spin() {
  71.             if (isSpinning) return;
  72.  
  73.             isSpinning = true;
  74.             result.textContent = '';
  75.             let spins = 0;
  76.  
  77.             const spinInterval = setInterval(() => {
  78.                 reels.forEach(reel => {
  79.                     reel.textContent = getRandomSymbol();
  80.                     reel.style.transform = `rotate(${Math.random() * 10 - 5}deg)`;
  81.                 });
  82.             }, 50);
  83.  
  84.             setTimeout(() => {
  85.                 clearInterval(spinInterval);
  86.                 const finalSymbols = [];
  87.                 reels.forEach(reel => {
  88.                     const symbol = getRandomSymbol();
  89.                     reel.textContent = symbol;
  90.                     finalSymbols.push(symbol);
  91.                     reel.style.transform = 'rotate(0deg)';
  92.                 });
  93.  
  94.                 isSpinning = false;
  95.                 checkWin(finalSymbols);
  96.             }, 2000);
  97.         }
  98.  
  99.         function checkWin(symbols) {
  100.             if (symbols[0] === symbols[1] && symbols[1] === symbols[2]) {
  101.                 result.textContent = '🎉 Jackpot! You win! 🎉';
  102.             } else if (symbols[0] === symbols[1] || symbols[1] === symbols[2] || symbols[0] === symbols[2]) {
  103.                 result.textContent = '😊 Small win! Try again!';
  104.             } else {
  105.                 result.textContent = '😢 Try again!';
  106.             }
  107.         }
  108.  
  109.         spinBtn.addEventListener('click', spin);
  110.     </script>
  111. </body>
  112. </html>
Success #stdin #stdout 0.03s 25600KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html>
<head>
    <style>
        .slot-machine {
            background: #2c3e50;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }

        .reels {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 20px;
        }

        .reel {
            width: 100px;
            height: 100px;
            background: #ecf0f1;
            border: 3px solid #bdc3c7;
            border-radius: 5px;
            font-size: 50px;
            line-height: 100px;
            transition: transform 0.1s;
        }

        #spin-btn {
            padding: 10px 30px;
            font-size: 18px;
            background: #27ae60;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #result {
            margin-top: 20px;
            font-size: 24px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="slot-machine">
        <div class="reels">
            <div class="reel" id="reel1">🍒</div>
            <div class="reel" id="reel2">🍒</div>
            <div class="reel" id="reel3">🍒</div>
        </div>
        <button id="spin-btn">Spin!</button>
        <div id="result"></div>
    </div>

    <script>
        const symbols = ['🍒', '🍊', '🍋', '🍇', '🔔', '💎'];
        const reels = document.querySelectorAll('.reel');
        const spinBtn = document.getElementById('spin-btn');
        const result = document.getElementById('result');
        
        let isSpinning = false;

        function getRandomSymbol() {
            return symbols[Math.floor(Math.random() * symbols.length)];
        }

        function spin() {
            if (isSpinning) return;
            
            isSpinning = true;
            result.textContent = '';
            let spins = 0;
            
            const spinInterval = setInterval(() => {
                reels.forEach(reel => {
                    reel.textContent = getRandomSymbol();
                    reel.style.transform = `rotate(${Math.random() * 10 - 5}deg)`;
                });
            }, 50);

            setTimeout(() => {
                clearInterval(spinInterval);
                const finalSymbols = [];
                reels.forEach(reel => {
                    const symbol = getRandomSymbol();
                    reel.textContent = symbol;
                    finalSymbols.push(symbol);
                    reel.style.transform = 'rotate(0deg)';
                });
                
                isSpinning = false;
                checkWin(finalSymbols);
            }, 2000);
        }

        function checkWin(symbols) {
            if (symbols[0] === symbols[1] && symbols[1] === symbols[2]) {
                result.textContent = '🎉 Jackpot! You win! 🎉';
            } else if (symbols[0] === symbols[1] || symbols[1] === symbols[2] || symbols[0] === symbols[2]) {
                result.textContent = '😊 Small win! Try again!';
            } else {
                result.textContent = '😢 Try again!';
            }
        }

        spinBtn.addEventListener('click', spin);
    </script>
</body>
</html>
https://ideone.com/cvwAF3
language:
PHP (php 7.3.5)
created:
8 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!