Колесо вращения холста HTML5 не останавливается на выигрышном цвете ⇐ CSS

[Anonymous]

Я пытаюсь создать прялку, используя Canvas и HTML5. это работает, но моя конечная цель — попытаться направить стрелку на точный выигрышный цвет. так, например, если выигрышным цветом является зеленый, колесо должно повернуться и остановиться до тех пор, пока внешняя стрелка не окажется в направлении выигрышного цвета. я прикрепил код ниже, если кто-то может или хочет помочь.

Код: Выделить всё

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const spinButton = document.getElementById('spinButton');
const resultDisplay = document.getElementById('result');
const arrow = document.getElementById('arrow');

const wheel = {
sections: [
{ number: 'Prize 1', color: '#FF4136' },
{ number: 'Prize 2', color: '#0074D9' },
{ number: 'Prize 3', color: '#2ECC40' },
{ number: 'Prize 4', color: '#FFDC00' },
{ number: 'Prize 5', color: '#FF851B' },
{ number: 'Prize 6', color: '#B10DC9' }
],
centerX: canvas.width / 2,
centerY: canvas.height / 2,
radius: 200,
startAngle: 0,
draw() {
const angle = (2 * Math.PI) / this.sections.length;
const textRadius = this.radius - 20; // Radius for positioning text

for (let i = 0; i < this.sections.length; i++) {
const textAngle = angle * i + angle / 2; // Angle to position text at the center of each section
const x = this.centerX + Math.cos(textAngle) * textRadius;
const y = this.centerY + Math.sin(textAngle) * textRadius;

ctx.beginPath();
ctx.moveTo(this.centerX, this.centerY);
ctx.arc(this.centerX, this.centerY, this.radius, i * angle, (i + 1) * angle);
ctx.closePath();
ctx.fillStyle = this.sections[i].color;
ctx.fill();
ctx.stroke();

ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(this.sections[i].number, x, y);
}
}
};

let rotationAngle = 0;
let spinning = false;

function spinWheel() {
if (spinning) return; // Prevent multiple spins

const randomIndex = Math.floor(Math.random() * wheel.sections.length);
const result = wheel.sections[randomIndex].number;
resultDisplay.textContent = `You won: ${result}`;

// Calculate random rotation angle
const randomRotation = Math.floor(Math.random() * 720) + 3600;

// Spin animation
spinning = true;
const spinInterval = setInterval(() => {
rotationAngle += 20; // Change the rotation speed by adjusting this value
if (rotationAngle >= randomRotation) {
clearInterval(spinInterval);
spinning = false;
}
drawWheel(rotationAngle);
}, 20);
}

function drawWheel(rotation) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
wheel.draw();
ctx.save();
ctx.translate(wheel.centerX, wheel.centerY);
ctx.rotate(rotation * Math.PI / 180);
ctx.translate(-wheel.centerX, -wheel.centerY);
wheel.draw();
ctx.restore();
}

wheel.draw(); // Initial drawing
spinButton.addEventListener('click', spinWheel);

Код: Выделить всё

#upperContainer {
position: fixed;
top: 50px; /* Adjust as needed */
left: 50px; /* Adjust as needed */
}

#arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid black; /* Change to left border */
position: absolute;
left: -5px; /* Adjust as needed */
top: 50%;
transform: translateY(-50%);
}

#canvas {
border: 1px solid black;
border-radius: 50%;
}

Код: Выделить всё

Wheel of Fortune







Spin

Подробнее здесь: https://stackoverflow.com/questions/783 ... ning-color