wheelspinnerdev Posted August 24 Share Posted August 24 I'm working on a wheel spinning tool that randomizes between yes or no answers via js. The following code for my yes no wheel is a very basic one to avoid plagiarism. All i need is guidance on whether I took the wrong route and how my code and its functionality can be improved. attaching the html, css and js scripts. Any kind of input will be much appreciated Thankyou. const canvas = document.getElementById("wheel"); const ctx = canvas.getContext("2d"); const spinButton = document.getElementById("spinButton"); const output = document.getElementById("output"); const segments = ["Yes", "No"]; const colors = ["#FF5733", "#33C1FF"]; let currentAngle = 0; let isSpinning = false; function drawWheel() { const numSegments = segments.length; const anglePerSegment = (2 * Math.PI) / numSegments; for (let i = 0; i < numSegments; i++) { ctx.beginPath(); ctx.moveTo(250, 250); ctx.arc(250, 250, 250, currentAngle, currentAngle + anglePerSegment); ctx.fillStyle = colors[i]; ctx.fill(); ctx.stroke(); ctx.save(); ctx.translate(250 + Math.cos(currentAngle + anglePerSegment / 2) * 180, 250 + Math.sin(currentAngle + anglePerSegment / 2) * 180); ctx.rotate(currentAngle + anglePerSegment / 2 + Math.PI / 2); ctx.fillStyle = "#fff"; ctx.font = "24px Arial"; ctx.fillText(segments[i], -ctx.measureText(segments[i]).width / 2, 0); ctx.restore(); currentAngle += anglePerSegment; } } function spinWheel() { if (isSpinning) return; isSpinning = true; let spinAngle = Math.random() * 2000 + 2000; let finalAngle = (currentAngle + spinAngle) % (2 * Math.PI); let spinDuration = 3000; // 3 seconds let startTime = Date.now(); function animate() { let elapsed = Date.now() - startTime; let progress = Math.min(elapsed / spinDuration, 1); currentAngle += (spinAngle * (1 - Math.pow(progress, 3))); ctx.clearRect(0, 0, canvas.width, canvas.height); drawWheel(); if (progress < 1) { requestAnimationFrame(animate); } else { isSpinning = false; determineResult(finalAngle); } } animate(); } function determineResult(finalAngle) { const numSegments = segments.length; const anglePerSegment = (2 * Math.PI) / numSegments; const resultIndex = Math.floor((2 * Math.PI - finalAngle) / anglePerSegment) % numSegments; output.textContent = segments[resultIndex]; } drawWheel(); spinButton.addEventListener("click", spinWheel); body { font-family: Arial, sans-serif; text-align: center; padding-top: 50px; } .wheel-container { position: relative; display: inline-block; } .arrow { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); } canvas { border: 4px solid #333; border-radius: 50%; } button { margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; } #result { margin-top: 20px; font-size: 24px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Yes or No Wheel Spinner</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="wheel-container"> <div class="arrow"></div> <canvas id="wheel" width="500" height="500"></canvas> </div> <button id="spinButton">Spin the Wheel</button> <p id="result">Result: <span id="output"></span></p> <script src="script.js"></script> </body> </html> Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment