Decision Roulette HTML: Spin the Wheel!

Open In Editor Publish Your Code Need a Website?

const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const spinBtn = document.getElementById('spin');
const generateBtn = document.getElementById('generate');
const numSegmentsInput = document.getElementById('numSegments');
const result = document.getElementById('result');

let segments = [];
let colors = [];
let startAngle = 0;
let arc = 0;
let spinAngle = 0;
let spinning = false;

function drawWheel() {
  const numSegments = segments.length;
  arc = (2 * Math.PI) / numSegments;

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < numSegments; i++) {
    const angle = startAngle + i * arc;
    ctx.beginPath();
    ctx.moveTo(250, 250);
    ctx.arc(250, 250, 250, angle, angle + arc);
    ctx.fillStyle = colors[i];
    ctx.fill();
    ctx.save();

ctx.translate(250, 250);
    ctx.rotate(angle + arc / 2);
    ctx.textAlign = "right";
    ctx.fillStyle = "#000";
    ctx.font = "bold 20px Arial";
    ctx.fillText(segments[i], 230, 10);
    ctx.restore();
  }
}

function spinWheel() {
  if (spinning) return;
  spinning = true;
  result.textContent = '';

const spins = Math.floor(Math.random() * 5 + 5); // vueltas enteras
  const finalAngle = Math.random() * 2 * Math.PI;  // ángulo extra
  const totalRotation = spins * 2 * Math.PI + finalAngle;

const duration = 4000; // duración en ms
  const start = performance.now();

function animate(time) {
    const elapsed = time - start;
    const progress = Math.min(elapsed / duration, 1);
    // Ease-out con función cúbica
    const easedProgress = 1 - Math.pow(1 - progress, 3);
    startAngle = totalRotation * easedProgress;

drawWheel();

if (progress < 1) {
      requestAnimationFrame(animate);
    } else {
      spinning = false;
      const degrees = (startAngle * 180) / Math.PI + 90;
      const arcd = (arc * 180) / Math.PI;
      const index = Math.floor((360 - (degrees % 360)) / arcd) % segments.length;
      result.textContent = `¡Ganaste: ${segments[index]}!`;
    }
  }

requestAnimationFrame(animate);
}

generateBtn.addEventListener('click', generateWheel);
spinBtn.addEventListener('click', spinWheel);

generateWheel();

Decision Roulette HTML: Spin the Wheel!

Recommended

The Walk of Life

The cube

Theme Switch Button

HTML

CSS

JS

Recommended

The Walk of Life

The cube

Theme Switch Button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS