No tienes acceso a esta clase

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

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
20H
32M
46S

Objeto playerPosition

9/24
Recursos

Aportes 20

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

Hola.

Yo lo solucion茅 de la forma siguiente:

  1. En la funci贸n startGame agregu茅 la siguiente condici贸n playerPostion.x === undefined para asignarle al jugador la posici贸n de la puerta solo cuando su posici贸n sea undefined

  2. En las funciones de mover, despu茅s de actualizar la posici贸n del jugador, ejecuto la funci贸n setCanvasSize para que se dibuje todo el mapa de nuevo


Yo lo sulucin茅 creando una funci贸n que limpia el mapa con un clearRect de esquina a esquina y separando el renderizado del mapa. As铆 primero limpio el mapa, luego cambio la posici贸n del jugador, luego renderizo el mapa y al final renderizo el jugador.

Yo lo solucion茅 usando un contador


let moves = 0;
// la incializamos en 0
// incluso nos puede ayudar para mas en el futuro

Modificamos el condicional en el que identificamos donde inicia el camino en nuestro mapa

if (column === 'O' && moves === 0) {
                playerPosition.x = xPosition
                playerPosition.y = yPosition
                game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y)
}


// dibujamos a nuestro jugador con esta posicion solo cuando no ha habido movimientos

Despu茅s modificamos la funci贸n mover Jugador para terminar nuestra solucion


function movePlayer(direction) {
    moves++ 
    // cada vez que usemos los botones o teclas para mover al jugador aumentara el contador

   /// Aqui actualizamos la posicion del jugador ya establecido en el condicional anterior
    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;
    }
    printMap() // Limpiamos el mapa
    game.fillText(emojis['PLAYER'], playerPosition.x, playerPosition.y)
    // dibujamos a nuestro jugador en su nueva posicion
}

Solucion:

  • Crear funci贸n clearMap:
function clearMap(){
  game.clearRect(0, 0, canvasSize, canvasSize)
}
  • En startGame ejecutar clearMap en primemer momento y validar los playerposition (x,y)
function startGame() {
  clearMap();
  // tama帽o elementos
  game.font = (elementsSize - 6) + 'px Verdana';
  game.textAlign = "end";
  const map = maps[0];
// obtener arreglo de caracteres individuales
  const mapRowCols = map.trim().split('\n').map(row => row.trim().split(''));

  // index: obtener posiciones
  mapRowCols.forEach((row, rowIndex) => {
    row.forEach((col, colIndex) => {
     
      
      if (col == 'O' && playerPosition.x == undefined && playerPosition.y == undefined) {
       playerPosition.x = elementsSize * (colIndex + 1);
       playerPosition.y = elementsSize * (rowIndex + 1);
       console.log(playerPosition);
      }
      game.fillText(emojis[col], elementsSize * (colIndex + 1), elementsSize * (rowIndex + 1));
    });
  });
  movePlayer();
}
  • Por ultimo ejecutar los diferentes eventos:
upButton.addEventListener('click', function() {
  mover('arriba');
  playerPosition.y-=elementsSize;
  startGame()
  • Demostracion

para limpiar el mapa hice una funcion que borrara el mapa

function clearmap(){
    game.clearRect(0,0, canvasSize, canvasSize)
}

pero despu茅s de borrar todo deb铆a volver a renderizar el mapa asi que cree otra funci贸n que lo hiciera

function renderMap(){
    const map = maps[0];
    const mapRows = map.trim().split('\n');

    const mapRowCols = mapRows.map(row => row.trim().split(''));
    console.log({map,mapRows, mapRowCols});
    mapRowCols.forEach((row, rowI) => {
        row.forEach((col,colI) => {
            emoji = emojis[col];
            const posX = (elementSize*(colI+1))+10;
            const posY = (elementSize*(rowI+1))-5;

            game.fillText(emoji,posX,posY);
        });
        
    });
}

y despu茅s la inserte en los movimientos

function moverArriba(){
    console.log('moverarriba');
    clearmap()
    playerPosition.y -= elementSize 
    renderMap();
    movePlayer();
}```

Buenos despues de mucha lucha logre desplazar el jugador sin que se duplique ni se salga de los bordes

Definimos las variables a utilizar

let canvasSize;
let elementsSize;
const playerPosition = {
    x: undefined,
    y: undefined,
}


// Espera a que cargue el contenido html de la pagina antes de lanzar la funcion
window.addEventListener('load', resizeCanvas);
window.addEventListener('resize', resizeCanvas)

Esta es la funcion que dibuja el canvas


 function startGame () {
    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[0]
    //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(''));
    
    //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' && playerPosition.x == undefined) {
                playerPosition.x = posX 
                playerPosition.y = posY
            }
    //Llenamos en nuestro canvas con cada iteracion
            game.fillText(emoji, posX, posY)
        });
    });
    //Version for del forEach de arriba
    // for (let row = 1; row <= 10; row++) {
    //     for (let col = 1; col <= 10; col++) {
    //     game.fillText(emojis[mapRowCols[row -1][col - 1]], elementsSize * (col - 1/2), elementsSize * (row - 1/2));
    //  }
    // }
    //Solo insertamos al jugador en el canvas si aun no fue insertado
    if (playerPosition.x || playerPosition.y == undefined) {
    movePlayer()
    }
}

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

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

Le damos movimiento al jugador

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() {
    console.log('Me quiero mover hacia arriba');
    playerPosition.y -= elementsSize;
    //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada y
    if (playerPosition.y < 0) {
        playerPosition.y = elementsSize * 1/2;
    }
    game.clearRect(0, 0, canvasSize, canvasSize)
    startGame()
    movePlayer();
}
function moveLeft() {
    console.log('Me quiero mover hacia izquierda');
    playerPosition.x -= elementsSize;
    //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la primera posicion de la coordenada x
    if (playerPosition.x < 0) {
        playerPosition.x = elementsSize * 1/2;
    }
    game.clearRect(0, 0, canvasSize, canvasSize)
    startGame()
    movePlayer();
}
function moveRight() {
    console.log('Me quiero mover hacia derecha');
    playerPosition.x += elementsSize;
    //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada x
    if (playerPosition.x > canvasSize) {
        playerPosition.x = canvasSize - elementsSize * 1/2;
    }
    game.clearRect(0, 0, canvasSize, canvasSize)
    startGame()
    movePlayer();
}
function moveDown() {
    console.log('Me quiero mover hacia abajo');
    playerPosition.y += elementsSize;
    //Si el jugador se desplaza fuera del canvas lo volvemos a insertar en la ultima posicion de la coordenada y
    if (playerPosition.y > canvasSize) {
        playerPosition.y = canvasSize - elementsSize * 1/2;
    }
    game.clearRect(0, 0, canvasSize, canvasSize)
    startGame()
    movePlayer();
}

Mi respuesta:

1. Situaci贸n a resolver.- renderizar al personaje.

  • Como estoy usando un objeto, el cual renderiza mi mapa, decid铆 insertarle tambi茅n la propiedad de playerPosition, y tambi茅n le agregu茅 el m茅todo de renderizado.
    Me gusta de esta manera, porque as铆 creo que se entiende m谩s, pues el llamado sigue el orden.
    Mi objeto quedo de esta forma
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
                }
            }
        })
    })
    }
}

De esta manera, si quisiera solo llamar el renderizado de mi player ser铆a as铆

map.playerPosition.render()

entonces en mi funci贸n que inicia el juego quedar铆a as铆

function startGame() { 
    map.lvl=2
    map.render()
    map.playerPosition.render()

}

Con esto ya resolv铆 mi primera situaci贸n

2. Situaci贸n.- Mover el personaje
Pues como en mi objeto ya hab铆a creado la funci贸n que renderiza mi personaje, entonces lo que hice fue;
llamar esa funci贸n dentro de las funciones que generan el movimiento

function moveUp() {
    console.log(map.playerPosition)
    map.playerPosition.x-=canvasElement
    map.playerPosition.render()
}
function moveLeft(event) {
    console.log(map.playerPosition)
    map.playerPosition.y-=canvasElement
    map.playerPosition.render()

}
function moveRight(event) {
    console.log(map.playerPosition)
    map.playerPosition.y+=canvasElement
    map.playerPosition.render()
}
function moveDown(event) {
    console.log(map.playerPosition)
    map.playerPosition.x+=canvasElement
    map.playerPosition.render()
}

Logrando el movimiento, y tambi茅n as铆 surge la siguiente situaci贸n a resolver

3. Situaci贸n.- El player se est谩 renderizando sin borrar su posici贸n anterior
Entonces a partir de eso buscando soluciones.
1ro intente solo renderizar el mapa, antes que renderice el player, dentro de las funciones de movimiento
Algo as铆

function moveUp() {
    console.log(map.playerPosition)
    map.playerPosition.x-=canvasElement
    map.render()
    map.playerPosition.render()
}

Pero el problema que hab铆a con eso, es que la funci贸n que renderiza todo el mapa, tambi茅n le da su posici贸n inicial al player.
Para resolverlo, dentro de la funci贸n render del mapa, agregue una condici贸n, que dice; solo me vas a agregar la posici贸n inicial di mi player, si su posici贸n inicial a煤n no est谩 definida.

De esta manera siempre dibujar谩 el mapa, y el player en su nueva posici贸n

 if(this.playerPosition.x===undefined && this.playerPosition.y===undefined){
                if(y==="O"){
                    this.playerPosition.x=posX
                    this.playerPosition.y=posY
                }
            }
        })

Con esto ya logre que se mueva y que dibuje el mapa, sin embargo, cuando hac铆a eso, simplemente estaba renderizando un mapa encima del otro, sin borrar el anterior, entonces, me quedaba as铆

4. situaci贸n.- Borrar el mapa anterior
Esta parte la verdad me hizo pensar un poco, porque no recordaba el metodo clearRect() que vimos en las primeras clases.

  • la Pregunta era.- Donde meto esto? xD
    la respuesta es simple, aunque me hizo cabez贸n por unos minutos.
  • La l铆nea de pensamiento correcta fue;
    Si se me est谩 siempre dibujando un mapa encima del otro, entonces en la funci贸n que lo est谩 renderizando, le tengo que decir que antes que renderize cualquier cosa, borre lo anterior. Como tambi茅n hab铆amos ya definido la variable que me dice el tama帽o del canvas canvasSize
game.clearRect(0, 0, canvasSize, canvasSize)

Toda la funci贸n render quedo as铆,

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

Logrando que el player se mueva libre y salvaje por la vida, sin miedo a nada.

Espero le sirva alguien, porque creo q me demore m谩s escribiendo esto que resolviendo el reto juejuejue

const canvas = document.querySelector('#game__layout');
const game = canvas.getContext('2d');
const up = document.querySelector('#up');
const left = document.querySelector('#left');
const right = document.querySelector('#right');
const down = document.querySelector('#down');

//variables globales
let canvasSize;
let elemtSize;
const playerPos = {
  x: undefined,
  y: undefined,
};

//addEventListener
window.addEventListener('load', setCanvaSize);
window.addEventListener('resize', setCanvaSize);
window.addEventListener('keydown', pressArrow);

up.addEventListener('click', moveUp);
left.addEventListener('click', moveLeft);
right.addEventListener('click', moveRight);
down.addEventListener('click', moveDown);


//funcion que establece la dimension del canvas
function setCanvaSize(){
  if(window.innerWidth>window.innerHeight){
    canvasSize = window.innerHeight * 0.8;
  }else{
    canvasSize=window.innerWidth * 0.8;
  }

  canvas.setAttribute('width',canvasSize);
  canvas.setAttribute('height', canvasSize);

  elemtSize = canvasSize /10;
  startGame();
}

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

  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'){
        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')
  playerPos.y -= elemtSize;
  game.fillText(emojis['PLAYER'], playerPos.x, playerPos.y)
  console.log({playerPos})
}

function moveLeft(){
  console.log('izquierda')
}

function moveRight(){
  console.log('derecha')
}

function moveDown(){
  console.log('abajo')
}

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

Le agregue al if la condici贸nplayerPosition.x == undefined)

function startGame() {
    game.font = elementsSize + "px verdana"
    game.textAlign = "end"

    let map = maps[0];
    let mapRows = map.trim().split("\n") 
    let mapRowCols = mapRows.map(row => row.trim().split(''));


    mapRowCols.forEach((row, rowI) => {
        row.forEach((col, colI) =>{
            let emoji = emojis[col];
            let posX = elementsSize * (colI + 1)
            let posY = elementsSize * (rowI + 1)

            if (col == "O" && playerPosition.x == undefined) {
                playerPosition.x = posX
                playerPosition.y = posY
            }
            game.fillText(emoji, posX, posY)
        }
        
        )});
        
        mostarJugador();
}
}

y adem谩s a cada funci贸n para mover al personaje le agregue un clearRect y volv铆 a llamar la funci贸n startGame(), y funciona, quiz谩s se pueda hacer de una mejor forma, pero funciona jajajajaja

function arriba() {
    playerPosition.y -= elementsSize;
    game.clearRect(0, 0, canvasSize, canvasSize)
    mostarJugador()
    startGame()
}```

Mi soluci贸n:

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

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

let canvasSize;
let elementsSize;

const playerPosition = {
	x: undefined,
	y: undefined,
};

function startGame() {
	delMap();
	context.textAlign = "end";
	context.font = elementsSize + "px Verdana";

	const map = maps[0];
	const cleanMap = map.trim().split("\n");
	const matrixMap = cleanMap.map((row) => row.trim().split(""));
	matrixMap.forEach((row, rowP) => {
		row.forEach((col, colP) => {
			let posX = elementsSize * (colP + 1);
			let posY = elementsSize * (rowP + 1);

			if (
				col == "O" &&
				playerPosition.x == undefined &&
				playerPosition.y == undefined
			) {
				playerPosition.x = posX;
				playerPosition.y = posY;
			}
			context.fillText(emojis[col], posX, posY);
		});
	});
	movePlayer();
}
function movePlayer() {
	context.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);
}
function delMap() {
	context.clearRect(0, 0, canvasSize, canvasSize);
}
// context.fillRect(100, 100, 1, 1);
// context.clearRect(50, 0, 100, 50);
// context.font = "30px Cabin";
// context.fillStyle = "green";
// context.textAlign = "center";
// context.fillText("Fabio", 100, 100);

function setCanvasSize() {
	canvasSize;
	if (window.innerWidth >= window.innerHeight) {
		canvasSize = innerHeight * 0.8;
	} else {
		canvasSize = innerWidth * 0.8;
	}

	canvas.setAttribute("width", canvasSize);
	canvas.setAttribute("height", canvasSize);
	elementsSize = canvasSize * 0.1;

	startGame();
}

window.addEventListener("keydown", moveByKeys);
btnLeft.addEventListener("click", moveLeft);
btnUp.addEventListener("click", moveUp);
btnRight.addEventListener("click", moveRight);
btnDown.addEventListener("click", moveDown);

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

function moveLeft() {
	playerPosition.x -= elementsSize;
	startGame();
}
function moveUp() {
	playerPosition.y -= elementsSize;
	startGame();
}
function moveRight() {
	playerPosition.x += elementsSize;
	startGame();
}
function moveDown() {
	playerPosition.y += elementsSize;
	startGame();
}

Por fuera de la funci贸n startGame():

let indicator = true; 

Dentro de la parte del render del player en la funcion startGame():

 if (col == 'O' && indicator == true) {
                playerPos.x = posX;
                playerPos.y = posY;
                indicator = false;
                //indicator's value gets changed to make the render of the player inaccesible in the future
            }

Luego usando esta funci贸n:

function clearGame() {
    game.clearRect(0, 0, canvasSize, canvasSize); 
    //using this function to render the game each time the player moves
}

Finalmente en cada funci贸n de movimiento le agrego esta secuencia para que limpie el mapa, cambie de posici贸n el jugador, renderice el mapa nuevamente y aparezca el jugador con la funci贸n movePlayer():

function buttonUP() {
    clearGame();
    playerPos.y -= elementSize;
    startGame();
    movePlayer();
    //at each move we clear the game, change the position of the player, render the game without the player and then make the player appear with the new position
}

se me ha complicado un poco la verdad desconozco mucho de los m茅todos del canvas eso me ha limitado un poquito ya que no encuentro la forma de como limpiar la pantalla sin la necesidad de recurrir a la llamada de los eventos en fin mi problema por haber me pasado aqu铆 sin haber aprendido js XD

const canvas = document.querySelector('#game');
const juego  = canvas.getContext('2d');

window.addEventListener('load', redimencionar); 
window.addEventListener('resize', redimencionar);
window.addEventListener('keydown',keyMov);

const btnArriba = document.querySelector('#arriba');
const btnAbajo = document.querySelector('#abajo');
const btnDer = document.querySelector('#derecha');
const btnIzq = document.querySelector('#izquierda');
    
btnArriba.addEventListener('click', movArriba);
btnAbajo.addEventListener('click', movAbajo);
btnDer.addEventListener('click', movDer);
btnIzq.addEventListener('click', movIzq);

let posicion_calavera = undefined;
let nivel = 0;

function redimencionar(){
    const canvas_t = (window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight) *.75 ;
    canvas.setAttribute('width', canvas_t  );
    canvas.setAttribute('height', canvas_t );
    juego.textAlign='end';
    render(canvas_t / 10);}


function render(size_t = 0){
    juego.font = size_t - size_t / 10 +'px arial';
    const arreglo = map[nivel].match(/[IOX-]/g);

    arreglo.forEach((char, idx) => {
        const y = (~~(idx/10) + 1) * size_t - size_t / 5;
        const x = (idx - (~~(idx/10) * 10) + 1) * size_t + size_t / 10;
        
        //juego.fillText(emojis[char], x, y );
        
        if(char == 'O' && posicion_calavera == undefined) posicion_calavera = idx;
        if(posicion_calavera == idx) {
            if(char == 'X') char = 'BOMB_COLLISION';
            else if(char == 'I') {
                nivel = nivel + 1 <= 2 ? ++nivel : 0;
                posicion_calavera = undefined;
                redimencionar();
                return;}
            else char = 'PLAYER';}

        juego.fillText(emojis[char], x, y );
        });}
    

function keyMov(event){
    switch(event.keyCode){
        case 37: //izquierda
            movIzq();
            break;
        case 38: //arriba
            movArriba();
            break;
        case 39: //derecha
            movDer();
            break;
        case 40: //abajo
            movAbajo();
            break;
        default: break;}}

function movArriba(){
    const temp = posicion_calavera;
    posicion_calavera -= 10;
    if(posicion_calavera < 0) posicion_calavera = temp;
    redimencionar();}

function movAbajo(){
    const temp = posicion_calavera;
    posicion_calavera += 10;
    if(posicion_calavera >= 100) posicion_calavera = temp;
    redimencionar();}

function movDer(){
    const temp = posicion_calavera;
    const pered = (~~(posicion_calavera / 10)) *10 + 10;
    ++posicion_calavera;
    if(posicion_calavera >= pered) posicion_calavera = temp;
    redimencionar();}

function movIzq(){
    const temp = posicion_calavera;
    const pered  = ~~(posicion_calavera /10) * 10; 
    --posicion_calavera;
    if(posicion_calavera < pered) posicion_calavera = temp;
    redimencionar();}

Lo que hice fue pasar el dibujo del mapa a una funci贸n y crear una bander, que solo la primera vez me coloque la posicion incial de la calavera.

let flag = true;
const drawMap = () => {
  mapRows.forEach((row, rowIndex) => {
 row.forEach((col, colIndex) => {
    const emoji = emojis[col];
    const posX = elementsSize * (colIndex + 1) + 5;
    const posY = elementsSize * (rowIndex + 1) - 10;
    game.fillText(emoji, posX, posY);

      if (row[col] == "O" && flag) {
        playerPosition.x = posX;
        playerPosition.y = posY;
        flag = false;
      }
    }
  });
};

Y luego dentro de la funcion movePlayer, limpio el canvas, dibujo el mapa, y por ultimo dibujo la nueva posicion del Player.

const movePlayer = () => {
  game.clearRect(0, 0, canvasSize, canvasSize);
  drawMap();
  game.fillText(emojis["PLAYER"], playerPosition.x, playerPosition.y);
};

Asi voy, desde que inicie a hacer el codigo, desee tenerlo lo mas limpio posible, y no repetir muchas veces cada parte, de esta manera voy, si tienen algo que aconsejarme o algo que pueda mejorar estare muy agradecido:

const canvas = document.querySelector('#game');
const game = canvas.getContext('2d');
let canvasSize;
let elementSize;

const playerPosition = {
  x: undefined,
  y:undefined,
};

const gameStart = {
  level: 0,
  render: function () {
    if (this.level >= maps.length) {
      return console.log("Ese mapa no existe")
    }
    const map = maps[this.level].match(/[IXO\-]+/g)
      .map(a => a.split(""))
    game.font = `${elementSize}px Verdana`;
    game.textAlign = 'center';
    game.textBaseline = 'middle';

    map.forEach((row, rowIndex) => {
      row.forEach((col,colIndex)=>{
        const emoji = emojis[col];
        const posX = elementSize * ((colIndex - 0.42) + 1);
        const posY = elementSize * ((rowIndex - 0.32) + 1);

        if (col == 'O') {
          playerPosition.x = posX;
          playerPosition.y = posY;
        }

        game.fillText(emoji, posX, posY);
      });
    });

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



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

function setCanvasSize() {
 canvasSize = Math.min(window.innerWidth, window.innerHeight) * 0.7;

  canvas.setAttribute('width', canvasSize);
  canvas.setAttribute('height', canvasSize);

  elementSize = canvasSize / 10.20;

  startGame();
}


function startGame() {
  gameStart.render()
}

// Mapeo entre teclas y direcciones
const keyToDirection = {
  ArrowUp: 'up',
  ArrowLeft: 'left',
  ArrowDown: 'down',
  ArrowRight: 'right',
  w: 'up',
  a: 'left',
  s: 'down',
  d: 'right'
};

const directionToButton = {
  up: document.querySelector('#up'),
  left: document.querySelector('#left'),
  down: document.querySelector('#down'),
  right: document.querySelector('#rigth'),
};

Object.keys(directionToButton).forEach(direction => {
  directionToButton[direction].addEventListener('click', () => {
      move(direction);
  });
});

window.addEventListener('keydown', moveByKey);

function moveByKey(event) {
  const direction = keyToDirection[event.key];
  if (direction) {
      move(direction);
  }
}

function move(direction) {
  console.log(`Me muevo hacia ${direction}`);
  if (direction == 'up')playerPosition.y -= elementSize, gameStart.movePlayer();
  else if(direction == 'left')playerPosition.x -= elementSize, gameStart.movePlayer(); 
  else if(direction == 'right')playerPosition.x += elementSize, gameStart.movePlayer();
  else if(direction == 'down')playerPosition.y += elementSize, gameStart.movePlayer();
}

Aqu铆 pasa algo interesante que no si notaste. Pero te hago la siguiente pregunta: 驴Por qu茅 puede modificar las propiedades del objeto si fue declarado con la palabra reservada const?

La respuesta esta en la misma pregunta ya que no estas modificando la variable o constante como tal, sino solo sus propiedades.

Quiz谩s ya sabias la respuesta pero es algo curioso que tal vez te pueda confundir

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

yo puse que se re-imprimiera el mapa cada vez que cambiamos la posici贸n del jugador, y en la misma funci贸n que renderiza el mapa puse una condicional en que la posici贸n del jugador tiene que ser undefined para que se imprima dentro de dicha funci贸n

function moveRight(){
    console.log('muevete hacia la derecha');
    playerPosition.plx+=elementSize
    reprintThePlayer()
    startDrawing()
}

function reprintThePlayer(){    game.fillText(emojis['PLAYER'],playerPosition.plx,playerPosition.ply)
}

Yo renderizar铆a de nuevo el mapa, pero no lo veo eficiente xd

Mi soluci贸n fue renderizar por cada movimiento el mapa en el canvas.

function movePlayer(){
    //Eliminar posici贸n anterior jugador por cada movimiento.
    game.clearRect(0,0,canvasSize,canvasSize);//borrar todo el contenido del canvas
    for (let i = 1; i <= 10; i++) { //volver a renderizar el mapa con la nueva posici贸n del jugador
        for (let j = 1; j <= 10; j++) {
            game.fillText(emojis[mapRowCols[j-1][i-1]],elementsSize*i+5,elementsSize*j-15);
        }
    }
    game.fillText(emojis["PLAYER"],positionJugador.x+5,positionJugador.y-15);//imprimir al jugador
}

Al inicio en la: function startGame() borre todo el canvas para ser renderizado con la nueva posicion de la calabera: playerPosition.x, playerPosition.y

  game.clearRect(0, 0, canvas.width, canvas.height);