Ruleta de decisiones

1,345 sergioarmijo30

Abrir en el editor Publica tu código

Recomendado

28 July 2023

Animación de color de texto con CSS

15 August 2025

Estructura de diseño de CSS Office

13 November 2024

Efecto de marco de fotos CSS 3D para imágenes

HTML

CSS

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();