Detectando colisiones fijas
Contenido del curso
Canvas
Mapa del juego
Movimientos del jugador
Colisiones
Bonus: adictividad
Deploy
Próximos pasos
Detectando colisiones fijas
Detectando colisiones fijas
Contenido del curso
Josue Cerron Tuesta
Juan Castro
Profesor
marco antonio
Rubén Ernesto Aragón Gil
Oscar Gutiérrez
Gianluca Enzo Procopio
Brandon Cortes Rivera
Antonio Mora
Carlos Nicolas Gonzalez Cabrera
Hector Maluy Fernandez
Steeven Rocha
Manuel Araujo
Santiago Forero Mendez
Juan Pablo Vargas Ramirez
Raúl Adolfo Sánchez Rodríguez
Raúl Adolfo Sánchez Rodríguez
Lucas Frazzetta
Luis Miguel Rodríguez
Frandel Corporan Rodríguez
Andre Huaman Yovera
Matias Martel
Carlos Andres Alavez Santiago
Edgar Oliveros
Creo que se debería colocar la lógica en las funciones de moveUp, moveDown, etc. porque ahí se esta modificando la posición del jugador.
Exactamente :clap:
lo de las colisiones fue muy fácil solo tuve que comparar el movimiento del jugador con el índex del mapa sin sumar canvasSize ni comparar X ni Y y pues ya 😅
//contect const canvas = document.querySelector('#game'); const btnArriba = document.querySelector('#arriba'); const btnAbajo = document.querySelector('#abajo'); const btnDer = document.querySelector('#derecha'); const btnIzq = document.querySelector('#izquierda'); const juego = canvas.getContext('2d'); //signals: window.addEventListener('load', resizeEvent); window.addEventListener('resize', resizeEvent); let posJugador = undefined; let mapa = Array(); let nivel = 0; let prePosJugador = undefined; let celda_t = 0; let nivel_actual = undefined; let puntoDePartida = Number(0); let canvas_t = 0; var actualizado = Boolean(false); let vidas = Array(); function resizeEvent(){ actualizado = false; canvas_t = (window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight) *.75 ; canvas.setAttribute('width', canvas_t); canvas.setAttribute('height',canvas_t); celda_t = canvas_t / 10; juego.textAlign='end'; juego.font = celda_t - celda_t / 10 +'px arial'; update();} function update(){ if(vidas.length == 3 && actualizado) return; cargarMapa(); clear(); paintEvent(); paintEventPlayer(); paintEventGameOver(); actualizado = true;} function cargarMapa(){ if(nivel_actual == nivel) return; nivel_actual = nivel; mapa = map[nivel].match(/[IOX-]/g);} function clear(){ if(!actualizado) { juego.clearRect(0,0, canvas_t, canvas_t); return;} if(posJugador == prePosJugador) return; clearRect(posJugador); clearRect(prePosJugador);} function clearRect(indice){ const x = posX(indice ) - celda_t / 10; const y = posY(indice ) + celda_t / 5; juego.clearRect(x - 1 ,y , - celda_t, - (celda_t + 1));} function posY(indice){ return (~~(indice/10) + 1) * celda_t - celda_t / 5; } function posX(indice){ return (indice - (~~(indice/10) * 10) + 1) * celda_t + celda_t / 10;} function paintEvent(){ if(!actualizado) mapa.forEach((char, idx) => { if(char == 'O' && posJugador == undefined) puntoDePartida = posJugador = idx; juego.fillText(emojis[char], posX(idx), posY(idx) );});} function paintEventPlayer(){ if(mapa[posJugador] == 'I') { nivel = nivel + 1 <= 2 ? ++nivel : 0; posJugador = prePosJugador = undefined; actualizado = false; update(); return;} if(posJugador != undefined && prePosJugador != posJugador){ juego.fillText(emojis[mapa[prePosJugador]],posX(prePosJugador),posY(prePosJugador)); if(collisionEvent()) juego.fillText(emojis['PLAYER'], posX(posJugador),posY(posJugador)); else paintEventGameOver();}} function collisionEvent(){ if(vidas.length < 3 && mapa[posJugador] == 'X'){ vidas.push(posJugador); juego.fillText(emojis['BOMB_COLLISION'],posX(posJugador),posY(posJugador)); posJugador = puntoDePartida;} if(vidas.length == 3) return false; /*juego terminado*/ return true; /*continuar con el juego*/} function paintEventGameOver(){ juego.textAlign='end'; vidas.forEach((idx) =>{ clearRect(idx); juego.fillText(emojis['BOMB_COLLISION'],posX(idx),posY(idx));}); if(vidas.length < 3) return; const fuente = celda_t - celda_t / 10 ; const media = canvas_t / 2; juego.fillStyle = '#000000'; juego.fillRect(0, media - (fuente /2), canvas_t, fuente); juego.textAlign = 'center'; juego.fillStyle = '#ff5555'; juego.fillText('Game Over', media, media + fuente/3);} //signals: window.addEventListener('keydown',keyMov); btnArriba.addEventListener('click', movArriba); btnAbajo.addEventListener('click', movAbajo); btnDer.addEventListener('click', movDer); btnIzq.addEventListener('click', movIzq); //slots: function keyMov(event){ switch(event.keyCode){ case 37: movIzq(); break;//izquierda case 38: movArriba(); break;//arriba case 39: movDer(); break; //derecha case 40: movAbajo(); break;//abajo default: break;}} function movArriba(){ prePosJugador = posJugador; posJugador -= 10; if(posJugador < 0) posJugador = prePosJugador; update();} function movAbajo(){ prePosJugador = posJugador; posJugador += 10; if(posJugador >= 100) posJugador = prePosJugador; update();} function movDer(){ prePosJugador = posJugador; const pered = (~~(posJugador / 10)) *10 + 10; ++posJugador; if(posJugador >= pered) posJugador = prePosJugador; update();} function movIzq(){ prePosJugador = posJugador; const pered = ~~(posJugador /10) * 10; --posJugador; if(posJugador < pered) posJugador = prePosJugador; update();}
wow, nice.
Y pensar que a mi me salio el error de los decimales en el primer mapa 🤣
Pausé un segundo la clase porque no me detectaba la colisión y era por los decimales (yo pensaba que había hecho algo mal). Puse play y dijo que ese era el problema jaja
jajaja yo lidie con lo mismo XD
Hola, les comparto mi solución al desafío.
Creo una variable global para almacenar la posición de todas las bombas let bombs = [ ];
En la función startGame creo el siguiente condicional para agregar las posiciones de las bombas.
Cree una función para verificar si la posición del jugador coincide con alguna bomba
Ahora ejecuto esa función cada vez que se mueve el jugador.
Por último, en la función setCanvasSize reasigno la variable bombs = [ ]
Yo si tuve ese error de los decimales
Una solución que se me ocurre es redondear las coordenadas a dos decimales.
const posX = parseFloat((elementSize * (indexColumn + 1)).toFixed(2)); const posY = parseFloat((elementSize * (indexRow + 1)).toFixed(2)); playerPosition.x = posX; playerPosition.y = posY; giftPosition.x = posX; giftPosition.y = posY;
Para detectar la colisión, cambiar de nivel y dibujar al jugador cree una función mapPlayer :)
Juego boom
const canvas = document.querySelector("#game"); const game = canvas.getContext("2d"); const up = document.getElementById("up"); const down = document.getElementById("down"); const left = document.getElementById("left"); const right = document.getElementById("right"); let leveltoplay = 0; let moveVertical=1; let moveHorizontal=1; const playerPosition = {}; window.addEventListener("load",setCanvasSize); window.addEventListener("resize",setCanvasSize); // addEventLister movimiento del jugador up.addEventListener("click",moveWithButton); down.addEventListener("click",moveWithButton); left.addEventListener("click",moveWithButton); right.addEventListener("click",moveWithButton); window.addEventListener("keyup",keyDetection); let canvassize; function setCanvasSize(){ if( window.innerWidth > window.innerHeight ){ canvassize = window.innerHeight*0.70; }else{ canvassize = window.innerWidth*0.60; } canvas.setAttribute("width", canvassize); canvas.setAttribute("height", canvassize); startGame(); } function startGame(){ // Espera que se cargue la página // game.fillRect(0,50,100,100); // game.clearRect(50,50,100,100); // game.fillStyle ="Purple"; // game.font = "25px Verdana"; // game.textAlign ="center"; //start, end, left, center, right // game.fillText("Platzi",50,50,200); // const valueheight = window.innerHeight; // height value of windows // const valuewidth = window.innerWidth; // width value of windows /* other form to fill the map const valuemaps = Object.keys(emojis); console.log(valuemaps); let count1 = 1; let count2 = 1; for (let i = 0; i <maps[0].length; i++) { for (let j = 0; j < valuemaps.length; j++) { if(maps[0][i] == valuemaps[j]){ game.fillText(emojis[valuemaps[j]] ,elementSize * count1 , elementSize * count2); if(count1 == 10){ count1 = 1; count2++; }else{ count1++; } } } if(count2 > 10){ count2 = 1 ; } } console.log({count1,count2}) */ const elementSize = canvassize/10; console.log({elementSize,game}); game.textAlign = "end"; game.textBaseline = "bottom"; // align text en forma vertical 'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom' game.font = String (elementSize -10) + "px Arial" ; renderMap(leveltoplay); } function renderMap(level){ game.clearRect(0,0,canvas.width,canvas.height); const filterMap = maps[level].trim().split("\n"); const maprender = filterMap.map(function(key){ return key.trim().split("")}); mapObjetcs(maprender); } function moveWithButton(event){ if(event.path[0].id == "up"){ moveVertical--; }else if(event.path[0].id == "down"){ moveVertical++; }else if(event.path[0].id == "left"){ moveHorizontal--; }else if(event.path[0].id == "right"){ moveHorizontal++; } condicionalPosition(); console.log({moveHorizontal,moveVertical}); movePlayer(); } function keyDetection(event){ const keyButtonMove = [38,37,39,40]; keyButtonMove.forEach(function(key){ if(event.keyCode == key){ if(key == 38){ moveVertical--; }else if(key == 40){ moveVertical++; }else if(key == 37){ moveHorizontal--; }else if(key == 39){ moveHorizontal++; } condicionalPosition(); console.log({moveHorizontal,moveVertical}); movePlayer(); } }); } function condicionalPosition(){ if(moveVertical>10){ moveVertical =10; }else if(moveVertical < 1){ moveVertical =1; } if(moveHorizontal>10){ moveHorizontal =10; }else if(moveHorizontal < 1){ moveHorizontal =1; } } function movePlayer(){ renderMap(leveltoplay); // game.fillText(emojis['PLAYER'] ,elementSize * moveHorizontal , elementSize * moveVertical); } function mapObjetcs(maprender){ const elementSize = canvassize/10; for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { game.fillText(emojis[maprender[j][i]] ,elementSize * (i+1) , elementSize * (j+1)); } } mapPlayer(elementSize,maprender); } function mapPlayer(elementSize,maprender){ const valuegif= []; for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { if(maprender[j][i]=='O'){ if (!playerPosition["y"]) { playerPosition["y"] = j + 1; moveVertical=j+1; } else { playerPosition["y"] = moveVertical; } if(!playerPosition["x"]){ playerPosition["x"] = i + 1; moveHorizontal = i+1; }else{ playerPosition["x"] = moveHorizontal; } game.fillText(emojis['PLAYER'] ,elementSize * playerPosition.x , elementSize * playerPosition.y); } if(maprender[j][i]=='I'){ valuegif.push(i+1); valuegif.push(j+1); } } } console.log({valuegif,playerPosition}); if(maprender[playerPosition.y-1][playerPosition.x-1] == "X"){ // game.fillText(emojis['PLAYER'] ,elementSize * moveHorizontal , elementSize * moveVertical); setTimeout(() =>{yourDie()},200); } if((valuegif[1])==playerPosition.y && (valuegif[0])==playerPosition.x){ leveltoplay++; if(leveltoplay>2){leveltoplay=0;} startGame(); } } function yourDie(){ window.confirm("Moriste"); playerPosition.x = undefined; playerPosition.y = undefined; startGame(); }
Creo una variable "bombas" que es una rray vacío:
var bombas = [];
Complemento el condicional que guarda las posiciones con el siguiente código, para que agregue cada par de coordenadas en el array bombas cuando col coincida con X:
else if (col == 'X') { bombas.push(posX, posY); }
Dentro de la función movePlayer, agrego el siguiente ciclo for que inicia en 0 y aumenta 2 unidades con cada iteración, para asegurarme siempre mirar una coordenada de X de una bomba. Dentro del ciclo for, un condicional que compare la coordenada x de la bomba con la coordenada x del player, así como la coordenada y de la bomba (cuyo indice siempre será i+1) con la coordenada y del player, y en caso de ser ambos pares iguales, imprima un mensaje en consola:
for(i=0; i < bombas.length; i=i+2) { if(bombas[i].toFixed(3) == playerPosition.x.toFixed(3) && bombas[i+1].toFixed(3) == playerPosition.y.toFixed(3)) { console.log("Explosión!!!"); } }
ya se me rompió el jueguito y no encuentro que hice mal
Yo usé Math.trunc para el problema de los decimales
<function movePlayer(){ const giftCollsionX = Math.trunc(playerPosition.x) == Math.trunc(giftPosition.x); const giftCollsionY = Math.trunc(playerPosition.y) == Math.trunc(giftPosition.y); const giftCollision = giftCollsionX && giftCollsionY if(giftCollision){ alert("Ganaste") } game.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y) }>
Mi solución paso a paso
Yo creé una variable 'bombArr' que se inicializa en la función startGame() como un arreglo vacío y cuando se pinta el mapa agrega por cada bomba un objeto con la posición en 'X' y 'Y' de la misma.
if (col == 'X') { bombArr.push({ x: posX, y: posY }); }
Entonces se valida si al mover el personaje algún objeto del arreglo coincide en X y en Y con el personaje.
function movePlayer() { const giftCollisionX = Math.trunc(playerPosition.x) == Math.trunc(giftPosition.x); const giftCollisionY = Math.trunc(playerPosition.y) == Math.trunc(giftPosition.y); const bombCollisionX = bombArr.find(bomb => Math.trunc(bomb.x) == Math.trunc(playerPosition.x)); const bombCollisionY = bombArr.find(bomb => Math.trunc(bomb.y) == Math.trunc(playerPosition.y)); if (giftCollisionX && giftCollisionY) { console.log('ganaste!'); } else if (bombCollisionX && bombCollisionY) { console.log('perdiste!'); } else { game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y); } }
Pude detectar las colisiones :) asi:
const bombPosition = [];
// Coordenadas de las bombas else if (col==='X'){ bombPosition.push({ bombPositionX : posX, bombPositionY : posY })
function bombColision(){ for (let i = 0; i < bombPosition.length; i++) { if(playerPosition.x === bombPosition[i].bombPositionX && playerPosition.y === bombPosition[i].bombPositionY){ console.log("boom"); } } }
Pero al momento de que choca con las bombas me imprime varios "BOOM"
Helpp!
Mi solucion fue hacer push de objetos con las coordenadas x,y por cada bomba hacia a un array para luego con un forEach en la funcion movePlayer recorrer dicho array a la vez que se comparan las coordenadas con las del jugador hasta obtener un match.
const obstacleCollision = obstacles.forEach(obstacle => { let obstaclePosX = obstacle.x.toFixed() == playerPosition.x.toFixed() let obstaclesPosY = obstacle.y.toFixed() == playerPosition.y.toFixed() if(obstaclePosX && obstaclesPosY){ console.log('BOOOOOMMMMM!!!') } })
game.js
const canvas = document.querySelector("#game"); const game = canvas.getContext("2d"); window.addEventListener("DOMContentLoaded", startGame); window.addEventListener("resize", setCanvasSize); // Obtener referencias a los botones const upButton = document.getElementById("up"); const leftButton = document.getElementById("left"); const rightButton = document.getElementById("right"); const downButton = document.getElementById("down"); // Agregar manejadores de eventos a los botones upButton.addEventListener("click", () => movePlayer("up")); leftButton.addEventListener("click", () => movePlayer("left")); rightButton.addEventListener("click", () => movePlayer("right")); downButton.addEventListener("click", () => movePlayer("down")); document.addEventListener("keydown", handleKeyDown); let playerPosition = { x: undefined, y: undefined, }; let giftPosition = { x: undefined, y: undefined, }; let bombPosition = []; let startMap = 0; function handleKeyDown(event) { const key = event.key.toLowerCase(); let direction; switch (key) { case "arrowup": case "w": direction = "up"; break; case "arrowleft": case "a": direction = "left"; break; case "arrowright": case "d": direction = "right"; break; case "arrowdown": case "s": direction = "down"; break; default: return; } // Realizar alguna acción basada en la dirección detectada // Por ejemplo, llamar a una función para mover al jugador en esa dirección movePlayer(direction); } let elementsSize; let map; function startGame() { parseMap(); setCanvasSize(); } function movePlayer(direction) { // Realizar acciones según la dirección recibida switch (direction) { case "up": if (!(playerPosition.y > 0)) { return; // No se cumple la condición, se sale de la función sin hacer nada } playerPosition.y -= 1; // Lógica para mover al jugador hacia arriba break; case "left": if (!(playerPosition.x > 0)) { return; // No se cumple la condición, se sale de la función sin hacer nada } playerPosition.x -= 1; // Lógica para mover al jugador hacia la izquierda break; case "right": if (!(playerPosition.x < 9)) { return; // No se cumple la condición, se sale de la función sin hacer nada } playerPosition.x += 1; // Lógica para mover al jugador hacia la derecha break; case "down": if (!(playerPosition.y < 9)) { return; // No se cumple la condición, se sale de la función sin hacer nada } playerPosition.y += 1; // Lógica para mover al jugador hacia abajo break; default: return; } if ( giftPosition.x === playerPosition.x && giftPosition.y === playerPosition.y ) { startMap++; bombPosition = []; startGame(); return; } else if ( bombPosition.some( (bombItem) => bombItem.x === playerPosition.x && bombItem.y === playerPosition.y ) ) { game.fillText( emojis.BOMB_COLLISION, playerPosition.x * elementsSize, (playerPosition.y + 1) * elementsSize ); playerPosition = { x: undefined, y: undefined, }; setTimeout(function () { startGame(); }, 600); return; } // Actualizar el juego, dibujar el mapa actualizado, etc. drawMap(); } function setCanvasSize() { const canvasSize = Math.min(window.innerHeight, window.innerWidth) * 0.75; canvas.width = canvasSize; canvas.height = canvasSize; elementsSize = Math.floor(canvasSize / 10 - 1); game.font = `${elementsSize}px Verdana`; drawMap(); } function drawMap() { game.clearRect(0, 0, canvas.width, canvas.height); map.forEach((row, y) => { row.forEach((emoji, x) => { game.fillText(emoji, x * elementsSize, (y + 1) * elementsSize); if (emoji === "🚪") { if (playerPosition.x === undefined && playerPosition.y === undefined) { playerPosition = { x, y }; } // Utiliza object destructuring para simplificar la asignación de coordenadas } if (emoji === "🎁") { giftPosition = { x, y }; } if (emoji === "💣") { bombPosition.push({ x, y }); } }); }); game.fillText( emojis.PLAYER, playerPosition.x * elementsSize, (playerPosition.y + 1) * elementsSize ); // Utiliza la notación de puntos para acceder a las propiedades del objeto emojis } function parseMap() { try { const mapString = maps[startMap].trim(); const lines = mapString.split("\n").map((line) => line.trim()); map = lines.map((line) => line.split("").map((symbol) => emojis[symbol])); } catch (error) { startMap = 0; playerPosition = { x: undefined, y: undefined, }; parseMap(); } }
Detectar las colisiones no me resulto dificil lo que si se me complico fue como alojar la ubicacion de las bombas por nivel ya que me generaban duplicados para eso modifique el codigo de esta forma
Variables con la que trabajaremos
const canvas = document.querySelector('#game'); const game = canvas.getContext('2d'); const buttons = { up: document.querySelector('#up'), left: document.querySelector('#left'), right: document.querySelector('#right'), down: document.querySelector('#down') }; let canvasSize; let elementsSize; let lvl = 0; //Utilizamos genX y genY para corregir el problema que el emoji del jugador no sea responsive y provoque problemas de coordenadas y hacemos que el jugador se ubique en medio de la posicion (ej. 0,5) y se desplace en un entorno de 10x10 // x e y siguen siendo las coordenadas contextuadas con el resto de los elementos para detectar colisiones const playerPosition = { x: undefined, y: undefined, genX: undefined, genY: undefined, }; // Utilizaremos esta constante para ubicar la locacion de la meta en cada uno de los mapas const giftPosition = { x: undefined, y: undefined, }; // Sera la constante donde alojaremos las coordenadas de cada una de las bombas de cada uno de los mapas const bombsPosition = { } // Espera a que cargue el contenido html de la pagina antes de lanzar la funcion window.addEventListener('load', resizeCanvas); window.addEventListener('resize', resizeCanvas);
Function de start game
function startGame (lvl) { game.font = elementsSize + 'px Verdana'; //Situamos los elementos en el medio de la casilla tanto horizontal como verticalmente game.textAlign = "center"; game.textBaseline = 'middle'; const map = maps[lvl] //Agarramos el mapa del array de mapas y le quitamos los espacios en blanco al inicio y al final con trim y luego con split creamos un arreglo donde el inicio y el final de cada elemento se marca por los saltos de linea '\n' const mapRows = map.trim().split('\n'); //Del array resultante usamos map para recorrer cada uno de sus elementos (rows) limpiando los espacios en blanco con trim y luego separandolos por "filas" con split const mapRowCols = mapRows.map(row => row.trim().split('')); game.clearRect(0,0,canvasSize, canvasSize); //Recorremos con for each el array bidimensional a partir del string del map y recibimos dos parametros su valor y su indice mapRowCols.forEach((row, rowIndex) => { //Recorremos las filas iterando sobre cada columna y recibimos su valor y su indice row.forEach((col, colIndex) => { //Declaramos que valor tendra el emoji en esa columna const emoji = emojis[col]; //Definimos el posicionamiento que tendra en horizontal y vertical esa columna al alinearse en el canvas (ej: elementsSize vale 60 el elemento se insertara en el medio que seria 30) const posX = elementsSize * (colIndex + 1/2); const posY = elementsSize * (rowIndex + 1/2); //Solo le damos coordenadas a la posicion del jugador si aun no fueron dadas (si no fue definida en x no hace falta verificar que no haya sido definida en y ya que siempre se definen las dos) if (col == 'O') { if (!playerPosition.x && !playerPosition.y) { playerPosition.genX = posX / elementsSize playerPosition.genY = posY / elementsSize playerPosition.x = posX playerPosition.y = posY }} // Localizamos la ubicacion de la meta para comprobar colision posteriormente else if (col == 'I') { giftPosition.x = posX giftPosition.y = posY } //Verificamos si el objeto donde se alojan las coordenadas de las bombas ya cuenta con una propiedad con el valor del nivel y si no la tiene la creamos como un array vacio else if (col == 'X') { if (!bombsPosition.hasOwnProperty(lvl)) { bombsPosition[lvl] = [] } //Verificamos que las coordenadas no hayan sido alojadas aun y si no las insertamos en el array de arriba const coordExists = bombsPosition[lvl].some(coord => coord[0] === posX && coord[1] === posY); if (!coordExists) { bombsPosition[lvl].push([posX, posY]); } } //Llenamos en nuestro canvas con cada iteracion game.fillText(emoji, posX, posY) }); }); movePlayer() }
Funciones de movimiento
function movePlayer() { // Ubicamos al jugador en la cuadrilla obteniendo su ubicacion por medio de las variables genX/Y game.fillText(emojis['PLAYER'], playerPosition.genX * elementsSize, playerPosition.genY * elementsSize); // Corregimos las coordenadas x e y del jugador para que coincidan con su ubicacion actual playerPosition.x = ((playerPosition.genX) * elementsSize); playerPosition.y = ((playerPosition.genY) * elementsSize); // Detectamos la colision con las bombas y la meta bombsDetection() giftDetection() } window.addEventListener('keydown', moveByKeys); buttons.up.addEventListener('click', moveUp); buttons.left.addEventListener('click', moveLeft); buttons.right.addEventListener('click', moveRight); buttons.down.addEventListener('click', moveDown); 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() { playerPosition.genY -= 1; //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada y if (playerPosition.genY < 0) { playerPosition.genY = 0.5; } startGame(lvl); } function moveLeft() { playerPosition.genX -= 1; //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada x if (playerPosition.genX < 0) { playerPosition.genX = 0.5; } startGame(lvl); } function moveRight() { playerPosition.genX += 1; //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada x if (playerPosition.genX > 10) { playerPosition.genX = 9.5; } startGame(lvl); } function moveDown() { playerPosition.genY += 1; //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada y if (playerPosition.genY > 10) { playerPosition.genY = 9.5; } startGame(lvl); }
Funciones de deteccion
function bombsDetection () { //Buscamos una coincidencia en el array contenido en la propiedad lvl(ej. 0) y en caso de que la posicion del jugador coincida con alguna de las bombas reseteamos su posicion al inicio del mapa bombsDetected = bombsPosition[lvl].find(bomb => bomb[0] == playerPosition.x && bomb[1] == playerPosition.y) if (bombsDetected) { console.log("collision detected") playerPosition.x = undefined; playerPosition.y = undefined; startGame(lvl) } } function giftDetection () { //Verificamos si la posicion del jugador y la meta son identicas y si lo son lo desplazamos al siguiente nivel, si llegamos al ultimo nivel volvemos al primero if (playerPosition.x == giftPosition.x && playerPosition.y == giftPosition.y) { console.log("gift detected") if (lvl < (maps.length - 1)) { lvl += 1; } else { playerPosition.x = undefined; playerPosition.y = undefined; lvl = 0 } startGame(lvl) } }
Funcion de resize
function resizeCanvas () { windowHeight = window.innerHeight * 0.8 windowWidth = window.innerWidth * 0.8 //Dependiendo del tamaño de la pantalla, va a colocar el tamaño cuadrado del canvas //Al dividir entre 10 y luego aproximar el valor a un entero garantiza que el canvas será un entero múltiplo de 10. Finalmente se multiplica la expresión por 10 para obtener el dato real del canvas //Con Math.ceil nos ahorramos el problema de los decimales if (window.innerHeight > window.innerWidth) { if ((windowWidth % 10) !== 0) { canvasSize = Math.ceil(windowWidth / 10) * 10; } else { canvasSize = windowWidth; }} else { if ((windowHeight % 10) !== 0) { canvasSize = Math.ceil(windowHeight / 10) * 10; } else { canvasSize = windowHeight; } } canvas.setAttribute('width', canvasSize); canvas.setAttribute('height', canvasSize); elementsSize = (canvasSize / 10); startGame(lvl) }
Yo cambie las variables del maps a let y agregue un indeci
let indexMap = 0; let map; let mapRows; let mapCols;
Cree una función para convertir el mapa siguiente
function convertMap(){ map = maps[indexMap]; mapRows = map.trim().split('\n'); mapCols = mapRows.map(row=>row.trim().split('')); }
A la posición del jugador ingresé una bandera i, esta se resetea al iniciar el juego o cuando colisiona con una bomba
const playerPosition={ x: undefined, y: undefined, i: 0, };
Y cada movimiento de jugador agregué lo siguiente
function moveUp(){ if(playerPosition.y>elementSize){ playerPosition.y-=elementSize; detectarObjeto(); } setCanvasSize(); } function moveLeft(){ if(playerPosition.x > elementSize+1){ playerPosition.x -= elementSize; detectarObjeto(); } setCanvasSize(); } function moveRight(){ if(playerPosition.x<elementSize*10){ playerPosition.x+=elementSize; detectarObjeto(); } setCanvasSize(); } function moveDown(){ if(playerPosition.y < elementSize*10){ playerPosition.y+=elementSize; detectarObjeto(); } setCanvasSize(); } function detectarObjeto(){ posX = Math.round(playerPosition.x/elementSize)-1; posY = Math.round(playerPosition.y/elementSize)-1; if(mapCols[posY][posX]==='X'){ playerPosition.i=0; } else if(mapCols[posY][posX]==='I'){ if(indexMap< (maps.length-1)){ indexMap++; } } }```
yo me encontre con el mismo error, y tuve pausado el video, cuando volvi a poner el video lo entendi todo jaja, lo unico que no me queda claro es por que tuve que cambiar las validaciones en los movimientos, pero bueno, ahi voy entendiendo de a poco, muy bueno!!!!