No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Limpieza de movimientos

10/24
Recursos

Aportes 48

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Y yo como loco haciendo querer funcionar el Clearect jaja

Aqu铆 mi soluci贸n para que la calaverita no se salga del canvas:

psdt: Lo del playerPosition.get() es por que lo hice con el objeto Map 馃槈.

function moveUp() {
    let move = playerPosition.get('y') - elementSize;
    (move < 20)
        ? playerPosition.set('y', playerPosition.get('y'))
        : playerPosition.set('y', move);
    startGame();
    log({ playerPosition });
}

function moveDown() {
    let move = playerPosition.get('y') + elementSize;
    (move > canvasSize)
        ? playerPosition.set('y', playerPosition.get('y'))
        : playerPosition.set('y', move);
    startGame();
    log({ playerPosition });
    // log('Me quiero mover hacia abajo');
}

function moveLeft() {
    let move = playerPosition.get('x') - elementSize;
    (move < 20)
        ? playerPosition.set('x', playerPosition.get('x'))
        : playerPosition.set('x', move);
    startGame();
    log({ playerPosition });
    // log('Me quiero mover hacia la izquierda');
}

function moveRight() {
    let move = playerPosition.get('x') + elementSize;
    (move > canvasSize)
        ? playerPosition.set('x', playerPosition.get('x'))
        : playerPosition.set('x', move);
    startGame();
    log({ playerPosition });
    // log('Me quiero mover hacia la derecha');
}

Esta es la forma que utilic茅 despu茅s de unos ajustes; dentro de la funci贸n startGame():

    if ((playerPos.x - elementSize) < 0){
        buttonRIGHT();
    } else if (playerPos.x > canvasSize + 1) {
        buttonLEFT();
    } else if (playerPos.y > (canvasSize + 1)) {
        buttonUP();
    } else if ((playerPos.y - elementSize) < 0) {
        buttonDOWN();
    }

Esta es mi soluci贸n para que que el jugador no se salga del mapa

function moveUp() {
  if (playerPosition.y <= elementsSize + 1) {
    console.log("no se mueve", playerPosition.y, elementsSize);
  } else {
    console.log("se mueve", playerPosition.y, elementsSize);
    playerPosition.y -= elementsSize;
    startGame();
  }
  console.log("Arriba");
}

function moveLeft() {
  if (playerPosition.x <= elementsSize + 1) {
    console.log("no se mueve",);
  } else{
    console.log("se mueve");
    playerPosition.x -= elementsSize;
    startGame();
  }
  console.log("Izquierda", playerPosition.x, elementsSize, canvasSize);
}

function moveRight() {
  if (playerPosition.x >= canvasSize) {
    console.log("no se mueve");
  } else {
    console.log("se mueve");
    playerPosition.x += elementsSize;
    startGame();
  }

  console.log("Derecha",playerPosition.x,elementsSize, canvasSize);
}

function moveDown() {
  if (playerPosition.y >= canvasSize) {
    console.log("no se mueve", playerPosition.y, canvasSize);
  } else {
    console.log("se mueve", playerPosition.y, canvasSize);
    playerPosition.y += elementsSize;
    startGame();
  }
  console.log("Abajo");
}
 

Lo solucione de esta forma. Ya que no podemos garantizar las medidas del canvas y no siempre dar谩 0 exacto. O llegar al borde exacto.

funcion ARRIBA
if(playerPosition.y>elementsSize)playerPosition.y -= elementsSize;

funcion IZQUIERDA
if(playerPosition.x>2*elementsSize)playerPosition.x -= elementsSize;

funcion DERECHA
if(playerPosition.x<canvasSize)playerPosition.x += elementsSize;

funcion ABAJO
if(playerPosition.y<canvasSize-elementsSize)playerPosition.y += elementsSize;

y con eso no se sale de los bordes

Esta es mi soluci贸n para que el player no se salga del canvas, pero deseando ver la soluci贸n del profe y del resto de compa帽eros:

  • Creo una funci贸n que compruebe si el playerPosition est谩 dentro del canvas:
function withinTheMargin() {
  if (
    playerPosition.x >= elementSize &&
    playerPosition.x <= canvasSize &&
    playerPosition.y >= elementSize &&
    playerPosition.y <= canvasSize
  ) {
    return true;
  }
}
  • si est谩 dentro del canvas muevo el player:
function moveUp() {
  playerPosition.y -= elementSize;
  if (withinTheMargin()) {
    startGame();
  } else {
    playerPosition.y += elementSize;
  }
}

esta fue mi soluci贸n para limitar el movimiento del jugador:

function moveUp(){
    if(playerPosicion.y > 2*elementSize){
        

        playerPosicion.y = (playerPosicion.y - elementSize) 
        
        movePlayer()
    }
    
}
function moveLeft(){
    if(playerPosicion.x > 2*elementSize){
        

        playerPosicion.x = (playerPosicion.x - elementSize) 
        
        movePlayer()
    }
}
function moveRight(){
    if(playerPosicion.x < 9*elementSize){
        

        playerPosicion.x = (playerPosicion.x + elementSize) 
        
        movePlayer()
    }
}
function moveDown(){
    if(playerPosicion.y < 10*elementSize){
        

        playerPosicion.y = (playerPosicion.y + elementSize) 
        
        movePlayer()
    }
}

Me paso lo mismo que en el minuto 5:20, tarde como 15 minutos en entender por qu茅 no pasaba nada jaja.

As铆 lo solucion茅


function mapLimit() {
    const canvasLimit = elementSize* 10
    if (playerPosition.x >= canvasLimit) {
        playerPosition.x -= elementSize
    }
    if (playerPosition.x < 0) {
        playerPosition.x += elementSize
    }
    if (playerPosition.y >= canvasLimit) {
        playerPosition.y -= elementSize
    }
    if (playerPosition.y < 0) {
        playerPosition.y += elementSize
    }
}

La llamar铆a despu茅s de detectar el movimiento

function movePlayer(direction) {
    moves++
    switch (direction) {
        case 'moveUp':
            playerPosition.y -= elementSize
            break;
        case 'moveLeft':
            playerPosition.x -= elementSize
            break;
        case 'moveRight':
            playerPosition.x += elementSize
            break;
        case 'moveDown':
            playerPosition.y += elementSize
            break;
        default:
            break;
    }
    mapLimit()
    printMap()
    game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y)
}

Mi soluci贸n








Mi soluci贸n para el resto de movimientos: DERECHA, IZQUIERDA y ABAJO










Reto de clase: Limitar el movimiento hacia ARRIBA









Reto de clase: Limitar el movimiento hacia la IZQUIERDA








Reto de clase: Limitar el movimiento hacia la DERECHA

_








Reto de clase: Limitar el movimiento hacia ABAJO








hace un clases atras estaba pensando en eso, entrar en el ciclo for y hacer los re renders, aunque me parecia complicado podia ocupar mucha memoria.

mi soluci贸n fu colocar un condicional que no sobre pasara los limites del mapa a cada movimiento aunque el 煤nico movimiento que no limita tan exactamente es hacia la izquierda

function moverArriba(){
    console.log('moverarriba');
    if (playerPosition.y >= elementSize){
        playerPosition.y -= elementSize 
        startGame();
    }
    

}
function moverAbajo(){
    console.log('moverabajo');
    if (playerPosition.y <= (canvasSize-elementSize)){
        playerPosition.y += elementSize 
        startGame();
    }
}
function moverDerecha(){
    console.log('moverderecha');
    if (playerPosition.x <= (canvasSize-elementSize)){
        playerPosition.x += (elementSize-1) 
        startGame();
    }
}
function moverIzquierda(){
    console.log('moverizquierda');
    if (playerPosition.x >= elementSize){
        playerPosition.x -= elementSize 
        startGame();
    }
}

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

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) {
        playerPosition.y -= 1;
        // L贸gica para mover al jugador hacia arriba
      }
      break;
    case "left":
      if (playerPosition.x > 0) {
        playerPosition.x -= 1;
        // L贸gica para mover al jugador hacia la izquierda
      }
      break;
    case "right":
      if (playerPosition.x < 9) {
        playerPosition.x += 1;
        // L贸gica para mover al jugador hacia la derecha
      }
      break;
    case "down":
      if (playerPosition.y < 9) {
        playerPosition.y += 1;
        // L贸gica para mover al jugador hacia abajo
      }
      break;
    default:
      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

        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() {
  const mapString = maps[0].trim();
  const lines = mapString.split("\n").map((line) => line.trim());

  map = lines.map((line) => line.split("").map((symbol) => emojis[symbol]));
}

Mi soluci贸n fue bastante sencilla:

if(playerPosition.x <canvasSize/10){
    return null
  }
  else{

    playerPosition.x -= elementSize
  }

Se puede hacer una condici贸n que no haga nada si se cumple y caso contrario ejecute el movimiento.

Mi soluci贸n

function move_up(){
    if(player_position.y > elements_size + 1){
        player_position.y -= elements_size;
        calculate_canvas_size();
    }
    console.log(player_position, canvas_size, elements_size);
}
function move_left(){
    if(player_position.x +1 > elements_size){
        player_position.x -= elements_size;
        calculate_canvas_size();
    }
    console.log(player_position, canvas_size, elements_size);
    
}
function move_right(){
    if(player_position.x < canvas_size*0.8){
        player_position.x += elements_size;
        calculate_canvas_size();
    }
    console.log(player_position, canvas_size * 0.8, elements_size);
}
function move_down(){
    if(player_position.y < canvas_size * 0.9){
        player_position.y += elements_size;
        calculate_canvas_size();
    }
    console.log(player_position, canvas_size, elements_size);
}

Reto cumplido, solo agregue unas condicionales a cada direcci+on de movimiento.

Yo SI pude usando clearRect XD 鈥 Esta es mi soluci贸n, es bastante diferente, espero se entienda.
Explicacion del codigo:

  • funcion de movimiento de personaje, recibe la direccion del movimiento y el tama帽o de las celdas.
  • lo primero que hace es borrar la zona donde estaba la calavera con un clearRect y las cordenadas respectivas con el tama帽o de la celda.
  • luego hace una validacion en caso de que la calavera estuviera en la misma posicion de salida(puerta)鈥 peque帽a aclaracion, yo hice un objeto igual al de las cordenadas del jugador para guardar el punto de incio.
  • si la validacion da true (el personaje estaba sobre la puerta) pues vuelve a renderizar la puerta en su posicion de incio(que esta guardada en el objeto startPosition).
  • luego hay 4 condicionales con la modificacion de coordenadas segun el movimiento.
  • por ultimo renderizamos el jugador en su nueva posicion.
function moveCharacter(dir, blocksSize) {
  game.clearRect(
    playerPosition.x,
    playerPosition.y - blocksSize * 0.85,
    blocksSize,
    blocksSize
  );

  if (
    playerPosition.x - startPosition.x <= blocksSize * 0.1 &&
    playerPosition.y - startPosition.y <= blocksSize * 0.1
  )
    game.fillText(emojis["O"], startPosition.x, startPosition.y);

  if (dir == "ArrowUp") playerPosition.y = playerPosition.y - blocksSize;
  else if (dir == "ArrowRight")
    playerPosition.x = playerPosition.x + blocksSize;
  else if (dir == "ArrowDown") playerPosition.y = playerPosition.y + blocksSize;
  else if (dir == "ArrowLeft") playerPosition.x = playerPosition.x - blocksSize;

  game.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);
}

Que pasa si no se pone el ClearRect?, no lo ponia y se reseteaba el juego, pero lo sobreescribe?, consume mas memoria?, para no salir del cuadro use:

function moveUp(){
    if(playerPosition.y>elementSize){
        playerPosition.y-=elementSize;
    }
    setCanvasSize();
    
}
function moveLeft(){
    if(playerPosition.x > elementSize+1){
        playerPosition.x -= elementSize;
    }
    setCanvasSize();
}
function moveRight(){
    if(playerPosition.x<elementSize*10){
        playerPosition.x+=elementSize;
    } 
    setCanvasSize();
}
function moveDown(){
    if(playerPosition.y < elementSize*10){
        playerPosition.y+=elementSize;
    }
    
    setCanvasSize();
}

Soluci贸n al reto

 if(direccion == 'Arriba'){
            if(playerPosition.y != 0){
                playerPosition.y -= size;
            }
        }else if(direccion == 'Abajo'){
            if(playerPosition.y != canvas.height - size){
                playerPosition.y += size;
            }
        }else if(direccion == 'Derecha'){
            if(playerPosition.x != (canvas.width - size)){
                playerPosition.x += size;
            }
        }else if(direccion == 'Izquierda'){
            if(playerPosition.x != 0){
                playerPosition.x -= size;
            }
        }

Intente resolver el reto y funciona. PERO, si se le da resize a la ventana se tiene que actualizar la p谩gina para que siga funcionando. 馃槖

function moveUp() {
  console.log({playerPosition,elementSize,canvasSize});
  if(playerPosition.y == elementSize) {
    return;
  }
  playerPosition.y = parseFloat((playerPosition.y - elementSize).toFixed(2));
  startGame();
}

function moveDown() {
  console.log({playerPosition,elementSize,canvasSize});
  if(playerPosition.y == canvasSize) {
    return;
  }
  playerPosition.y = parseFloat((playerPosition.y + elementSize).toFixed(2));
  startGame();
}

function moveLeft() {
  console.log({playerPosition,elementSize,canvasSize});
  if(playerPosition.x == elementSize) {
    return;
  }
  playerPosition.x = parseFloat((playerPosition.x - elementSize).toFixed(2));
  startGame();
}

function moveRight() {
  console.log({playerPosition,elementSize,canvasSize});
  if(playerPosition.x == canvasSize) {
    return;
  }
  playerPosition.x = parseFloat((playerPosition.x + elementSize).toFixed(2));
  startGame(); 
}

Esta fue mi soluci贸n para no salirme del mapa. Hice una funci贸n llamada limitMovement() que se ejecuta cada vez que se quiera mover al jugador, es decir, la ejecuci贸n en encuentra dentro de la funci贸n movePlayer(). Esta funci贸n eval煤a si la posici贸n del jugador es menor que 0, o mayor que el canvasSize en ambas cordenadas (x, y). Si resulta que el jugador est谩 fuera de los l铆mites, corrige la posici贸n sumando o restando 1 elementSize respectivamente.

// Movement
function movePlayer() {
  limitMovement();
  game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y);
}

function limitMovement() {
  if (playerPosition.x < 0) {
    console.log('Player left out');
    playerPosition.x += elementSize;
  }
  if (playerPosition.x > (canvasSize - elementSize)) {
    console.log('Player right out');
    playerPosition.x -= elementSize;
  }
  if (playerPosition.y < 0) {
    console.log('Player up out');
    playerPosition.y += elementSize;
  }
  if (playerPosition.y > (canvasSize - elementSize)) {
    console.log('Player down out');
    playerPosition.y -= elementSize;
  }
}

Yo solamente pude hacer mover la calaverita pero se me borraban todos los elementos. no encontre la forma de hacer que se queden todos los elementos

Esta es mi solucion para que no se salga del mapa.
Intente hacerlo con una funcion y no me dio.

function moveUp() {
    clearGame();
    if ((playerPosition.y - elementsSize) > 0) {
        playerPosition.y -= elementsSize;        
    }
    startGame();
    movePlayer();  
}

function moveLeft() {
    clearGame();
    if ((playerPosition.x - elementsSize - 3) > 0) {
        playerPosition.x -= elementsSize;        
    }
    startGame();
    movePlayer();
}

function moveRight() {
    clearGame();
    if ((playerPosition.x + elementsSize - 4) < canvasSize) {
        playerPosition.x += elementsSize;        
    }
    startGame();
    movePlayer();
}

function moveDown() {
    clearGame();
    if ((playerPosition.y + elementsSize - 4) < canvasSize) {
        playerPosition.y += elementsSize;        
    }
    startGame();
    movePlayer();
}
function startGame(){
  game.font = elemtSize + 'px Verdana';
  game.textAlign = 'end';

  const map = maps[0];
  const mapRow = map.trim().split('\n');
  const mapRowCol = mapRow.map(row => row.trim().split(''));

  game.clearRect(0,0,canvasSize, canvasSize);
  mapRowCol.forEach((row, x)=>{
    row.forEach((column, y)=>{
      const emoji=emojis[column]
      const posX = elemtSize*(y+1)+10;
      const posY = elemtSize*(x+1)-10;
      game.fillText(emoji,posX ,posY);
      if(column=='O'){
        if(!playerPos.x && !playerPos.y){
          playerPos.x = posX;
          playerPos.y = posY;
        }
      }
    })
  });

  movePlayer();
}

function movePlayer(){
  game.fillText(emojis['PLAYER'], playerPos.x, playerPos.y)
  console.log({playerPos})
}

//funciones para el movimiento
function moveUp(){
  console.log('arriba')
  //if(elemtSize<playerPos.y){
    playerPos.y -= elemtSize;
    startGame();
  //}
}

function moveLeft(){
  console.log('izquierda')
  playerPos.x -= elemtSize;
  startGame();
}

function moveRight(){
  console.log('derecha')
  playerPos.x += elemtSize;
  startGame();
}

function moveDown(){
  console.log('abajo')
  playerPos.y += elemtSize;
  startGame();
}

// funcion para el movimiento con las flechas

function pressArrow(event){
  switch (event.key){
    case 'ArrowUp':
      moveUp();
      break;
    case 'ArrowLeft':
      moveLeft();
      break;
    case 'ArrowRight':
      moveRight();
      break;
    case 'ArrowDown':
      moveDown();
      break;    
  }
}

Mi soluci贸n para solo borrar el casillero actual y no el tablero.

https://i.imgur.com/RX9wjtn.png

Estoy utilizando el m茅todo clearRect para borrar el casillero por donde esta pasando el jugador y fillText para dibujar los elementos correspondiente a cada posici贸n.
Tambi茅n estoy almacenando el mapa seleccionado en un variable global.

Saludos!

I use a flag to do that logic.
that logic

const renderMap = () => {
  renderClear();
  let map = maps[0];
  map = map.trim().split('\n');
  map = map.map(element => element.trim().split(''));
  // console.log(map);

  map.forEach((row, rowIndex) => {
    row.forEach((col, colIndex) => {
      const emoji = emojis[col];

      const postX = elementsSize * (rowIndex + 1);
      const postY = elementsSize * (colIndex + 1);
      // *Establecemos la posici贸n inicial del jugador 
      if (col == 'O') {
        if (isStartGame) {
          playerPosition.x = postY;
          playerPosition.y = postX;
          isStartGame = false;
        }
      }
      game.fillText(emoji, postY, postX);
    })
  });
};```

Esta es mi solucion para no salirme del mapa:

function moveUp(){
    playerPosition.y -= elementSize;
    playerPosition.y = Math.max(elementSize, playerPosition.y)
    startGame();
}
function moveDown(){
    playerPosition.y += elementSize;
    playerPosition.y = Math.min(canvasSize, playerPosition.y)
    startGame();
}
function moveLeft(){
    playerPosition.x -= elementSize;
    playerPosition.x = Math.max(elementSize, playerPosition.x)
    startGame();
}
function moveRight(){
    playerPosition.x += elementSize;
    playerPosition.x = Math.min(canvasSize, playerPosition.x)
    startGame();
}

mi solucion
nota el metodo to fixed es para limitar los decimales si no
lo quieres no es necesario

  1. crear un variable global llamada let arrayEspacio=[];

  2. crear un funcion contructora
    <function posicionesDisponibles(espacioX,espacioY) {
    this.espacioX=espacioX;
    this.espacioY=espacioY;
    }>

  3. en la funcion de startGame hacer estos cambios:
    <mapRowCols.forEach((emoji,y) => {
    emoji.forEach((emoji,x)=>{
    if (emoji == 鈥極鈥 && playerPosition.y==undefined && playerPosition.y undefined) {
    playerPosition.x = elementsSize*(x);
    playerPosition.y = elementsSize*(y+1);
    let pd =new posicionesDisponibles(elementsSize*(x),elementsSize*(y+1));
    arrayEspacio.push(pd);
    }else if ((emoji == 鈥-鈥 || emoji == 鈥業鈥) && playerPosition.y
    undefined && playerPosition.y ==undefined) {
    let pd =new posicionesDisponibles(elementsSize*(x),elementsSize*(y+1));
    arrayEspacio.push(pd);
    }

    game.fillText(emojis[emoji],elementsSize*(x),elementsSize*(y+1));
    });
    });>

  4. la funcionmoveUp quedaria asi:
    <
    function moveUp() {
    let mover=false;
    arrayEspacio.forEach(objeto=>{
    if ((objeto.espacioY).toFixed(0)(playerPosition.y-elementsSize).toFixed(0)
    && (objeto.espacioX).toFixed(0)
    (playerPosition.x).toFixed(0)) {
    console.log(鈥渕e movi鈥, (objeto.espacioY).toFixed(0),(playerPosition.y).toFixed(0));
    mover=true;
    }else{
    console.log(鈥渘o me puedo mover鈥, (objeto.espacioY).toFixed(0),(playerPosition.y).toFixed(0));
    }
    });
    if (mover) {
    playerPosition.y -= elementsSize;
    }
    movePlayer();
    setCanvasSize();

}>

Condicionales en cada movimiento, aplicando logica.

function moveUp(){
    if(playerPosition.y < elementSize +2){
        playerPosition.y = playerPosition.y
        console.log(playerPosition);
        renderPlayer();
    }else{
        playerPosition.y -= elementSize;
        console.log(playerPosition);
        starGame();

    }
}   
function moveDown(){
    if(playerPosition.y >= canvasSize){
        playerPosition.y = playerPosition.y
        console.log(playerPosition);
        starGame();
    }else{
        playerPosition.y += elementSize;
        console.log(playerPosition);
        starGame();

    }
}   
function moveR(){
    if(playerPosition.x > (canvasSize-elementSize - 4)){
        playerPosition.x = playerPosition.x
        console.log(playerPosition);
        starGame();
    }else{
        playerPosition.x += elementSize;
        console.log(playerPosition);
        starGame();

    }
}   
function moveL(){
    if(playerPosition.x < 4){
        playerPosition.x
        console.log(playerPosition);
        starGame();
    }else{
        playerPosition.x -= elementSize;
        console.log(playerPosition);
        starGame();

    }
}  

Mi soluci贸n. No es muy elegante, pero funciona

function moveUp() {
    if (playerPosition.y - elementsSize > 0) {
        playerPosition.y -= elementsSize;
        startGame();
    }
}
function moveLeft() {
    if (playerPosition.x - elementsSize > elementsSize) {
        playerPosition.x -= elementsSize;
        startGame();
    }
}
function moveRight() {
    if (playerPosition.x + elementsSize < canvasSize + elementsSize) {
        playerPosition.x += elementsSize;
        startGame();
    }
}
function moveDown() {
    if (playerPosition.y + elementsSize < canvasSize + elementsSize)  {
        playerPosition.y += elementsSize;
        startGame();
    }
}

Esto fue lo que hice para no salirme del mapa:

function moveUp () {
    console.log('Move up');
    playerPossition.y -= elementSize;
    if(playerPossition.y < 1) playerPossition.y = elementSize
    startGame();
}
function moveLeft () {
    console.log('Move Left')
    playerPossition.x -= elementSize;
    if(playerPossition.x < 0) playerPossition.x = 0
    startGame();
}
function moveRight () {
    console.log('Move Right')
    playerPossition.x += elementSize;
    if(playerPossition.x > canvasSize) playerPossition.x = canvasSize - elementSize
    startGame();
}
function moveDown () {
    console.log('Move Down')
    playerPossition.y += elementSize;
    if(playerPossition.y > canvasSize) playerPossition.y = canvasSize
    startGame();
}

C贸digo para que el PLAYER no se salga del canvas:

function moveUp() {
    if(playerPosition.y - elementsSize > elementsSize) {
        playerPosition.y = playerPosition.y - elementsSize;
        startGame();
    }
}

function moveLeft() {
    if(playerPosition.x - elementsSize > elementsSize) {
        playerPosition.x = playerPosition.x - elementsSize;
        startGame();
    }
}

function moveRight() {
    if(playerPosition.x + elementsSize <= canvasSize) {
        playerPosition.x = playerPosition.x + elementsSize;
        startGame();
    }
}

function moveDown() {
    if(playerPosition.y + elementsSize <= canvasSize) {
        playerPosition.y = playerPosition.y + elementsSize;
        startGame();
    }
}

como no estoy usando una matriz de 2 dimensiones mi soluci贸n es diferente a la de los dem谩s

para mi caso yo lo hice de esta forma:

la raz贸n de esto es que cree un array 煤nico en ves de una matriz 驴por que ? pues la vardad es que me encanta hardcorear XD

	function cargarMapa(){
    if(nivel_actual == nivel) return;

    nivel_actual = nivel;
    mapa = map[nivel].match(/[IOX-]/g);}

En fin asi queda mi codigo :

decid铆 hacerlo mas eficiente o casi ya saben usar铆a for en vez de forEach XD como sea por eso cree funciones que evitan la recarga con una bandera que indica cuando debe de recargarse y as铆 馃槃

//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 canvas_t = 0;        var actualizado  = Boolean(false);

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(){
    cargarMapa();
    clear();
    paintEvent();
    paintEventPlayer();
    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;
    // las sumas y restas de celda_t es mera estetica al momento de borrar no tiene mucha importancia
    const x  = posX(posJugador ) - celda_t / 10;
    const y  = posY(posJugador) + celda_t / 5; 
    const xp = posX(prePosJugador) - celda_t / 10;
    const yp = posY(prePosJugador) + celda_t / 5;

    juego.clearRect(x ,y , - celda_t, - celda_t);
    juego.clearRect(xp - 2, yp - 1, -celda_t, -celda_t);}


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) 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){
        const x = posX(posJugador);        
        const y = posY(posJugador); 

        if(mapa[posJugador] == 'X') juego.fillText(emojis['BOMB_COLLISION'], x, y); // agragar mas cosillas ;D
        else juego.fillText(emojis['PLAYER'], x, y);

        juego.fillText(emojis[mapa[prePosJugador]],posX(prePosJugador),posY(prePosJugador));}}

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

Us茅 los siguientes condicionales para evitar que se salga de los bordes.

function moveUp(){
    console.log('mover arriba');
    if(!(player.y < elementSize)){
        game.fillText(emojis['PLAYER'], player.x, player.y-=(elementSize));
        startGame();
    }
   
}
function moveDown(){
    console.log('mover abajo');
    
    if(!(player.y > canvasSize-elementSize)){
        game.fillText(emojis['PLAYER'], player.x, player.y+=(elementSize));
        startGame();
    }
}
function moveLeft(){
    console.log('mover izquierda')

    if(!(player.x < elementSize*2)){
        game.fillText(emojis['PLAYER'], player.x-=(elementSize), player.y);
        console.log(player.x);
        startGame();
    }
}
function moveRight(){
    console.log('mover derecha')
    
    if(!(player.x > canvasSize)){
        game.fillText(emojis['PLAYER'], player.x+=(elementSize), player.y);
        startGame();
    }
}

Esto del canvas es muy interesante pero hay que darle una atenci贸n m谩s profunda.

Esta es mi soluci贸n, hice una funcion para renderizar el juego, no se que tan diferente quede de la planteada en la clase

const mapa = maps[0]
  // El m茅todo trim elimina los espacios en blanco
const mapRows = mapa.trim().split('\n');
const mapRowCols = mapRows.map(row => row.trim().split(''))


function startGame() {
    console.log('Mapas:', mapa, mapRows, mapRowCols)

  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
      if (col == 'O'){
        playerPosition = {
          x: posX,
          y: posY
        }
        console.log(playerPosition)
      }
        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;
      game.fillText(emoji, posX, posY);
    });
  });
}

function movePlayer() {
  if (!game) return
  renderGame()
  game.fillText(player, playerPosition.x, playerPosition.y);
}


function moveUp(){
  playerPosition.y -= elementSize
  movePlayer()
}
function moveLeft(){
  playerPosition.x -= elementSize
  movePlayer()
}
function moveRight(){
  playerPosition.x += elementSize
  movePlayer()
}
function moveDown(){
  playerPosition.y += elementSize
  movePlayer()
}

Solucion al reto

// Agregar eventos de clic a los botones
upButton.addEventListener('click', function() {
  mover('arriba');

  //Evitar que la salida del mapa 
  if(playerPosition.y>100){
    playerPosition.y-=elementsSize;
  }
  startGame()
});

leftButton.addEventListener('click', function() {
  mover('izquierda');

  //Evitar que la salida del mapa 
  if(playerPosition.x>elementsSize){
    playerPosition.x-=elementsSize;
  }
  
  startGame()
});

rightButton.addEventListener('click', function() {
  mover('derecha');

  //Evitar que la salida del mapa 
  if(playerPosition.x<canvasSize){
    playerPosition.x += elementsSize;
  }
  startGame()
});

downButton.addEventListener('click', function() {
  mover('abajo');

  //Evitar que la salida del mapa 
  if(playerPosition.y<canvasSize){
    playerPosition.y+=elementsSize;
  }
  startGame()
 
});

Yo tuve un problema en mi c贸digo!
al cambiar la tama帽o del canvas, la posici贸n del jugador se manten铆a en la misma posici贸n del tama帽o anterior. y se descuadraba al punto de perder su posici贸n
as铆 que cre茅 una variable global (fuera de la funci贸n) y la funci贸n de renderizado la dej茅 as铆:

if(window.innerHeight > window.innerWidth){
        canvasSize= window.innerWidth *0.8
    }
    else{
        canvasSize= window.innerHeight * 0.8
    }
    canvas.setAttribute('height',canvasSize)
    canvas.setAttribute('width',canvasSize)

    elementSize = canvasSize / 10
    game.font = elementSize+'px Verdana'
    game.textAlign='right'

    let mapsRows=maps[level].trim().split('\n')
    let levelMap=mapsRows.map(row=> row.trim().split(''))
   
    for(let row=1; row <= 10; row++){
        for(let col=1; col <= 10; col++){
            game.fillText(emojis[levelMap[row-1][col-1]], elementSize*col, elementSize*row*0.97)
            if(levelMap[row-1][col-1]=="O" && playerPosition.plx==undefined){
                playerPosition.plx=elementSize*row*0.97
                playerPosition.ply=elementSize*col
                playerSize=elementSize
            }
        }
    }
    game.fillText(emojis['PLAYER'],playerPosition.plx,playerPosition.ply)
    if(playerPosition.plx !== undefined){
        if(playerSize !== elementSize){
            let growth=elementSize / playerSize
            playerPosition.plx= playerPosition.plx * growth
            playerPosition.ply= playerPosition.ply * growth
            playerSize=elementSize
        }
    }
}

Ah pues al final si hab铆a que renderizar el mapa de nuevo, no habr谩 otra manera xd?

Este codigo me ayudo a entender la funcion:


function moveUp() {
  if (playerPosition.y - elementsSize > 0) {
    playerPosition.y -= elementsSize;
  }
  console.log("Me quiero mover hacia arriba");
  startGame();
}
function moveLeft() {
  if (playerPosition.x - elementsSize > elementsSize) {
    playerPosition.x -= elementsSize;
    console.log("Me quiero mover hacia la izquierda");
    startGame();
  }
}

function moveRight() {
  if (playerPosition.x + elementsSize < canvasSize + elementsSize) {
    playerPosition.x += elementsSize;
    console.log("Me quiero mover hacia la derecha");
    startGame();
  }
}

function moveDown() {
  if (playerPosition.y + elementsSize < canvasSize + elementsSize) {
    playerPosition.y += elementsSize;
    console.log("Me quiero mover hacia abajo");
    startGame();
  }
}

Tuve que hace muchos cmabios al codigo pero logre completar el reto, espero que no me d茅 problemas mas adelante con los sieguientes modulos de la clase, lo que hice en principio fue desglosar el render del map en un sola funcion y esa funcion solo renderiza el mapa, luego hay otra funcion que renderiza el jugar, al cargar la pagina hay un render iniciar para cargar la posicion del jugador pero no se vuelve a llamar, cuando se mueve el jugador el vuelve a llamar el render del mapa el cual ahi limpia todo el canvas y vuelve a cargar el map, y luego llama a una funcion que es la que realiza el movimiento de la calavera

const canvas = document.querySelector('#game');
const game = canvas.getContext('2d');
const btnUp = document.getElementById('up');
const btnDown = document.getElementById('down');
const btnLeft = document.getElementById('left');
const btnRight = document.getElementById('right');

let canvasSize;
let elementsSize;

const playerPosition = {
    x: '',
    y: '',
    initialX: '',
    initialY: '',
}

window.addEventListener('load', setCanvasSize);
window.addEventListener('resize', setCanvasSize);



function setCanvasSize() {
    if (window.innerHeight > window.innerWidth) {
        canvasSize = window.innerWidth * 0.8
    } else {
        canvasSize = window.innerHeight * 0.8
    }
    
    canvas.setAttribute('width', canvasSize+16);
    canvas.setAttribute('height', canvasSize+16);
    elementsSize = canvasSize /10;
        
    startGame();
}

function renderMap() {
    game.font = `${elementsSize}px Verdana`;
    game.textAlign = 'end';
    
    const map = maps[0];
    const mapRows = map.trim().split('\n'); //trim() es un metodo que remueve los espacios en blanco de los treing y lo devuelve en un nuevo `string` sin modificar el original, el .split, elimina el caracter que se le indique en el argumento
    const mapRowsCols = mapRows.map(row => row.trim().split(''));
    game.clearRect(0, 0, canvasSize, canvasSize);
    mapRowsCols.forEach((row, rowIndex) => {
        row.forEach((col, colIndex) => {
            const emoji = emojis[col];
            const posX = (elementsSize * (colIndex + 1))+12;
            const posY = elementsSize * (rowIndex + 1);
            if (col == 'O') {
                playerPosition.initialX = posX;
                playerPosition.initialY = posY;              
              };
            game.fillText(emoji, posX, posY);                        
        });
    });
}

function renderPlayerPosition(){
    game.fillText(emojis['PLAYER'], playerPosition.initialX, playerPosition.initialY)
}

function startGame() {
    renderMap()
    renderPlayerPosition()
    playerPosition.x = playerPosition.initialX;
    playerPosition.y = playerPosition.initialY;
}

        
function movePlayer() {    
    game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y)    
}
    
window.addEventListener('keyup', moveByKeys)
btnUp.addEventListener('click', moveUp);
btnLeft.addEventListener('click', moveLeft);
btnRight.addEventListener('click', moveRight);
btnDown.addEventListener('click', moveDown);

function moveByKeys(event) {
    
    switch (event.key) {
        case "ArrowUp": moveUp(); break;
        case "ArrowLeft": moveLeft(); break;
        case "ArrowRight": moveRight(); break;
        case "ArrowDown": moveDown(); break;
    }

}

function moveUp() {
    console.log('Me quiero mover hacia arriba');      
    renderMap();
    playerPosition.y -= elementsSize;
    console.log({playerPosition});
    movePlayer();
}
function moveLeft() {
    console.log('Me quiero mover hacia a la izquierda');
    renderMap();
    playerPosition.x -= elementsSize;
    console.log({playerPosition});
    movePlayer();
}
function moveRight() {
    console.log('Me quiero mover hacia a la derecha');
    renderMap();
    playerPosition.x += elementsSize;
    console.log({playerPosition});
    movePlayer();
}
function moveDown() {
    console.log('Me quiero mover hacia abajo');
    renderMap();
    playerPosition.y += elementsSize;
    console.log({playerPosition});
    movePlayer();
}

Les comparto mi soluci贸n

Mi soluci贸n

Explicaci贸n:
Cada que muevo el player le pregunto si est谩 en 鈥渂orde鈥.Es decir, cuando llega a una posici贸n donde el valor es el del elemento o e del tama帽o del canvas.
Entonces, si su posici贸n es igual al tama帽o del elemento, su posici贸n siempre ser谩 ese tama帽o, si no es ese tama帽o, entonces si puede moverte

function moveUp() {

    map.playerPosition.x === canvasElement
        ? map.playerPosition.x = canvasElement
        : map.playerPosition.x -= canvasElement

    startGame()
}
function moveLeft() {
    map.playerPosition.y === canvasElement
        ? map.playerPosition.y = canvasElement
        : map.playerPosition.y -= canvasElement
    startGame()
}
function moveRight() {
    map.playerPosition.y === canvasSize
        ? map.playerPosition.y = canvasSize
        : map.playerPosition.y += canvasElement
    startGame()
}
function moveDown() {
    map.playerPosition.x === canvasSize
        ? map.playerPosition.x = canvasSize
        : map.playerPosition.x += canvasElement
    startGame()
}

Aqu铆 dejo todo 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);

        }
    },

    render: function () {
        if (this.lvl >= maps.length) {
            return console.log("Ese mapa no existe")
        }
        const Map = maps[this.lvl].match(/[IXO\-]+/g)
            .map(a => a.split(""))

        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 (this.playerPosition.x === undefined && this.playerPosition.y === undefined) {
                    if (y === "O") {
                        this.playerPosition.x = posX
                        this.playerPosition.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.lvl = 2
    map.render()
    map.playerPosition.render()

}


//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
        ? map.playerPosition.x = canvasElement
        : map.playerPosition.x -= canvasElement

    startGame()
}
function moveLeft() {
    map.playerPosition.y === canvasElement
        ? map.playerPosition.y = canvasElement
        : map.playerPosition.y -= canvasElement
    startGame()
}
function moveRight() {
    map.playerPosition.y === canvasSize
        ? map.playerPosition.y = canvasSize
        : map.playerPosition.y += canvasElement
    startGame()
}
function moveDown() {
    map.playerPosition.x === 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();

}