Jump to content

wheelspinnerdev

Member
  • Posts

    1
  • Joined

  • Last visited

Everything posted by wheelspinnerdev

  1. 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>
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.