Soy bastante nuevo en JavaScript y PIXI. Estoy creando un pequeño juego que requiere que el jugador navegue y tome una tecla (mover al mismo espacio que la tecla). Esto los lleva al siguiente nivel. Mi problema es que cada vez que se genera un nuevo nivel, de alguna manera usa las coordenadas x e y de la clave del nivel anterior para sesgar la lógica. Debido a esto, el primer nivel funciona bien, pero todos los niveles posteriores están desordenados.

Los niveles quedan sesgados hacia arriba y hacia la izquierda por los valores respectivos de la tecla anterior. Tengo una matriz 2d en el fondo que contiene valores de dónde y dónde no puede el jugador (contiene valores para cosas como paredes, torretas y la llave). Genero aleatoriamente las coordenadas clave y, por ejemplo, configuro grid[9][12] = 3; para el espacio clave. El siguiente nivel se ve visualmente perfecto, con las paredes y la generación de claves, y el jugador en la parte superior izquierda. Sin embargo, debido al sesgo, la parte superior izquierda de las imágenes está realmente en [max_X - 9][max_Y - 12] y el jugador puede salir de la pantalla para acceder de forma invisible al resto del laberinto. Entonces puedo atravesar las paredes porque la lógica tiene las paredes en un lugar diferente al de las imágenes, y el espacio clave real generalmente termina fuera de la pantalla.

Aquí está mi código que genera un nuevo objeto objetivo (clave)

 function createGoal(scene) { while (true) { let x = getRandomInt(APP_WIDTH); let y = getRandomInt(APP_HEIGHT); //if space is not already occupied, populate if (grid[x][y] == 0) { console.log(x); console.log(y); goal = null; goal = new Goal(TILE_WIDTH, x, y); scene.addChild(goal); grid[x][y] = 3; break; } } }

Y aquí está la inicialización de la grilla:

 const grid = new Array(APP_WIDTH); for (let i = 0; i < APP_WIDTH; i++) { grid[i] = new Array(APP_HEIGHT); for (let j = 0; j < APP_HEIGHT; j++) { grid[i][j] = 0; } }

Cualquier ayuda sería muy apreciada.