Buenas a todos los lectores. Tengo el siguiente problema, en mi proyecto personal para una asignatura, estoy haciendo el juego 2048. Todo bien hasta que tengo que controlar cuando se pierde la partida y tengo problemas para seleccionar las casillas con las que se compara cada una y ver si su valor coincide.
Mi juego está definido como un array de objetos(divs) de 16 objetos, contenidos en otro div de 400x400.
function perder() {
let movimientoPosible = false;
for (let i = 0; i < celdas.length; i++) {
let centro = celdas[i].innerHTML;
let dereita = celdas[i + 1].innerHTML;
let abaixo = celdas[i + ancho].innerHTML;
let esquerda = celdas[i - 1].innerHTML;
let arriba = celdas[i - ancho].innerHTML;
console.log(centro);
console.log(dereita);
console.log(abaixo);
console.log(esquerda);
console.log(arriba);
//comprobacion de los valores , si coincide alguno se puede seguir moviendo, si no pierdes la partida
//siempre sale true porque no selecciona correctamente los divs que quiero comparar
switch (i) {
//los valores del case coinciden con valor de i do nuestro celdas[i]
case 0:
if((centro == dereita)||(centro == abaixo)){
movimientoPosible = true;
}
break;
case 1:
case 2:
if((centro == dereita)||(centro == abaixo)||(centro == esquerda)){
movimientoPosible = true;
}
break;
case 3:
if((centro == esquerda)||(centro == abaixo)){
movimientoPosible = true;
}
case 4:
case 7:
case 8:
case 11:
if((centro == esquerda)||(centro == abaixo)||(centro == arriba)){
movimientoPosible = true;
}
break;
case 12:
if((centro == dereita)||(centro == arriba)){
movimientoPosible = true;
}
break;
case 13:
case 14:
if((centro == esquerda)||(centro ==dereita)||(centro == arriba)){
movimientoPosible = true;
}
break;
case 15:
if((centro == esquerda)||(centro == arriba)){
movimientoPosible = true;
}
break;
default:
if(centro === dereita || centro === abaixo || centro === esquerda || centro === arriba){
movimientoPosible == true;
}
break;
}
}
console.log(movimientoPosible);
if(movimientoPosible == false){
desenlace.innerHTML='Perdiste, si quieres volver a empezar pulsa la tecla "R"';
document.removeEventListener('keyup',controles);
}
}
bueno, perdón por los nombres de las posiciones que están en gallego, pero son entendibles sin mayor esfuerzo. Yo llamo a la función perder(); cuando realizo cualquier movimiento pulsando las teclas(esta se llama en ultimo lugar). Y como dice el titulo , no puede leer el innerHTML de cada div que controlo. Ejemplo de una llamada:
function flechaArriba(){
arriba();
combinarColumna();
arriba();
aleatorio();
colorea();
perder();
}
Puede ser también relevante que todo mi script está contenido dentro de un
document.addEventListener('DOMContentLoaded',()=>{});
por temas de sincronía, porque lo que creo que ocurre es que en el momento de que yo hago un movimiento los objetos no existen dentro del DOM, por lo tanto no existe su innerHTML. Todas las variables que no están definidas dentro de la función anterior son variables globales que están definidas al principio del script del siguiente modo:
document.addEventListener('DOMContentLoaded',() => {
const tabla = document.querySelector(".grid");
const puntuacion = $("#puntos")[0];
const desenlace = $("#resultado")[0];
const ancho = 4;
let celdas = [];
let punto = 0;
.........(resto del código)});
}
Me resulta valida toda ayuda , da igual si es js puro o jquery, pues utilizo ambos en el proyecto.
desenlace
es la que te da el problema? si es así que es?, por que no esta definida en tu codigoceldas[i].innerHTML
y los sucedáneos.