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>
$(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 atributodefer
para la etiquetascript
, 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.