| | <!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> |
