Lo he logrado, pero mi codigo es una verdadera ensalada, tengo que mejorar eso, voy a tratar de explicarlo. Lo que se me ocurrió es crear un array bidimensional donde almacena las pocisiones de las bombas, pero de cada level, de esta forma, segun el level que estamos y con la misma logica detectamos las colisiones.
En este pedazo de codigo necesito sus consejos, como podria haber hecho esto mejor:
const bombsPosition =[]; let cantidadLevels = mapRowsCols.map(element => bombsPosition.push([])); // de esta forma a bombsPosition le agrego los arrays internos y vacios segun cuantos niveles tengamos. Como harían esto de una mejor forma?
Ya teniendo mi array con arrays internos vacios, seguimos con la misma logica con el metodo push segun el map y level los agregamos(las posiciones)
// esto esta dentro de la funcion starGame() dentro del ciclo for if(mapRowsCols[level][i][z-1] == 'X' && flag ){ bombsPosition[level].push({x: elementSize*i, y: elementSize*z}) }
Creo que acabo de hacer algo muy chambón jajaja.
En el IF de movePlayer que sirve para detectar la colisión con las bombas ejecute una funcion llamada gameLose la cual consiste en recargar la pagina y asi reiniciar todos los niveles.
Funciona, pero… a qué costo.
Abigail Nahomi Chávez Lozano
Tenia el problema de que una vez mi jugador salía de la primera fila, ya no podia volver a subir.
El condicional 'if' de la funcion moveUp(), tenia ese cambio por decimales de diferencia entre (playerPositions.y - elementsSize) y el msmo elemensSize:
Lo solucioné redondeando hacia arriba los decimales de la resta para igualar al de elementsSize y poder moverme hasta la primera fila:
Tommy Toala Cox
Nestor Rios Garcia
Lo logramos
Asi vamos
!game
- Commit de la clase
¿Quieres jugar?
Santiago Velásquez Serna
Creo dos variables(initX, initY) que guarden la ubicación de la puerta cada renderizada en el mapa, no importa que nivel sea, y esa ubicación es la que se le dará a la calavera si choca con algun elemento. .....
if(col=='O'){ initX=positionX; initY=positionY if(!playerPosition.x && !playerPosition.y){ playerPosition.x=positionX; playerPosition.y=positionY; }
........
if (estallido){ game.fillText(emojis['BOMB_COLLISION'],playerPosition.x,playerPosition.y) console.log(emojis['BOMB_COLLISION']); playerPosition.x=initX playerPosition.y=initY } });
Red Robles
Yo cada vez que el jugador colisiona, igualé a playerPosition.x y playerPosition.y a underfined y luego llamé a la función starGame().
Natalia Gomez Perez
Oscar Gutiérrez
Analizando tu código me di cuenta que es porque no estas detectando las colisiones; ni con el regalo, ni con las bombas (o los emojis que tu hayas elegido).
¿Por qué ocurre esto?
Esto se debe a que la posición del jugador (playerPosition) la estas dividendo entre el elementsSize; al hacer esto estas modificando su valor numérico para que solo te de valores entre 0 y 10, por lo que al realizar las validaciones de si la posición del jugador coincide con la del regalo o algún enemigo retornara siempre false. Por eso la función levelWin() nunca se ejecuta y por ende nunca se modifica la variable level.
Solución
Aquí veo dos posibles soluciones:
Gianluca Enzo Procopio
Juan Castro
ProfesorGian, veo que hace poco completaste el curso, ¿lograste solucionar este error?
Gianluca Enzo Procopio
Hola Juan, perdón por responderte tarde (no ví tu respuesta). El error ya lo solucioné y el juego me quedó increible. Actualmente estoy aprendiendo React, eres mi profe fav!!!
Mauricio Combariza
Edgardo Luis Jimenez Nuñez
Mi Solucion
En realidad he visto que la mayoria de compañeros lo han realizado casi parecido, esta fue como lo realice yo.
// Declare un objeto con valores de x y y, despues la inicialice con la posicion en el momento que se renderiza la puerta const doorPosition = { x: undefined, y: undefined, } ... if (!playerPosition.x && !playerPosition.y && col == "O") { playerPosition.x = positionX; playerPosition.y = positionY; doorPosition.x = positionX; doorPosition.y = positionY; } ... // Y con una funcion que se llama cuando el jugador choca con las bombas function gameOver() { console.log("Chocaste contra un enemigo!!"); playerPosition.x = doorPosition.x; playerPosition.y = doorPosition.y; level = 0; startGame(); }
Manuel Andres García Vera
Frandel Corporan Rodríguez
La solucion para resetear la posicion del jugador hacia la puerta cada vez que colisione es simplemente crear una variable/contanre que haga una copia del objeto playerPosition con Object.create(playerposition) este copiara la estructura y valores mas no la referecia. Luego de esto en startGame cuando le pasamos la primera posicion a la calabera al principio del nivel pues tambien se la pasaremos a nuestro objeto de la puerta y en cada levelUp le actualizaremos las coordenadas tomando como referencia la posicion del jugador al principio del nivel de esta manera:
function levelUp(){ level++ startGame() door.x = playerPosition.x door.y = playerPosition.y }
Fabio Escobar
Manuel Araujo
Dentro de la función movePlayer(), en el condicional donde revisamos si enemyCollision es true, agregamos una función por ejemplo levelLost()
if (enemyCollision) { console.log('Chocaste contra un enemigo :('); levelLost(); }
Luego creamos dicha función levelLost() que primero le vuelve a dar los valores de undefined a las propiedades de playerPosition (si no se hace esto habrá un bucle infinito) y luego llamará a la función startGame:
function levelLost() { playerPosition.x = undefined; playerPosition.y = undefined; startGame(); }
Enrique Aguilera
s
Me ha pasado el error de los decimales, en el ultimo decimal habia una variacion y eso hacia que mi calaverita al llegar al tercer nivel se pueda salir del mapa por la parte de arriba
Este es el codigo que causaba ese error:
if(key === "up" && (playerPosition.y > elementsSize)) { playerPosition.y -= elementsSize }
y lo arregle asi:
if(key === "up" && (parseInt(playerPosition.y.toFixed(3)) > parseInt(elementsSize.toFixed(3)))) { playerPosition.y -= elementsSize }
César Augusto Cortés Labrada
Quería aportar algo, aunque espero me confirmen si es acertado o no. Pienso que al final de la función movePlayer() debería haber un return;
Ejemplo: movePlayer(){ . . . return; } De esta manera siempre que un movimiento sea exitoso, osea sin colisiones, todas las ejecuciones y llamados de funciones terminen y sean sacadas de la pila de ejecuciones; de esta manera no habría que esperar a que terminará el juego para por fin obtener un return y finalizar todas ejecución en la pila.
marco antonio
Creo que te estas confundiendo por defecto todas las funciones de cualquier lenguaje retornan por defecto void*(0) o void(0x0) dependiendo del lenguaje que puede definirse como undefined null y asi.
Por lo que no es necesario hacer return; salvo que quieras ejecutar una condición que fuerce la salida y evitar la ejecución del código restante.
En cuanto a la pila en palabras simples: una vez carga el programa el sistema se encarga de asignarle un espacio de memoria de 1x ya sea que lo ocupes o no pero este se duplica con cada nueva petición que exceda el espacio de memoria anterior el problema se encuentra en que si no se libera la memoria usada llegara al punto en donde no exista mas memoria y comience el desbordamiento.
por ejemplo las variables globales son un ejemplo de memoria que nunca se libera asta terminar el programa o amenos que lo liberes de manera manual el punto es que no es automático.
Si a alguien le interesa estos temas y "no le teme al progreso" XD quiero decir que no le teme a meterse a las tripas de la maquina les recomiendo que le den un vistazo al canal de Profesor Retroman si bien enseña C y ensamblador esto te abre la mente y te hace entender cualquier lenguaje sin problemas.
Sin mentirles esta es la primera vez que yo uso javaScript no he hecho ningún curso ni nada y se me hace super fácil de entender tiene sus peculiaridades pero puedo usarlo sin saber de el.
En fin Profesor Retroman tiene tiene una nueva serie que se llama C y Ensamblador, ¡desde 0! donde muestra como construir un videojuego y sus clases son en vivo, realmente aprendes un montón por si a alguien le interesa
Josue Cerron Tuesta
Cecilia Mansilla
Porque cuando pongo level en el maps se me borra todo. Pero si pongo 1 o 0 vuelve nuevamente
ayudaaaaaa!!! Ya tengo la cabeza re quemada de tanto intentar :(
Ricardo Collado
Creo que fue sencillo... el reto. Aunque talvez use una forma muy alcaica o robusta para una solucion muy simple. Lo primero que hago es cuando se esta recorriendo el array del mapa, pues confirmo si estamos en la posicion de apertura del nivel, que seria la puerta, y alli, habiendo creado un objeto al que he llamado "levelStartPoint" pues le asigno las coordenadas donde esta la puerta del nivel actual. Y luego, cada vez que habia una colision, ejecuto un metodo que se encarga de cambiar las coordenadas del jugador, por las coordenadas de la puerta:
//otra parte del codigo aqui if(col=='O'){   levelStartPoint.x = posX;   levelStartPoint.y = posY;   }
El metodo que he usado:
function playerLoseLevel(){ playerPosition.x = levelStartPoint.x; playerPosition.y = levelStartPoint.y; }
Y cuando detectamos una colision pues:
if(enemyCollision){ console.log('Chocaste contra un enemigo :('); const playerOver = emojis\['GAME\_OVER']; game.fillText(playerOver,playerPosition.x,playerPosition.y); playerLoseLevel();
Cambio el icono del jugador cuando colisiona.. pero obviamente no hay tiempo de verlo, quisiera detener el proceso por unos segundos y luego retornar y reiniciar, para que se vea una caravela.
Mi solución: Como desde el comienzo estaba creando un objeto de mi mapa. ++Para pasar de nivel++ Cree una funcion lvlUp(), la cual solo cambia la propiedad de mi objeto base, luego renderiza el siguiente lvl, llamando a la funcion startGame()
function lvlUp() { if (map.lvl < maps.length - 1) { map.lvl += 1; startGame() } }
++Para resetear todo++ uso do funciones, una que detecta la colision, y la otra que le da los nuevos valores de posicion al player
} function colision() { const enemyColition =map.bombPosition.find(a=> { const coincideX = map.playerPosition.x.toFixed(3) === a.x.toFixed(3); const coincideY = map.playerPosition.y.toFixed(3) === a.y.toFixed(3); return coincideY && coincideX }) if (enemyColition) { console.log("perdiste") } return enemyColition } function resetGame(){ if (colision()){ map.playerPosition.x=map.doorPosition.x map.playerPosition.y=map.doorPosition.y startGame() }
Luego corro esa función cuando se mueve el jugador
playerPosition: { x: undefined, y: undefined, render: function () { game.fillText(emojis["PLAYER"], this.y, this.x); const coincideX = Math.floor(this.x) === Math.floor(map.giftPosition.x); const coincideY = Math.floor(this.y) === Math.floor(map.giftPosition.y); if (coincideY && coincideX) { console.log("Subiste de nivel") lvlUp() } resetGame() } }
toooodo mi codigo
const canvas = document.getElementById('game'); const game = canvas.getContext("2d"); const btnUp = document.querySelector('#up'); const btnLeft = document.querySelector('#left'); const btnRight = document.querySelector('#right'); const btnDown = document.querySelector('#down') let canvasSize; let canvasElement; const map = { lvl: 0, playerPosition: { x: undefined, y: undefined, render: function () { game.fillText(emojis["PLAYER"], this.y, this.x); const coincideX = Math.floor(this.x) === Math.floor(map.giftPosition.x); const coincideY = Math.floor(this.y) === Math.floor(map.giftPosition.y); if (coincideY && coincideX) { console.log("Subiste de nivel") lvlUp() } resetGame() } }, giftPosition: { x: undefined, y: undefined, }, doorPosition: { x: undefined, y: undefined, }, bombPosition: [], render: function () { const Map = maps[this.lvl].match(/[IXO\-]+/g) .map(a => a.split("")) || console.log("No more maps") game.clearRect(0, 0, canvasSize, canvasSize) game.font = canvasElement + "px Verdana" game.textAlign = "end" Map.forEach((x, xi) => { x.forEach((y, yi) => { const posX = canvasElement * (xi + 1) const posY = canvasElement * (yi + 1) game.fillText(emojis[y], posY, posX) if (y === "O") { this.doorPosition.x = posX this.doorPosition.y = posY if (this.playerPosition.x === undefined && this.playerPosition.y === undefined) { this.playerPosition.x = posX this.playerPosition.y = posY } } if (y === "I") { this.giftPosition.x = posX this.giftPosition.y = posY } if (y === "X") { this.bombPosition.push({ x: posX, y: posY }) } }) }) } } // const playerPosition={ // } window.addEventListener('load', setCanvasSize); window.addEventListener('resize', setCanvasSize) function setCanvasSize() { window.innerHeight > window.innerWidth ? canvasSize = window.innerWidth * 0.9 : canvasSize = window.innerHeight * 0.7; canvas.setAttribute("height", canvasSize) canvas.setAttribute("width", canvasSize) canvasElement = canvasSize / 10; startGame() } function startGame() { map.bombPosition = [] map.render() map.playerPosition.render() } function lvlUp() { if (map.lvl < maps.length - 1) { map.lvl += 1; startGame() } } function colision() { const enemyColition =map.bombPosition.find(a=> { const coincideX = map.playerPosition.x.toFixed(3) === a.x.toFixed(3); const coincideY = map.playerPosition.y.toFixed(3) === a.y.toFixed(3); return coincideY && coincideX }) if (enemyColition) { console.log("perdiste") } return enemyColition } function resetGame(){ if (colision()){ map.playerPosition.x=map.doorPosition.x map.playerPosition.y=map.doorPosition.y startGame() } } //moviemientos window.addEventListener("keyup", moveByKey) btnUp.addEventListener("click", moveUp) btnLeft.addEventListener("click", moveLeft) btnRight.addEventListener("click", moveRight) btnDown.addEventListener("click", moveDown) function moveUp() { map.playerPosition.x - canvasElement < canvasElement ? map.playerPosition.x = canvasElement : map.playerPosition.x -= canvasElement startGame() } function moveLeft() { map.playerPosition.y - canvasElement < canvasElement ? map.playerPosition.y = canvasElement : map.playerPosition.y -= canvasElement startGame() } function moveRight() { map.playerPosition.y + canvasElement > canvasSize ? map.playerPosition.y = canvasSize : map.playerPosition.y += canvasElement startGame() } function moveDown() { map.playerPosition.x + canvasElement > canvasSize ? map.playerPosition.x = canvasSize : map.playerPosition.x += canvasElement startGame() } function moveByKey(event) { if (event.key === "ArrowUp") moveUp(); if (event.key === "ArrowLeft") moveLeft(); if (event.key === "ArrowRight") moveRight(); if (event.key === "ArrowDown") moveDown(); }
No puedo subir de nivel. Sigo paso a paso los vídeos, he mirado los aportes y no entiendo por qué no sube de nivel. Alguien puede ayudar? Muchísimas gracias.
Aquí el código:
const canvas = document.querySelector('#game'); const game = canvas.getContext('2d'); const btnUp = document.querySelector('#up'); const btnDown = document.querySelector('#down'); const btnLeft = document.querySelector('#left'); const btnRight = document.querySelector('#right'); //VARIABLES let canvasSize; let elementsSize; let level = 0; const playerPosition = { x: undefined, y: undefined, }; const brainPosition = { x: undefined, y: undefined, }; let wallPositions = []; //EVENTS //set size of canvas window.addEventListener('load', setCanvasSize); window.addEventListener('resize', setCanvasSize); //FUNCTIONS function setCanvasSize() { if (window.innerHeight > window.innerWidth) { canvasSize = window.innerWidth * 1; } else { canvasSize = window.innerHeight * 1; } canvas.setAttribute('width', canvasSize); canvas.setAttribute('height', canvasSize); elementsSize = canvasSize / 10 - 1; startGame(); } function startGame() { console.log({ canvasSize, elementsSize }); game.font = elementsSize - 7 + 'px Verdana'; game.textAlign = 'end'; const map = maps[level]; if (!map) { gameWin(); return; } const mapRows = map.trim().split('\n'); const mapRowCols = mapRows.map((row) => row.trim().split('')); console.log(map, mapRows, mapRowCols); wallPositions = []; game.clearRect(0, 0, canvasSize, canvasSize); mapRowCols.forEach((row, rowI) => { row.forEach((col, colI) => { const emoji = emojis[col]; const posX = elementsSize * (colI + 1); const posY = elementsSize * (rowI + 1); if (col == 'O' && !playerPosition.x && !playerPosition.y) { //player position playerPosition.x = posX / elementsSize; playerPosition.y = posY / elementsSize; console.log({ playerPosition }); } else if (col == 'I') { //brain position brainPosition.x = posX; brainPosition.y = posY; } else if (col == 'X') { wallPositions.push({ x: posX, y: posY, }); } game.fillText(emoji, posX, posY); }); }); movePlayer(); } function movePlayer() { const brainCollisionX = playerPosition.x.toFixed(3) == brainPosition.x.toFixed(3); const brainCollisionY = playerPosition.y.toFixed(3) == brainPosition.y.toFixed(3); const brainCollision = brainCollisionX && brainCollisionY; if (brainCollision) { levelWin(); } const wallCollision = wallPositions.find((wall) => { const wallCollisionX = wall.x.toFixed(3) == playerPosition.x.toFixed(3); const wallCollisionY = wall.y.toFixed(3) == playerPosition.y.toFixed(3); return wallCollisionX && wallCollisionY; }); if (wallCollision) { console.log('Chocaste :('); } game.fillText( emojis['PLAYER'], playerPosition.x * elementsSize, playerPosition.y * elementsSize ); } function levelWin() { console.log('Subiste de nivel'); level++; startGame(); } function gameWin() { console.log('Terminaste'); } window.addEventListener('keydown', moveByKeys); btnUp.addEventListener('click', moveUp); btnDown.addEventListener('click', moveDown); btnRight.addEventListener('click', moveRight); btnLeft.addEventListener('click', moveLeft); //MOVE PLAYER function moveByKeys(event) { if (event.key == 'ArrowUp') moveUp(); else if (event.key == 'ArrowLeft') moveLeft(); else if (event.key == 'ArrowRight') moveRight(); else if (event.key == 'ArrowDown') moveDown(); } function moveUp() { console.log('Arriba'); if (playerPosition.y > 1) { playerPosition.y -= 1; } startGame(); } function moveLeft() { console.log('Izquierda'); if (playerPosition.x > 1) { playerPosition.x -= 1; } startGame(); } function moveRight() { console.log('Derecha'); if (playerPosition.x < 10) { playerPosition.x += 1; } startGame(); } function moveDown() { console.log('Abajo'); if (playerPosition.y < 10) { playerPosition.y += 1; } startGame(); }
Este es mi código, al principio me creaba un bucle pero chat GPT me ayudo a solucionarlo, esta en Typescript
import './style.css' import { maps, emojis } from './maps'; const canvas = document.querySelector('#game') as HTMLCanvasElement; const game = canvas.getContext('2d') window.addEventListener('load', setCanvasSize); window.addEventListener('resize', setCanvasSize) let canvasSize: string; let elementSize: number; let level = 0 as number let winPosition = { x:0 as number, y:0 as number } let player = emojis['PLAYER'] let playerPosition = { x:0 as number, y:0 as number } let mapaActual: { elem: string; x: number; y: number }[] = []; let element: { elem: string; x: number; y: number } = { elem: '-', x: 0, y: 0, }; const btnUp = document.querySelector('#up') as HTMLElement const btnLeft = document.querySelector('#left') as HTMLElement const btnRight = document.querySelector('#right') as HTMLElement const btnDown = document.querySelector('#down') as HTMLElement function setCanvasSize() { let height = window.innerHeight; let width = window.innerWidth; if (height > width) { canvasSize = `${width * 0.8}`; } else { canvasSize = `${height * 0.8}`; } elementSize = (parseFloat(canvasSize) / 10.5); canvas.setAttribute('width', canvasSize); canvas.setAttribute('height', canvasSize); startGame() } let mapa = maps[level] // El método trim elimina los espacios en blanco let mapRows = mapa.trim().split('\n'); let mapRowCols = mapRows.map(row => row.trim().split('')) function startGame() { console.log('Mapas:', mapa, mapRows, mapRowCols) mapa = maps[level] mapRows = mapa.trim().split('\n') mapRowCols = mapRows.map(row => row.trim().split('')) if (!game) { console.error('El contexto del lienzo no está disponible'); return; } game.font= elementSize + 'px Verdana' mapRowCols.forEach((row, i) => { row.forEach((col, j) => { const emoji = emojis[col] let posX = j * elementSize let posY = (i+1) * elementSize element = { elem: col, x: posX, y: posY } mapaActual.push(element) if (col == 'O'){ playerPosition = { x: posX, y: posY } // Se crea un array con el valor y las coordenadas } game.fillText(emoji, posX, posY) }) }) movePlayer() } function renderGame() { if (!game) return; game.clearRect(0, 0, canvas.width, canvas.height); mapRowCols.forEach((row, i) => { row.forEach((col, j) => { const emoji = emojis[col]; let posX = j * elementSize; let posY = (i + 1) * elementSize; if (col === 'I'){ winPosition = { x: posX, y: posY } } game.fillText(emoji, posX, posY); }); }); } function movePlayer() { if (!game) return renderGame() game.fillText(player, playerPosition.x, playerPosition.y); mapaActual.map(item => { let actualPositionX = Math.floor(playerPosition.x) === Math.floor(item.x) let actualPositionY = Math.floor(playerPosition.y) === Math.floor(item.y) let actualPosition = actualPositionX && actualPositionY if (actualPosition){ console.log(item.elem) if(item.elem === 'X') { console.log('Perdiste') startGame() } if(item.elem === 'I') { console.log('Ganaste eeee') if(level > maps.length - 1){ console.log('Fin del juego Ganaste!!') } else { level += 1 mapaActual = [] startGame() } } } }) } function moveUp(){ playerPosition.y -= elementSize if (playerPosition.y > (elementSize * 10)) { playerPosition.y = 10 * elementSize } movePlayer() } function moveLeft(){ playerPosition.x -= elementSize if (playerPosition.x < 0) { playerPosition.x = 0 } movePlayer() } function moveRight(){ playerPosition.x += elementSize if (playerPosition.x > (elementSize * 9)) { playerPosition.x = 9 * elementSize } movePlayer() } function moveDown(){ playerPosition.y += elementSize if (playerPosition.y < elementSize) { playerPosition.y = elementSize } movePlayer() } function moveByKeys(event: KeyboardEvent) { if(event.key == 'ArrowUp') moveUp() if(event.key == 'ArrowLeft') moveLeft() if(event.key == 'ArrowRight') moveRight() if(event.key == 'ArrowDown') moveDown() } window.addEventListener('keyup', moveByKeys) btnUp?.addEventListener('click', moveUp) btnLeft?.addEventListener('click', moveLeft) btnRight?.addEventListener('click', moveRight) btnDown?.addEventListener('click', moveDown)
++mi solución ++
en la funcion movePlayer() remplace el mensaje del condicional que compara cuando hay una colisión con las bombas, en dicho condicional introduje una nueva función
if (bombasCollision){ repeatLevel() }
en la función repatLevel introduje el mensaje que había antes en el condicional, además, asigne las coordenadas de la puerta o el punto de inicio
function repeatLevel(){ console.log('chocaste con una bomba'); playerPosition.x = door.x ; playerPosition.y = door.y ; }
¿ como extraje las coordenadas del punto inicial o la puerta? cree un un nuevo objeto que contenga las coordenadas de la puerta, las coordenadas se insertan cuando se renderiza el mapa
const door = { x : undefined, y : undefined, }
if (col =='O'){ door.x = posX; door.y = posY; if(!playerPosition.x && !playerPosition.y){ playerPosition.x = posX; playerPosition.y = posY; console.log({playerPosition}); }
asi lo haria yo:
const canvas = document.querySelector("#game"); const context = canvas.getContext("2d"); const btnLeft = document.querySelector("#left"); const btnUp = document.querySelector("#up"); const btnRight = document.querySelector("#right"); const btnDown = document.querySelector("#down"); window.addEventListener("load", setCanvasSize); window.addEventListener("resize", setCanvasSize); let canvasSize; let elementsSize; let level = -1; const playerPosition = { x: undefined, y: undefined, }; const pricePosition = { x: undefined, y: undefined, }; const bombPosition = { x: 0, y: 0, }; const initialPosition = { x: 0, y: 0, }; function startGame() { isPricePosition(); delMap(); context.textAlign = "end"; context.font = elementsSize + "px Verdana"; let map = maps[level]; if (!map) { gameWin(); return; } const cleanMap = map.trim().split("\n"); const matrixMap = cleanMap.map((row) => row.trim().split("")); matrixMap.forEach((row, rowP) => { row.forEach((col, colP) => { let posX = Math.round(elementsSize * (colP + 1)); let posY = Math.round(elementsSize * (rowP + 1)); if ( col == "O" && playerPosition.x == undefined && playerPosition.y == undefined ) { playerPosition.x = posX; playerPosition.y = posY; initialPosition.x = posX; initialPosition.y = posY; } if (col == "I") { pricePosition.x = posX; pricePosition.y = posY; } if (col == "X") { bombPosition.x = posX; bombPosition.y = posY; } if ( playerPosition.x == bombPosition.x && playerPosition.y == bombPosition.y ) { playerPosition.x = initialPosition.x; playerPosition.y = initialPosition.y; } context.fillText(emojis[col], posX, posY); }); }); console.log( playerPosition.x, playerPosition.y, pricePosition.x, pricePosition.y, initialPosition.x, initialPosition.y, level ); movePlayer(); } function movePlayer() { context.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y); } function delMap() { context.clearRect(0, 0, canvasSize, canvasSize); } function setCanvasSize() { canvasSize; if (window.innerWidth >= window.innerHeight) { canvasSize = Math.round(innerHeight * 0.8); } else { canvasSize = Math.round(innerWidth * 0.8); } canvas.setAttribute("width", canvasSize); canvas.setAttribute("height", canvasSize); elementsSize = Math.round(canvasSize * 0.1); startGame(); } window.addEventListener("keydown", moveByKeys); btnLeft.addEventListener("click", moveLeft); btnUp.addEventListener("click", moveUp); btnRight.addEventListener("click", moveRight); btnDown.addEventListener("click", moveDown); function moveByKeys(event) { const tecla = event.key; switch (tecla) { case "ArrowLeft": moveLeft(); break; case "ArrowUp": moveUp(); break; case "ArrowRight": moveRight(); break; case "ArrowDown": moveDown(); break; default: break; } } function moveLeft() { if (playerPosition.x > elementsSize) { playerPosition.x -= elementsSize; } startGame(); } function moveUp() { if (playerPosition.y > elementsSize) { playerPosition.y -= elementsSize; } startGame(); } function moveRight() { if (playerPosition.x < canvasSize) { playerPosition.x += elementsSize; } startGame(); } function moveDown() { if (playerPosition.y < canvasSize) { playerPosition.y += elementsSize; } startGame(); } function isPricePosition() { if ( pricePosition.x == playerPosition.x && pricePosition.y == playerPosition.y ) { level++; playerPosition.x = undefined; playerPosition.y = undefined; } } function gameWin() { console.log("TERMINASTE EL JUEGO!"); } // context.clearRect(50, 0, 100, 50); // context.font = "30px Cabin"; // context.fillStyle = "green"; // context.textAlign = "center"; // context.fillText("Fabio", 100, 100); // context.fillRect(100, 100, 1, 1);
Aquí mi solución:
const doorPosition = new Map(); doorPosition.set('x', undefined); doorPosition.set('y', undefined);
if (col === 'O') { if (!playerPosition.get('x') && !playerPosition.get('y')) { playerPosition.set('x', posx); playerPosition.set('y', posy); } doorPosition.set('x', posx); doorPosition.set('y', posy); }
function restartGame() { log('Perdiste!'); playerPosition.set('x', doorPosition.get('x')); playerPosition.set('y', doorPosition.get('y')); }
