File size: 2,617 Bytes
6344c71 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
document.addEventListener('DOMContentLoaded', () => {
feather.replace();
const spinBtn = document.querySelector('.spin-btn');
const reels = document.querySelectorAll('.reel');
const symbols = ['🍒', '🍋', '🍊', '🍇', '🍉', '7️⃣', '🔔', '💎'];
spinBtn.addEventListener('click', () => {
spinBtn.disabled = true;
spinBtn.textContent = 'SPINNING...';
// Spin each reel with different timing
reels.forEach((reel, index) => {
const duration = 1000 + (index * 500);
spinReel(reel, duration);
});
// Enable button after all reels stop
setTimeout(() => {
spinBtn.disabled = false;
spinBtn.textContent = 'SPIN';
checkWin();
}, 2500);
});
function spinReel(reel, duration) {
const startTime = Date.now();
const spinInterval = setInterval(() => {
const randomSymbol = symbols[Math.floor(Math.random() * symbols.length)];
reel.textContent = randomSymbol;
if (Date.now() - startTime >= duration) {
clearInterval(spinInterval);
const finalSymbol = symbols[Math.floor(Math.random() * symbols.length)];
reel.textContent = finalSymbol;
}
}, 100);
}
function checkWin() {
const reelValues = Array.from(reels).map(reel => reel.textContent);
// Check if all symbols are the same
if (new Set(reelValues).size === 1) {
showWinEffect('JACKPOT!');
}
// Check if at least two symbols match
else if (reelValues[0] === reelValues[1] ||
reelValues[1] === reelValues[2] ||
reelValues[0] === reelValues[2]) {
showWinEffect('WINNER!');
}
}
function showWinEffect(message) {
const effect = document.createElement('div');
effect.className = 'win-effect';
effect.textContent = message;
effect.style.position = 'fixed';
effect.style.top = '50%';
effect.style.left = '50%';
effect.style.transform = 'translate(-50%, -50%)';
effect.style.fontSize = '5rem';
effect.style.color = '#ff7a00';
effect.style.textShadow = '0 0 20px rgba(255,122,0,0.8)';
effect.style.zIndex = '1000';
effect.style.animation = 'fadeOut 2s forwards';
document.body.appendChild(effect);
setTimeout(() => {
effect.remove();
}, 2000);
}
});
|