ruleta visual con Canvas en JavaScript

 Vamos a hacer una ruleta visual con Canvas en JavaScript que tenga elementos de un arreglo y que, cada vez que se detenga, elimine el elemento seleccionado para que no vuelva a salir.

Te lo voy a dejar listo para copiar y pegar en un archivo .html.

🎯 Ejercicio: Ruleta de elementos de un arreglo

Funcionamiento:

  • Un arreglo con palabras o elementos.

  • Se dibuja en un <canvas> una ruleta con esos elementos.

  • Al presionar "Girar", la ruleta gira y se detiene aleatoriamente.

  • El elemento ganador se muestra en pantalla y se elimina del arreglo.

  • Si ya no quedan elementos, muestra un mensaje.

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ruleta con Canvas</title>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
        background: #f0f0f0;
    }
    canvas {
        background: white;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }
    button {
        margin-top: 15px;
        padding: 10px 20px;
        font-size: 18px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background: #45a049;
    }
    h2 {
        margin-top: 20px;
        color: #333;
    }
</style>
</head>
<body>

<h1>🎡 Ruleta de Arreglo</h1>
<canvas id="ruleta" width="400" height="400"></canvas><br>
<button onclick="girar()">Girar</button>
<h2 id="resultado">Presiona "Girar" para comenzar</h2>

<script>
let canvas = document.getElementById("ruleta");
let ctx = canvas.getContext("2d");

// Arreglo de elementos
let elementos = ["Manzana", "Banana", "Fresa", "Sandía", "Uva", "Melón", "Mango", "Kiwi"];

// Variables de la ruleta
let anguloInicio = 0;
let girando = false;
let velocidad = 0;
let anguloSeleccionado = 0;

// Colores para los segmentos
let colores = ["#FF5733", "#33FF57", "#3357FF", "#FFC300", "#8E44AD", "#E67E22", "#16A085", "#E74C3C"];

// Función para dibujar la ruleta
function dibujarRuleta() {
    let segmentos = elementos.length;
    let anguloPorSegmento = 2 * Math.PI / segmentos;

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

    for (let i = 0; i < segmentos; i++) {
        let angulo = anguloInicio + i * anguloPorSegmento;

        // Dibujar segmento
        ctx.beginPath();
        ctx.moveTo(200, 200);
        ctx.arc(200, 200, 200, angulo, angulo + anguloPorSegmento);
        ctx.fillStyle = colores[i % colores.length];
        ctx.fill();

        // Texto del segmento
        ctx.save();
        ctx.translate(200, 200);
        ctx.rotate(angulo + anguloPorSegmento / 2);
        ctx.textAlign = "right";
        ctx.fillStyle = "white";
        ctx.font = "18px Arial";
        ctx.fillText(elementos[i], 180, 10);
        ctx.restore();
    }

    // Flecha de selección
    ctx.beginPath();
    ctx.moveTo(200, 0);
    ctx.lineTo(190, 20);
    ctx.lineTo(210, 20);
    ctx.closePath();
    ctx.fillStyle = "black";
    ctx.fill();
}

// Función para girar la ruleta
function girar() {
    if (girando || elementos.length === 0) return;

    velocidad = Math.random() * 0.3 + 0.25; // velocidad inicial
    girando = true;
    animar();
}

// Animación del giro
function animar() {
    if (!girando) return;

    anguloInicio += velocidad;
    velocidad *= 0.98; // fricción

    if (velocidad < 0.002) {
        girando = false;
        seleccionarElemento();
        return;
    }

    dibujarRuleta();
    requestAnimationFrame(animar);
}

// Seleccionar el elemento donde cae la flecha
function seleccionarElemento() {
    let segmentos = elementos.length;
    let anguloPorSegmento = 2 * Math.PI / segmentos;

    // Calcular el índice ganador
    let anguloFinal = anguloInicio % (2 * Math.PI);
    let indice = Math.floor(((2 * Math.PI) - anguloFinal) / anguloPorSegmento) % segmentos;

    let ganador = elementos[indice];
    document.getElementById("resultado").textContent = "Ganador: " + ganador;

    // Eliminar el elemento del arreglo
    elementos.splice(indice, 1);

    // Redibujar con los elementos restantes
    dibujarRuleta();

    // Si ya no hay elementos
    if (elementos.length === 0) {
        document.getElementById("resultado").textContent = "🎉 No quedan elementos en la ruleta 🎉";
    }
}

// Dibujar ruleta inicial
dibujarRuleta();
</script>

</body>
</html>

🔹 Cómo funciona:

  • Canvas dibuja la ruleta con un segmento por cada elemento del arreglo.

  • Cada clic en "Girar" asigna una velocidad aleatoria y la va reduciendo con fricción hasta detenerse.

  • Cuando para, calcula en qué segmento está la flecha y elimina ese elemento del arreglo.

  • Vuelve a dibujar la ruleta con los elementos restantes.

Si quieres, puedo hacer una versión mejorada donde:

  • Los alumnos puedan escribir sus propios elementos para la ruleta.

  • Cambiar los colores aleatoriamente.

  • Guardar el historial de ganadores.

¿Quieres que te la prepare así más interactiva para que los niños puedan personalizar la ruleta?

Comentarios

Publicar un comentario

Entradas más populares de este blog

1-valores duplicados en un arreglo

 Debes encontrar valores duplicados en un arreglo de números enteros y  regresar un arreglo con los números que se repitan exactamente 2 veces. Prueba tu algoritmo para los siguientes casos: [4,3,2,7,8,3,1]=[32] [1,1,2] = [1] [1]=[] ¿Qué es un arreglo? Un   arreglo   (o array) es una estructura de datos que almacena una colección de elementos en un orden específico. Piensa en él como una   lista ordenada   donde cada elemento tiene una posición numerada. Características principales: Elementos : Pueden ser números, texto, objetos, etc. Índices : Cada elemento tiene una posición (empezando desde 0) Orden : Los elementos mantienen el orden en que fueron agregados Ejemplo visual: javascript // Arreglo de números let numeros = [ 4 , 3 , 2 , 7 , 8 , 3 , 1 ] ; // Posiciones (índices): // índice: 0 1 2 3 4 5 6 // valor: 4 3 2 7 8 3 1 Acceso a elementos: javascript console . log ( numeros [ 0 ] ) ; // 4 (primer elemento) console . log (...
Leer más

Pseudocódigo de la Máquina Expendedora

  Pseudocódigo de la Máquina Expendedora Pseudocódigo Completo text INICIAR_PROGRAMA: total_dinero ← 0 // Variable para acumular el dinero MIENTRAS verdadero HACER: mostrar "Máquina expendedora lista. Comandos: [moneda], [código producto], RETIRAR, PARA" comando ← leer entrada del usuario SI comando = "PARA" ENTONCES: mostrar "Apagando máquina..." TERMINAR_PROGRAMA SINO SI comando = "RETIRAR" ENTONCES: SI total_dinero > 0 ENTONCES: mostrar "Devolviendo " + total_dinero + " pesos" total_dinero ← 0 SINO: mostrar "No hay dinero para devolver" FIN SI SINO SI comando es un número ENTONCES: valor_moneda ← convertir comando a número SI valor_moneda está en [1, 2, 5, 10, 20] ENTONCES: tota...
Leer más

Trabajas en una compañía que ofrece seguros de vida y de gastos

 Trabajas en una compañía que ofrece seguros de vida y de gastos médicos. La empresa está desarrollando una herramienta tecnológica, para que los agentes puedan calcular el monto de una póliza. Para dicho cálculo, se consideran varios factores de riesgo, entre los que se encuentra 6 la edad. Por ello, el contratante debe llenar un formulario, incluyendo su fecha de nacimiento. Como primer reto, deberás calcular la edad del cliente al momento de la cotización. La captura de la fecha de nacimiento debe ser en  una sola cadena de texto con formato DD-MM-AA Debes validar que es una fecha valida: Para simplificar el algoritmo tomaremos el  dia 29 de febrero como invalido El año de nacimiento debe ser mayor 1900 No olvides validar si el cliente ya cumplio años en  la fecha de captura o aun no Cálculo de Edad para Seguros - Explicación Paso a Paso 📋 PROBLEMA COMPLETO Necesitamos calcular la edad de un cliente para una póliza de seguros, validando que: La fecha de nacimient...
Leer más