0

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.

3
  • La variable desenlace es la que te da el problema? si es así que es?, por que no esta definida en tu codigo
    – Franco
    Commented el 11 mar. 2021 a las 20:56
  • No, el error que tengo se debe a que no puede leer el valor de celdas[i].innerHTML y los sucedáneos. Commented el 11 mar. 2021 a las 21:04
  • celdas tampoco esta definido
    – Franco
    Commented el 11 mar. 2021 a las 21:09

1 respuesta 1

1

Sospecho que el problema está en cómo accedes a las celdas adyacentes dentro del bucle for.

let dereita = celdas[i + 1].innerHTML;
let abaixo = celdas[i + ancho].innerHTML;
let esquerda = celdas[i - 1].innerHTML;
let arriba = celdas[i - ancho].innerHTML;

Como estás recorriendo todo el array, cuando estás en el primer elemento, o en el último, no puedes acceder al i - 1, ni al i + 1, porque no existen, eso devuelve undefined, y undefined.innerHTML es lo que hace que te salte ese error.

Prueba con:

let dereita = (i + 1) < celdas.length ? celdas[i + 1].innerHTML : null;
let abaixo = (i + ancho) < celdas.length ? celdas[i + ancho].innerHTML : null;
let esquerda = (i - 1) >= 0 ? celdas[i - 1].innerHTML : null;
let arriba = (i - ancho) >= 0 ? celdas[i - ancho].innerHTML : null;

Por si no lo tienes claro, esa nomenclatura se llama operador condicional o ternario, y lo que hace es:

Para: let dereita = (i + 1) < celdas.length ? celdas[i + 1].innerHTML : null;:

  1. Comprueba si (i + 1) es menor que celdas.length.
  2. Si el primer paso es cierto, asigna dereita con celdas[i + 1].
  3. Si el primer paso es falso, asigna dereita con null.

No sé cómo afectaría eso a tu programa, pero bueno, creo que por ahí puedes explorar y encontrar una solución.

Aclaración del error

El error viene porque estás intentando acceder a innerHTML de una variable undefined, si es undefined no puede tener ninguna propiedad ni método.

Por qué te sale undefined? Porque estás accediendo a elementos que no existen.

Imagínate que tienes un array con 3 elementos: const arr = [ 1, 2, 3 ], qué pasa si accedes al indice -1? O al indice 3? O al -32 o 120?

const arr = [ 1, 2, 3 ];

console.log(`Elemento -1: ${arr[-1]}`);
console.log(`Elemento 3: ${arr[3]}`);

for (let i = 0; i < arr.length; i++) {
   console.log('---');
   console.log(`Elemento [${i} - 1]: ${arr[i - 1]}`);
   console.log(`Elemento [${i}]: ${arr[i]}`);
   console.log(`Elemento [${i} + 1]: ${arr[i + 1]}`);
}

Por eso, lo que tienes que hacer siempre, es asegurarte de que los accesos que haces al array son >= 0 y <= arr.length.

function existeIndice(indice, length) {
  return indice >= 0 && indice < length;
}

const arr = [ 1, 2, 3 ];

for (let i = 0; i < arr.length; i++) {
  console.log('---');
  if (existeIndice(i - 1, arr.length)) {
    console.log(`Elemento [${i} - 1]: ${arr[i - 1]}`);
  }
  console.log(`Elemento [${i}]: ${arr[i]}`);
  
  if (existeIndice(i + 1, arr.length)) {
    console.log(`Elemento [${i} + 1]: ${arr[i + 1]}`);
  }
}

6
  • Lamentablemente la propuesta sigue dando el mismo error que antes, si necesitas información adicional sobre mi código, haré las adiciones necesarias para que se entienda mejor. Commented el 12 mar. 2021 a las 8:56
  • De todos modos, cuando hago el switch, en la ultima posición solo controlo los cuadrados que se encuentran a izquierda y arriba de este. Commented el 12 mar. 2021 a las 8:59
  • @NicoFabeiro me he dado cuenta de que lo mismo te pasa con esquerda, estás tratando de acceder al elemento anterior, pero si estás en el primer elemento, no existe uno anterior. He actualizado mi respuesta.
    – ArianJM
    Commented el 12 mar. 2021 a las 9:24
  • @NicoFabeiro de hecho, también con abaixo y arriba. Necesitas asegurarte de que los números que hay en los accesos al array, están entre 0 y celdas.length - 1, y no lo estás haciendo.
    – ArianJM
    Commented el 12 mar. 2021 a las 9:27
  • cual es el criterio a seguir para saber si poner si es (i + 1) <celdas.length o (i - 1) >= 0?, El error que me daba anteriormente está solucionado, muchisimas gracias. Commented el 12 mar. 2021 a las 9:34

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.