Scribd
Upload
7 views5 pages

Spinner ?

Html code

Uploaded by

demon.eyes.jm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views5 pages

Spinner ?

Html code

Uploaded by

demon.eyes.jm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Spinner Wheel with Fireworks</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
transition: background-color 0.5s ease;
position: relative;
overflow: hidden;
}

#wheel {
width: 300px;
height: 300px;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 16px solid #f3f3f3; /* Light grey */
transition: transform 4s ease-out;
}

.segment {
position: absolute;
width: 50%;
height: 50%;
background-color: #3498db; /* Default color */
transform-origin: 100% 100%;
clip-path: polygon(0 0, 100% 0, 100% 100%);
display: flex;
align-items: center;
justify-content: flex-end;
color: white;
font-weight: bold;
padding-right: 10px; /* Add some padding */
transition: transform 0.5s ease; /* Animation for segments */
}

#spinButton, #resetButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}

#spinButton:hover, #resetButton:hover {
background-color: #2980b9;
}

#result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}

#segmentForm {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

#segmentForm input {
margin: 5px;
padding: 5px;
width: 200px;
}

.glow {
box-shadow: 0 0 20px gold;
}

canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Allow clicks to pass through */
display: none; /* Hide canvas initially */
}
</style>
</head>
<body>

<h1>Enhanced Spinner Wheel</h1>


<div id="wheel"></div>
<button id="spinButton" onclick="spin()">Spin the Wheel!</button>
<button id="resetButton" onclick="resetWheel()">Reset Wheel</button>
<div id="result"></div>

<div id="segmentForm">
<input type="text" id="segmentLabel" placeholder="Segment Label" />
<input type="color" id="segmentColor" value="#3498db" />
<button onclick="addSegment()">Add Segment</button>
</div>

<audio id="spinSound" src="spin-sound.mp3" preload="auto"></audio>


<audio id="winSound" src="win-sound.mp3" preload="auto"></audio>

<canvas id="fireworksCanvas"></canvas>

<script>
const segments = [];
const wheel = document.getElementById('wheel');
const resultDisplay = document.getElementById('result');
const spinSound = document.getElementById('spinSound');
const winSound = document.getElementById('winSound');
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');

// Set canvas size


canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function addSegment() {
const label = document.getElementById('segmentLabel').value;
const color = document.getElementById('segmentColor').value;

if (label && color) {


segments.push({ label, color });
drawSegments();
document.getElementById('segmentLabel').value = ''; // Clear input
} else {
alert('Please enter both label and color.');
}
}

function drawSegments() {
wheel.innerHTML = ''; // Clear existing segments
segments.forEach((segment, index) => {
const segmentDiv = document.createElement('div');
segmentDiv.className = 'segment';
segmentDiv.style.backgroundColor = segment.color;
segmentDiv.style.transform = `rotate(${index * (360 /
segments.length)}deg)`;
segmentDiv.innerText = segment.label;
segmentDiv.classList.add('animate'); // Add animation class
wheel.appendChild(segmentDiv);
});
}

let isSpinning = false;

function spin() {
if (isSpinning) return; // Prevent multiple spins
isSpinning = true;

document.body.style.backgroundColor = getRandomColor(); // Change


background color
spinSound.play(); // Play spin sound
const randomDegree = Math.floor(Math.random() * 360) + 3600; // Ensures
multiple spins
wheel.style.transform = `rotate(${randomDegree}deg)`;

setTimeout(() => {
isSpinning = false; // Re-enable the button after spinning
const actualDegree = randomDegree % 360; // Get the final degree
const winningSegmentIndex = Math.floor((actualDegree / 360) *
segments.length);
const winningSegment = segments[winningSegmentIndex];
resultDisplay.innerText = `You won: ${winningSegment.label}`;
winSound.play(); // Play win sound
highlightWinningSegment(winningSegmentIndex);
showFireworks(); // Trigger fireworks effect
}, 4000); // Match timeout with the transition duration
}

function highlightWinningSegment(index) {
const segmentDivs = document.querySelectorAll('.segment');
segmentDivs.forEach((div, i) => {
div.classList.remove('glow'); // Remove glow from all segments
if (i === index) {
div.classList.add('glow'); // Add glow effect to winning segment
}
});
}

function resetWheel() {
segments.length = 0; // Clear segments
drawSegments(); // Redraw the wheel
resultDisplay.innerText = ''; // Clear result display
document.body.style.backgroundColor = '#f0f0f0'; // Reset background color
hideFireworks(); // Hide fireworks canvas
}

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

function showFireworks() {
canvas.style.display = 'block'; // Show canvas
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear previous
drawings
for (let i = 0; i < 100; i++) {
createFirework();
}
setTimeout(hideFireworks, 3000); // Hide after 3 seconds
}

function hideFireworks() {
canvas.style.display = 'none'; // Hide canvas
}

function createFirework() {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const color = getRandomColor();
const radius = Math.random() * 3 + 2;

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
</script>
</body>
</html>

You might also like