I’m working on a wheel spinning tool that randomizes between yes or no answers via js. The following code for my yes or 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.
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>
New contributor
wheel spin is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1