Victoria: subiendo de nivel
Contenido del curso
Canvas
Mapa del juego
Movimientos del jugador
Colisiones
Bonus: adictividad
Deploy
Próximos pasos
Victoria: subiendo de nivel
Contenido del curso
Victoria: subiendo de nivel
Orlando Rodriguez
Estudiante
Stivenson David Mejia Palacios
Estudiante
Lorenzo Peñalver
Estudiante
Abigail Nahomi Chávez Lozano
Estudiante
Tommy Toala Cox
Estudiante
Nestor Rios Garcia
Estudiante
Santiago Velásquez Serna
Estudiante
Natalia Gomez Perez
Estudiante
Oscar Gutiérrez
Estudiante
Gianluca Enzo Procopio
Estudiante
Juan Castro
ProfesorGianluca Enzo Procopio
Estudiante
Mauricio Combariza
Estudiante
Edgardo Luis Jimenez Nuñez
Estudiante
Manuel Andres García Vera
Estudiante
Frandel Corporan Rodríguez
Estudiante
Fabio Escobar
Estudiante
Manuel Araujo
Estudiante
Enrique Aguilera
Estudiante
César Augusto Cortés Labrada
Estudiante
marco antonio
Estudiante
Josue Cerron Tuesta
Estudiante
Cecilia Mansilla
Estudiante
Ricardo Collado
Estudiante
Ivo Zayas
Estudiante
Juan camilo piedrahita londoño
EstudianteLo 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.
Me parece una muy buena idea, el problema viene con las vidas, pero como solución es perfecta para mi!
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:
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(); }
Lo logramos
Asi vamos
!game
- Commit de la clase
¿Quieres jugar?
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 } });
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(); }
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:
Gian, veo que hace poco completaste el curso, ¿lograste solucionar este error?
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!!!
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 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(); }
++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}); }
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 }
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);
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(); }
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 }
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.
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
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')); }
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 :(
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.
a alguien más le pasó que cuando pasa de nivel el nivel siguiente se imprime pero el anterior no se borra hasta que te moves? no entiendo por que pasa, no tiene sentido que se superpongan creo
A mi me paso. Pero lo solucione colocando toFixed(3).