4

Estoy intentando crear un programa que genere 3 botones, cada uno con un valor aleatorio del 1 al 5 y el objetivo es clicar el más grande (evidentemente en los botones no aparecen los números), si aciertas salta un alert diciendo correcto y si fallas otro alert que diga has fallado, el problema que tengo es que no se hacer que los botones contengan valores aleatorios, he probado varias formas pero no lo logro así que no tengo un codigo que mostrar... espero que se haya entendido la explicación, gracias

var boton1 = document.getElementById("boton1");
var boton2 = document.getElementById("boton2");
var boton3 = document.getElementById("boton3");

var numAleatorio1 = Math.random(1,5);
var numAleatorio2 = Math.random(1,5);
var numAleatorio3 = Math.random(1,5);

var botonPresionado = $(this.data("id"));
var botonGrande = botonMasGrande();

if(botonPresionado == botonMasGrande) {
    alert("Correcto");
} else {
    alert("Incorrecto");
}

function botonMasGrande() {
    // Calcula cual es el botón con el número más grande
    let resultadoBoton;
    if(boton1 > boton2 && boton1 > boton3) {
        resultadoBoton = "boton1";

    } else if(boton3 > boton2 && boton3 > boton1) {
        resultadoBoton = "boton3";

    } else if(boton2 > boton1 && boton2 > boton3) {
        resultadoBoton = "boton2";

    } else {
        reiniciarBotones();
    }

}

function reiniciarBotones() {
    // Aquí estaría el código para reiniciar los valores de los botones
}

Donde tengo problemas es en dar valores a los botones sin que aparezcan como texto y en crear la función reiniciarBotones();

8
  • 1
    Nos mostrariás tú intento por favor. Así podremos ayudarte, pues no sabemos que está mal. Ni como hacer la solución.
    – DABL03
    Commented el 8 mar. 2021 a las 18:35
  • Claro ahora modifico la pregunta un momento
    – GreenLass
    Commented el 8 mar. 2021 a las 18:37
  • 1
    .... Si tienes ploblema al insertar el código me dices. Yo tuve el mismo ploblema.
    – DABL03
    Commented el 8 mar. 2021 a las 18:45
  • Ya he logrado insertar el código muchas gracias
    – GreenLass
    Commented el 8 mar. 2021 a las 18:55
  • Revisando me he dado cuenta de que hay un error en mi codigo, el boton presionado guarda el valor del valor que presionas y luego habría otra variable que guarda el valor del boton más grande, después con un if los compararía y mostraría el alert correspondiente (Ya arreglado el el codigo de la pregunta)
    – GreenLass
    Commented el 8 mar. 2021 a las 18:58

1 respuesta 1

4

Puedes reducir un poco el código y llegar a la solución con algunas mejoras:

  • La más importante es que no uses directamente Math.random() para asignar los valores, al ser tan pocos, hay grandes probabilidades de que haya repetidos; lo ideal es crear un arreglo y desordenarlo para tomar un valor para cada botón.
  • Usa el atributo value para almacenar el valor de los botones y, como texto, solo muestra ? o lo que creas más conveniente.
  • En lugar de ir botón a botón para asignar valores y eventos, usa document.querySelectorAll() para obtenerlos todos en una lista de nodos, que puedes recorrer con .forEach() y servirá para 3 cosas:
    1. Asignar evento clic (solo una vez, al cargar la página)
    2. Asignar valor cada que se inicie el juego
    3. Obtener el valor máximo

/**
 * Función para desordenar un arreglo
 * Tomada de: https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array/6274381#6274381
 * Shuffles array in place.
 * @param {Array} a items An array containing the items.
 */
function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}

// Crear arreglo de números
let numeros = [1, 2, 3, 4, 5];

// Obtener botones
let botones = document.querySelectorAll('button');

// Asignar evento a botones
botones.forEach(boton => boton.addEventListener('click', botonClick));

function reiniciarBotones() {
    // Desordenar arreglo, para evitar números repetidos
    numeros = shuffle(numeros);
    botones.forEach((boton, index) => boton.value = numeros[index]);
    // Solo para depurar y ver que funciona
    console.log(botones);
}
// Se recibe el evento (e) como parámetro
function botonClick(e) {
    // Encontrar el valor máximo
    let max = Array.from(botones).reduce((a, b) => (b.value > a) ? b.value : a, 0);
    // El botón que recibió clic está en e.target
    if(e.target.value == max) {
        alert('¡Correcto!');
    } else {
        alert('¡Incorrecto!');
    }
    // ¿Jugar otra vez?
    reiniciarBotones();
}

// Asignar valor a los botones para comenzar el juego
reiniciarBotones();
<button id="boton1" value="0">?</button>
<button id="boton2" value="0">?</button>
<button id="boton3" value="0">?</button>

Importante: La función para desordenar el arreglo fue tomada de esta respuesta (en inglés).

1
  • 2
    Buena respuesta. Y te daría otro +1 por citar las fuentes, pero no me deja el sistema :)
    – Alvaro Montoro
    Commented el 9 mar. 2021 a las 2:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.