| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Colorful Lucky Roulette</title> |
| <style> |
| body { |
| background: #1c1c1c; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| margin: 0; |
| font-family: 'Arial', sans-serif; |
| } |
| |
| #roulette-container { |
| position: relative; |
| width: 500px; |
| height: 500px; |
| perspective: 1000px; |
| } |
| |
| .roulette { |
| width: 100%; |
| height: 100%; |
| border-radius: 50%; |
| position: relative; |
| border: 15px solid #ffd700; |
| box-shadow: |
| 0 0 30px rgba(255, 215, 0, 0.3), |
| inset 0 0 50px rgba(0,0,0,0.5); |
| transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99); |
| background: conic-gradient( |
| #ff6b6b, #4ecdc4, #45b7d1, #96c93d, |
| #e056fd, #f7d794, #ff7675, #74b9ff, |
| #a8e6cf, #fdcb6e, #4834d4, #6c5ce7 |
| ); |
| } |
| |
| .segment { |
| position: absolute; |
| width: 50%; |
| height: 2px; |
| top: 50%; |
| left: 50%; |
| transform-origin: left; |
| background: rgba(255,255,255,0.8); |
| box-shadow: 0 0 5px rgba(255,255,255,0.5); |
| } |
| |
| .number { |
| position: absolute; |
| width: 45px; |
| height: 45px; |
| background: rgba(255,255,255,0.95); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| font-size: 18px; |
| transform-origin: center; |
| border: 2px solid #ffd700; |
| box-shadow: 0 0 10px rgba(0,0,0,0.3); |
| color: #222; |
| } |
| |
| .prize { |
| position: absolute; |
| color: #fff; |
| transform-origin: center; |
| font-size: 14px; |
| font-weight: bold; |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.5); |
| white-space: nowrap; |
| background: rgba(0,0,0,0.4); |
| padding: 3px 8px; |
| border-radius: 15px; |
| } |
| |
| .arrow { |
| position: absolute; |
| top: -40px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 0; |
| height: 0; |
| border-left: 25px solid transparent; |
| border-right: 25px solid transparent; |
| border-top: 40px solid #ffd700; |
| filter: drop-shadow(0 0 10px rgba(255,215,0,0.5)); |
| } |
| |
| #shoot-btn { |
| position: absolute; |
| bottom: -80px; |
| left: 50%; |
| transform: translateX(-50%); |
| padding: 15px 40px; |
| font-size: 22px; |
| background: linear-gradient(45deg, #ffd700, #ffeb3b); |
| color: #222; |
| border: none; |
| border-radius: 25px; |
| cursor: pointer; |
| transition: all 0.3s; |
| font-weight: bold; |
| box-shadow: 0 5px 15px rgba(255,215,0,0.3); |
| } |
| |
| #shoot-btn:hover { |
| transform: translateX(-50%) scale(1.05); |
| box-shadow: 0 7px 20px rgba(255,215,0,0.4); |
| } |
| |
| #result { |
| position: absolute; |
| top: -80px; |
| left: 0; |
| width: 100%; |
| text-align: center; |
| color: #ffd700; |
| font-size: 28px; |
| font-weight: bold; |
| opacity: 0; |
| transition: opacity 0.3s; |
| text-shadow: 0 0 10px rgba(255,215,0,0.5); |
| } |
| |
| #result.show { |
| opacity: 1; |
| } |
| |
| .center-dot { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 30px; |
| height: 30px; |
| background: #ffd700; |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| box-shadow: 0 0 20px rgba(255,215,0,0.5); |
| } |
| |
| .glow { |
| position: absolute; |
| top: -10px; |
| left: -10px; |
| right: -10px; |
| bottom: -10px; |
| border-radius: 50%; |
| background: transparent; |
| border: 2px solid rgba(255,215,0,0.3); |
| animation: glowPulse 2s infinite; |
| } |
| |
| @keyframes glowPulse { |
| 0% { transform: scale(1); opacity: 0.5; } |
| 50% { transform: scale(1.05); opacity: 0.8; } |
| 100% { transform: scale(1); opacity: 0.5; } |
| } |
| </style> |
| </head> |
| <body> |
| <div id="roulette-container"> |
| <div id="result"></div> |
| <div class="arrow"></div> |
| <div class="roulette"> |
| <div class="glow"></div> |
| <div class="center-dot"></div> |
| </div> |
| <button id="shoot-btn">SHOOT! π―</button> |
| </div> |
|
|
| <script> |
| const roulette = document.querySelector('.roulette'); |
| const shootBtn = document.getElementById('shoot-btn'); |
| const result = document.getElementById('result'); |
| |
| const numSegments = 12; |
| const prizes = [ |
| 'κ½ π', '1λ§μ π«', '3λ§μ β¨', '5λ§μ π', |
| '10λ§μ π', '20λ§μ π―', '30λ§μ π¨', |
| '40λ§μ π', '50λ§μ β', '70λ§μ π', |
| '90λ§μ π', '100λ§μ π' |
| ]; |
| let shuffledPrizes = [...prizes]; |
| |
| function shufflePrizes() { |
| shuffledPrizes = [...prizes]; |
| for (let i = shuffledPrizes.length - 1; i > 0; i--) { |
| const j = Math.floor(Math.random() * (i + 1)); |
| [shuffledPrizes[i], shuffledPrizes[j]] = [shuffledPrizes[j], shuffledPrizes[i]]; |
| } |
| } |
| |
| function createRouletteSegments() { |
| const radius = 220; |
| const angleIncrement = (2 * Math.PI) / numSegments; |
| |
| for (let i = 0; i < numSegments; i++) { |
| const segment = document.createElement('div'); |
| segment.className = 'segment'; |
| segment.style.transform = `rotate(${i * (360 / numSegments)}deg)`; |
| roulette.appendChild(segment); |
| |
| const number = document.createElement('div'); |
| number.className = 'number'; |
| number.textContent = i + 1; |
| const angle = i * angleIncrement; |
| const x = Math.cos(angle) * radius + 230; |
| const y = Math.sin(angle) * radius + 230; |
| number.style.left = `${x}px`; |
| number.style.top = `${y}px`; |
| roulette.appendChild(number); |
| |
| const prize = document.createElement('div'); |
| prize.className = 'prize'; |
| prize.textContent = shuffledPrizes[i]; |
| const prizeRadius = radius - 60; |
| const prizeX = Math.cos(angle) * prizeRadius + 230; |
| const prizeY = Math.sin(angle) * prizeRadius + 230; |
| prize.style.left = `${prizeX}px`; |
| prize.style.top = `${prizeY}px`; |
| prize.style.transform = `translate(-50%, -50%) rotate(${i * (360 / numSegments)}deg)`; |
| roulette.appendChild(prize); |
| } |
| } |
| |
| let isSpinning = false; |
| let currentRotation = 0; |
| |
| shufflePrizes(); |
| createRouletteSegments(); |
| |
| shootBtn.addEventListener('click', () => { |
| if (isSpinning) return; |
| |
| isSpinning = true; |
| result.classList.remove('show'); |
| shootBtn.style.opacity = '0.5'; |
| shootBtn.style.cursor = 'not-allowed'; |
| |
| const randomSegment = Math.floor(Math.random() * numSegments); |
| const segmentAngle = (360 / numSegments) * randomSegment; |
| const extraSpins = 720 + Math.random() * 720; |
| const totalRotation = extraSpins + segmentAngle; |
| |
| currentRotation += totalRotation; |
| roulette.style.transform = `rotate(${currentRotation}deg)`; |
| |
| setTimeout(() => { |
| isSpinning = false; |
| result.textContent = `π ${randomSegment + 1}λ²: ${shuffledPrizes[randomSegment]} π`; |
| result.classList.add('show'); |
| shootBtn.style.opacity = '1'; |
| shootBtn.style.cursor = 'pointer'; |
| }, 4000); |
| }); |
| |
| let baseRotation = 0; |
| function animate() { |
| if (!isSpinning) { |
| baseRotation += 0.2; |
| roulette.style.transform = `rotate(${baseRotation}deg)`; |
| } |
| requestAnimationFrame(animate); |
| } |
| animate(); |
| </script> |
| </body> |
| </html> |
