Detectando colisiones fijas

Clase 12 de 24 • Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

Contenido del curso

Introducción

1
Programemos un juego con JavaScript
17:13 min

Canvas

Mapa del juego

Movimientos del jugador

Colisiones

Bonus: adictividad

Deploy

Próximos pasos

Tomar examen

Comentarios

Josue Cerron Tuesta

student•

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.

Juan Castro

teacher•

Exactamente :clap:

marco antonio

student•

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 😅

La ventaja que veo que tiene mi código es que convertí el map en un arreglo normal de toda la vida intente asemejarlo a lo que normalmente veo en ensamblador por lo que las colisiones no resultan tan engorrosas ni confusas o al menos eso creo 🤔

//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();}

Rubén Ernesto Aragón Gil

student•

wow, nice.

Oscar Gutiérrez

student•

Y pensar que a mi me salio el error de los decimales en el primer mapa 🤣

Gianluca Enzo Procopio

student•

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

Brandon Cortes Rivera

student•

jajaja yo lidie con lo mismo XD

Antonio Mora

student•

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 = [ ]

Carlos Nicolas Gonzalez Cabrera

student•

Yo si tuve ese error de los decimales

Hector Maluy Fernandez

student•

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;

Steeven Rocha

student•

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();
}

Manuel Araujo

student•

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!!!");
        }
    }

Santiago Forero Mendez

student•

ya se me rompió el jueguito y no encuentro que hice mal

Juan Pablo Vargas Ramirez

student•

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)

}>

Raúl Adolfo Sánchez Rodríguez

student•

Mi solución paso a paso

Pasos:

Raúl Adolfo Sánchez Rodríguez

student•

Lucas Frazzetta

student•

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);
	}
}

Luis Miguel Rodríguez

student•

Pude detectar las colisiones :) asi:

Crear Array

const bombPosition = [];

Llenarlo con cada una de las posiciones de la bombita

// Coordenadas de las bombas
      else if (col==='X'){
        bombPosition.push({

          bombPositionX : posX,
          bombPositionY : posY
          
        })

Recorrerlo

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!

Frandel Corporan Rodríguez

student•

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!!!')
    }
  })

Andre Huaman Yovera

student•

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();
  }
}

Matias Martel

student•

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)
     
 }

Carlos Andres Alavez Santiago

student•

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++;
        }
        
    }

}```

Edgar Oliveros

student•

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!!!!

//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();}

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;

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();
}

    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!!!");
        }
    }

<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)

}> 

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);
	}
}

function bombColision(){
  for (let i = 0; i < bombPosition.length; i++) { 
    if(playerPosition.x === bombPosition[i].bombPositionX && playerPosition.y === bombPosition[i].bombPositionY){
      console.log("boom");
    }
  }
}

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!!!')
    }
  })

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();
  }
}

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 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()
}

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);
}

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)
        } 
}

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)
     
 }

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++;
        }
        
    }

}```

Detectando colisiones fijas

Introducción

Programemos un juego con JavaScript

Canvas

¿Qué es canvas en JavaScript?

Tamaño del canvas y sus elementos

Canvas responsive

Mapa del juego

¿Qué es un array bidimensional?

Arreglos multidimensionales en JavaScript

Refactor del mapa de juego

Movimientos del jugador

Eventos y botones

Objeto playerPosition

Limpieza de movimientos

No te salgas del mapa

Colisiones