0

Hola tengo un codigo javascript que es para crear un juego de palabras. tengo la frase oculta que muestra algunas letras aleatorio con su numero, y tengo un alfabeto para poder pulsar, primero seleciono la letra de la frase y luego deberia de pulsar una letra del alfabeto y si coincide que muestre la letra oculta de la frase pero no me funcion, me creado un alert y el alert dice que la selecion de la frase es por ejemplo la "A" si si pulso la "A" de alfabeto dice que es la "A" pero dice que no coinciden. adjunto codigo

<script>
$(document).ready(function() {
  var frase = "El que sonríe gana"; // Cambia la frase aquí
  var box_text = $("#box_text");
  var letraSeleccionada = null; // Variable para almacenar la letra seleccionada

  var letrasPorRevelar = []; // Array para almacenar las letras únicas que se revelarán

  // Iterar sobre cada letra de la frase
  for (var i = 0; i < frase.length; i++) {
    var letra = frase[i].toUpperCase();

    // Verificar si la letra ya está en el array de letras por revelar
    if (!letrasPorRevelar.includes(letra) && letra !== " ") {
      letrasPorRevelar.push(letra); // Agregar la letra al array de letras por revelar
    }
  }

  // Calcular el número de letras a revelar basado en el 25% de la longitud total de la frase
  var letrasARevelar = Math.round(letrasPorRevelar.length * 0.5); 

  // Elegir aleatoriamente las letras que se van a revelar
  var letrasReveladas = [];
  while (letrasReveladas.length < letrasARevelar && letrasPorRevelar.length > 0) {
    var indice = Math.floor(Math.random() * letrasPorRevelar.length); // Seleccionar un índice aleatorio
    var letraSeleccionada = letrasPorRevelar.splice(indice, 1)[0]; // Quitar la letra seleccionada del array y obtenerla

    letrasReveladas.push(letraSeleccionada); // Agregar la letra seleccionada al array de letras reveladas
  }

  // Objeto para almacenar los números asignados a cada letra
  var numerosAsignados = {};

  // Función para generar un número aleatorio único
  function generarNumeroUnico() {
    var numero;
    do {
      numero = Math.floor(Math.random() * 31); // Genera un número aleatorio entre 0 y 30
    } while (Object.values(numerosAsignados).includes(numero)); // Verifica si el número ya está asignado a otra letra
    return numero;
  }

  // Función para verificar si una letra coincide con una selección de texto
  function verificarCoincidencia(letra, texto) {
    // Convertir el texto y la letra a minúsculas para hacer la comparación insensible a mayúsculas y minúsculas
    texto = texto.toLowerCase();
    letra = letra.toLowerCase();

    // Verificar si la letra está presente en el texto
    if (texto.includes(letra)) {
      return true;
    } else {
      return false;
    }
  }

  // Mostrar las letras en el cuadro de texto
  var palabraActual = $("<div>").addClass("box_cuvant");
  for (var i = 0; i < frase.length; i++) {
    var letra = frase[i].toUpperCase();
    var litera;
    if (letra === " ") { // Si es un espacio, agregamos una nueva palabra al texto
      box_text.append(palabraActual);
      box_text.append(" ");
      palabraActual = $("<div>").addClass("box_cuvant"); // Reiniciamos la palabra actual
    } else {
      var numero = letra in numerosAsignados ? numerosAsignados[letra] : generarNumeroUnico();
      var litera_alfabet = $("<div>").addClass("litera_alfabet").text(letrasReveladas.includes(letra) ? letra : "");
      var separacion = $("<div>").addClass("separacion");
      var litera_numar = $("<div>").addClass("litera_numar").text(numero);

      litera = $("<div>").addClass("litera").addClass("litera_alfabet").attr("data-letra", letra).append(litera_alfabet, separacion, litera_numar);
      palabraActual.append(litera);
      letrasReveladas = letrasReveladas.filter(function(l) { return l !== letra; }); // Remover la letra revelada del array
      numerosAsignados[letra] = numero; // Asignar el número a la letra
    }
  }
  box_text.append(palabraActual); // Agregamos la última palabra

  // Manejar el clic en las letras del alfabeto
  $("#alfabeto").on("click", ".letra_alphabet", function() {
    var letraClicada = $(this).text().toUpperCase(); // Obtener la letra clicada en el alfabeto en mayúsculas

    // Verificar si hay una letra oculta seleccionada en el cuadro de texto
    if (letraSeleccionada !== null) {
      // Verificar si la letra clicada del alfabeto coincide con la letra seleccionada en el cuadro de texto
      if (letrasReveladas.includes(letraClicada) && letraClicada === letraSeleccionada) {
        // Mostrar un alert si la letra del alfabeto coincide con la letra oculta seleccionada
        alert("La letra seleccionada de la frase es '" + letraSeleccionada + "' y coincide con la letra '" + letraClicada + "' del alfabeto.");
      } else {
        // Mostrar un alert si la letra del alfabeto no coincide con la letra oculta seleccionada
        alert("La letra seleccionada de la frase es '" + letraSeleccionada + "' y no coincide con la letra '" + letraClicada + "' del alfabeto.");
      }
    }
  });

  // Manejar el clic en las letras del texto oculto
  $(".litera_alfabet").click(function() {
    // Obtener la letra clicada
    var letraClicada = $(this).text();

    // Guardar la letra seleccionada
    letraSeleccionada = letraClicada;

    // Remover la selección de todas las letras
    $(".litera_alfabet").removeClass("seleccionado");

    // Remover la selección de los números
    $(".litera_numar").removeClass("seleccionado");

    // Seleccionar la letra clicada
    $(this).addClass("seleccionado");

    // Seleccionar el número correspondiente
    $(this).siblings(".litera_numar").addClass("seleccionado");

    // Verificar si hay una letra oculta seleccionada en el cuadro de texto
    if (letraSeleccionada !== null) {
      // Obtener el número asociado a la letra seleccionada
      var numeroAsociado = $(this).siblings(".litera_numar").text();

      // Mostrar un mensaje con la letra y su número correspondiente
      console.log("La letra seleccionada es: " + letraSeleccionada + " - Número: " + numeroAsociado);

      // Verificar si la letra seleccionada coincide con la letra de la frase
      var textoFrase = frase.replace(/\s/g, ''); // Eliminar espacios en blanco de la frase
      if (verificarCoincidencia(letraSeleccionada, textoFrase)) {
        console.log('La letra seleccionada coincide con una letra de la frase.');
      } else {
        console.log('La letra seleccionada no coincide con ninguna letra de la frase.');
      }
    }
  });

  // Manejar el clic en las letras de la frase
  $(".litera").click(function() {
    var letraClicada = $(this).find('.litera_alfabet').text(); // Obtener la letra clicada
    var numeroAsociado = $(this).find('.litera_numar').text(); // Obtener el número asociado

    // Obtener la letra asociada al número
    var letraAsociada = letraClicada.trim() !== '' ? letraClicada : Object.keys(numerosAsignados).find(key => numerosAsignados[key] === parseInt(numeroAsociado));

    // Mostrar un mensaje con la letra y su número correspondiente
    console.log("La letra seleccionada es: " + letraAsociada + " - Número: " + numeroAsociado);
  });

  // Generar dinámicamente las letras del alfabeto
  for (var i = 65; i <= 90; i++) {
    var letra = String.fromCharCode(i); // Convertir el código ASCII en letra
    var letraEnLinea = $("<div>").addClass("letra_alphabet").text(letra); // Crear el elemento div con la letra y agregar la clase correspondiente
    $("#alfabeto").append(letraEnLinea); // Agregar la letra al div "alfabeto"
  }
});

</script>
2
  • Agrega el documento HTML Commented el 16 feb. a las 21:26
  • La idea de usar $(document).ready es que el código obtenga las referencias a los elementos correctamente. Ya que si el documento no terminó de cargar, javascript no será capaz de encontrar todos los elementos. Por eso también existe el atributo defer para la etiqueta script, así el código solo se ejecuta una vez que el documento terminó de cargar. Lo menciono porque tienes todo el código dentro de una sola función.
    – Mateo
    Commented el 16 feb. a las 21:44

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.