Ruleta de decisiones HTML: ¡Gira la rueda!

Abrir en el editor Publica tu código

Recomendado

7 December 2024

Animación de texto para enlaces

25 May 2025

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

Ruleta de decisiones HTML: ¡Gira la rueda!

Recomendado

Un código de slowlogic9

Animación de texto para enlaces

Un código de Liamgilles76

HTML

CSS

JS

Recomendado

Un código de slowlogic9

Animación de texto para enlaces

Un código de Liamgilles76

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS