Ruleta de decisiones HTML: ¡Gira la rueda!

945 happer78happer

Abrir en el editor Video Publica tu código

Ruleta de decisiones HTML: ¡Gira la rueda!

Recomendado

26 March 2024

Sitio web de información

28 June 2025

Plantilla HTML para sitio web de alquiler de bicicletas

25 August 2025

Estructura del contenedor de animación HTML

HTML

CSS

JS

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

Recomendado

Sitio web de información

Plantilla HTML para sitio web de alquiler de bicicletas

Estructura del contenedor de animación HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS