Roulette de décision HTML : faites tourner la roue !

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

21 July 2024

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

Roulette de décision HTML : faites tourner la roue !

Recommandé

Formulaire de connexion animé

Effet de survol de bouton CSS

Animation de texte de liens

HTML

CSS

JS

Recommandé

Formulaire de connexion animé

Effet de survol de bouton CSS

Animation de texte de liens

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS