Eventos y botones

Yo utilicé switch 🌝:

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

function moveUp() {
  console.log("Me movere hacia arriba");
}

function moveLeft() {
  console.log("Me movere hacia izq");
}

function moveRight() {
  console.log("Me movere hacia dere");
}

function moveDown() {
  console.log("Me movere hacia aba");
}

window.addEventListener("keydown", (e) => {
  let tecla = e.key;

  switch (tecla) {
    case "ArrowUp":
      moveUp();
      break;

    case "ArrowDown":
      moveDown();
      break;

    case "ArrowLeft":
      moveLeft();
      break;

    case "ArrowRight":
    moveRight();
      break;

    default:
      break;
  }
});

Yo utilice Closures para que la funcion move pueda recibir parametros en los “addEventListener”

const move = (key) => {
    return () => {
        console.log(`Pressed: ${key}`)
    }
}

const moveByKey = (event) => {
    if(event.key == "ArrowUp") move("up")()
    else if(event.key == "ArrowLeft") move("left")()
    else if(event.key == "ArrowRight") move("right")()
    else if(event.key == "ArrowDown") move("down")()
}


window.addEventListener("keydown", moveByKey)
btnUp?.addEventListener("click", move("up"))
btnLeft?.addEventListener("click", move("left"))
btnRight?.addEventListener("click", move("right"))
btnDown?.addEventListener("click", move("down")) 

Para ver por consola el objeto que devuelve el evento cada vez que se oprime una tecla. Utilicé document.addEventListener para que sólo detecte las teclas cuando estamos parados sobre el html y no sobre la ventana(objeto window).

document.addEventListener('keydown', tecla)

function tecla(event){
    console.log(event);
}

function moveByKeys(event) {
    const moveFunctions = {
        ArrowUp: moveUp,
        ArrowLeft: moveLeft,
        ArrowRight: moveRight,
        ArrowDown: moveDown
      };
    
      const moveFunction = moveFunctions[event.key];
      if (moveFunction) {
        moveFunction();
      }
}

Creo que esta logica pueed funcionar:

const buttons = document.querySelectorAll(".btns button");
buttons.forEach(function(button) {
    button.addEventListener("click", handleButtonClick);
});

function handleButtonClick(event) {
    const button = event.target;
    console.log(`El botón ${button.id} fue presionado`);
}

Mejore el codigo solo usando una función move(key), y mandando la tecla desde los botones directamente de la funcion, de esta forma.
En el Index. html

<button id="up" onclick= "move('ArrowUp')">Arriba</button>
            <button id="left" onclick="move('ArrowLeft')">Izquierda</button>
            <button id="right" onclick="move('ArrowRight')">Derecha</button>
            <button id="down" onclick="move('ArrowDown')">Abajo</button>

y en el game.js únicamente se recibe la tecla, en la funcion y se le asigna a un switch

const move = (key) => {
  if(typeof key === 'object'){
    key= key.key;
  };
  switch (key) {
    case "ArrowUp":
      console.log("Arriba");
      break;
    case "ArrowLeft":
      console.log("Izquierda");
      break;
    case "ArrowRight":
      console.log("Derecha");
      break;
    case "ArrowDown":
      console.log("Abajo");
      break;

    default:
      break;
  }
};

window.addEventListener("keydown", move);

y solo usamos un window.addEventListener para mandar el objeto de la tecla presionada.

un if revisa si es un objeto y obtiene la tecla presionada. que es el mismo string que envía los buttons.

En las condicionales, para mover con las teclas se puede escribir de varias maneras.
Sin embargo, lo importante siempre va a ser la legibilidad, así que queda a tu elección

usando ternarias

function moveByKey(event) {

    event.key==="ArrowUp"? moveUp()
    :event.key==="ArrowLeft"? moveLeft()
    :event.key==="ArrowRight"?moveRight()
    :event.key==="ArrowLeft"?moveRight()
    :console.log("Esa tecla no mueve nada");
}

O **if **de esta manera, recordando que cuando usamos un if, sin el else y con una sola orden, podemos escribirlo sin llaves, por lo que queda bonito, y entendible.

function moveByKey(event) {
   
    if(event.key==="ArrowUp") moveUp();
    if(event.key==="ArrowLeft") moveLeft();
    if(event.key==="ArrowRight") moveRight();
    if(event.key==="ArrowDown") moveDown();
    
}

Para este caso no usaría Switch, ya que considero que son más líneas de código, e incluso creo q esta más fácil de entender con el if, pero bueno, eso también va de acuerdo a como quieras trabajas o lo que consideres que es más legible

También se puede usar switch case:

function moveByKeys(event) {
    switch (event.key) {
        case 'ArrowUp':
            moveUp();
            break;
        case 'ArrowLeft':
            moveLeft();
            break;
        case 'ArrowRight':
            moveRight();
            break;
        case 'ArrowDown':
            moveDown();
            break;
        default:
            log('No se que tecla has pulsado');
            break;
    }
}

Para las direcciones por teclas, utilicé el condiconal switch.-

Para el movimiento por botones intenté obtener el ‘target’ del evento PointerEvent(así como obtuvimos ‘key’ de event para las teclas), para a partir de eso realizar un condicional y meter en una sola función los movimientos respectivos a cada botón, pero no me salió 😃. Me sale el error de que .target no es una funcion

utilice un objeto

// capturar los movimientos del usuario con los botones
btnUp.addEventListener("click", moveUp);
btnLeft.addEventListener("click", moveLeft);
btnRight.addEventListener("click", moveRight);
btnDown.addEventListener("click", moveDown);
// para detectar el movimiento del usuario con las teclas
window.addEventListener("keydown", moveByKeys);

function moveUp() {
  console.log(" move up");
}
function moveLeft() {
  console.log(" move left");
}
function moveRight() {
  console.log(" move right");
}
function moveDown() {
  console.log(" move down");
}
function moveByKeys(e) {
  const key = e.code;
  const KEY_MOVES = {
    ArrowUp: moveUp,
    ArrowLeft: moveLeft,
    ArrowRight: moveRight,
    ArrowDown: moveDown,
  };
  return KEY_MOVES[key]();
}

Yo use Switch tanto para el uso de botones y teclas

A continuacion te explico como funciona

Por botones

const buttons = document.querySelectorAll('button')
// Solo tenemos cuatro etiquetas button asi que no es mala idea llamar a todos. Estos se guardan en un array

buttons.forEach(button => {
    button.addEventListener('click', moveByButtons)
});
// Al ser un array podemos usar los metodos de array para asi añadir el evento a los cuatro botones a la vez

// FUNCION
function moveByButtons(event) {
    const direction = event.target.id 
    // llamamos a event para tener acceso al targent que es nuestra etiqueta button y llamamos a su id para conocer cual es la direction que indica nuestra etiqueta button, el resto ya lo sabes :3
    switch (direction) {
        case "up":
            // moverPersonaje(direction)
            alert('se preciono el boton ' + direction)
            break;
        case "left":
            // moverPersonaje(direction)
            alert('se preciono el boton ' + direction)
            break;
        case "right":
            // moverPersonaje(direction)
            alert('se preciono el boton ' + direction)
            break;
        case "down":
            // moverPersonaje(direction)
            alert('se preciono el boton ' + direction)
            break;
        default:
            break;
    }
}

Ahora por teclado

window.addEventListener('keydown', moveByKeys);
// Añadimos el siguente evento para que la ventana detecte cuando se precione una tecla

//FUNCION
function moveByKeys(event) {
    const tecla = event.key
    // De forma parecida con lo botones usamos event para acceder a todas sus propiedas, la que nos interesa es 'key', en nuestra logica llamamos a una funcion futura si corresponde con las teclas que comunmente se usan para direccion (ya sean la flechas o WASD, asi es podemos poner varios case para un mismo resultado)
    // Por si te lo preguntas el event.target es body, es decir la window
    switch (tecla) {
        case "ArrowUp":
        case "w":
            // moverPersonaje(tecla)
            alert('se preciona la tecla ' + tecla)
            break;
        case "ArrowLeft":
        case "a":
            // moverPersonaje(tecla)
            alert('se preciona la tecla ' + tecla)
            break;
        case "ArrowRight":
        case "d":
            // moverPersonaje(tecla)
            alert('se preciona la tecla ' + tecla)
            break;
        case "ArrowDown":
        case "s":
            // moverPersonaje(tecla)
            alert('se preciona la tecla ' + tecla)
            break;
        default:
            break;
    }
}

Gracias por leer 💚

Yo usé un Switch de la siguiente manera:

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


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

function moveUp(){
    console.log("Flecha Arriba")
}
function moveLeft(){
    console.log("flecha izquierda")
}
function moveRight(){
    console.log("flecha derecha")
}
function moveDown(){
    console.log("flecha abajo")
}> 

Mi pequeño aporte

const up=document.querySelector('#up');
const down=document.querySelector('#down');
const left=document.querySelector('#left');
const right=document.querySelector('#right');

up.addEventListener('click',uP);
down.addEventListener('click',dOwn);
left.addEventListener('click',lEft);
right.addEventListener('click',rIght);


window.addEventListener('keydown',function(evento){
    if(evento.key=='ArrowUp'){
        uP();        
    }else if(evento.key=='ArrowDown'){
        dOwn();
    }else if(evento.key=='ArrowRight'){
        rIght();
    }else if(evento.key=='ArrowLeft'){
        lEft();
    }
});

function uP(){
    console.log('up');
}
function dOwn(){
    console.log('down');
}
function lEft(){
    console.log('left');
}
function rIght(){
    console.log('rigth');
}

Evento keydown

Mira las siguientes slides:

Utilizando switch y agregando la opcion de usar WASD:

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

function move(event) {
  switch (event.key) {
    // UP
    case "ArrowUp":
      moveUp();
      break;
    case "w":
      moveUp();
      break;

    // LEFT
    case "ArrowLeft":
      moveLeft();
      break;
    case "a":
      moveLeft();
      break;

    // RIGHT
    case "ArrowRight":
      moveRight();
      break;
    case "d":
      moveRight();
      break;

    // DOWN
    case "ArrowDown":
      moveDown();
      break;
    case "s":
      moveDown();
      break;
  }
}

function moveUp() {
  console.log("up");
}

function moveLeft() {
  console.log("left");
}

function moveRight() {
  console.log("right");
}

function moveDown() {
  console.log("down");
}

reciclado del proyecto de mokepon
html

 <div class="btns">
            <button onmousedown="moverArriba()" ontouchstart="moverArriba()" id="up" >Arriba</button>
            <button onmousedown="moverIzquierda()" ontouchstart="moverIzquierda()" id="left" >Izquierda</button>
            <button  onmousedown="moverDerecha()" ontouchstart="moverDerecha()" id="right" >Derecha</button>
            <button  onmousedown="moverAbajo()" ontouchstart="moverAbajo()" id="down" >Abajo</button>
        </div>

JavaScript

function moverArriba(){
    console.log('moverarriba');
}
function moverAbajo(){
    console.log('moverabajo');
}
function moverDerecha(){
    console.log('moverderecha');
}
function moverIzquierda(){
    console.log('moverizquierda');
}


function sePrecionoUnaTecla(event){
    switch (event.key) {
        case 'ArrowUp':
            moverArriba()
            break
        case 'ArrowDown':
            moverAbajo()
            break
        case 'ArrowRight':
            moverDerecha()
            break
        case 'ArrowLeft':
            moverIzquierda()
            break
    
        default:
            break
    }

}

Mi solución al reto:

// Obtener referencia a los botones
const upButton = document.getElementById('up');
const leftButton = document.getElementById('left');
const rightButton = document.getElementById('right');
const downButton = document.getElementById('down');

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

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

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

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

// Agregar evento de escucha para las teclas
document.addEventListener('keydown', function(event) {
  console.log(event);
  switch(event.key) {
      case 'ArrowUp': // Arriba
          mover('arriba');
          break;
      case 'ArrowLeft': // Izquierda
          mover('izquierda');
          break;
      case 'ArrowRight': // Derecha
          mover('derecha');
          break;
      case 'ArrowDown': // Abajo
          mover('abajo');
          break;
  }
});

// Función de movimiento
function mover(direccion) {
  // Realizar acción de movimiento en la dirección especificada
  console.log('Movimiento hacia ' + direccion);
}

este fue mi codigo

<code> 
```function botones (boton, direccion){
boton.addEventListener(“click”, ()=>{
console.log(direccion);
})
}
botones (botonUp, “arriba”);
botones (botonDow, “abajo”);
botones (botonLef, “izquierda”);
botones (botonRig, “derecha”);

window.addEventListener(“keydown”,teclado)
function teclado(event){
if (event.key == “ArrowUp”){
console.log(“arriba”);
}else if(event.key == “ArrowDown”){
console.log(“abajo”);
}else if(event.key == “ArrowLeft”){
console.log(“izquierda”);
}else if(event.key == “ArrowRight”){
console.log(“derecha”);
}
}

btnUp.addEventListener('click', movePlayer);
btnLeft.addEventListener('click', movePlayer);
btnDown.addEventListener('click', movePlayer);
btnRight.addEventListener('click', movePlayer);

function movePlayer(e) {
  let btn = e.currentTarget;
  let direction = btn.textContent;
  

  switch (direction) {
    case 'Arriba':
      if ( playerPosY === elementSize ) {

      } else {
        playerPosY = playerPosY - elementSize;
        game.fillText(emojis['PLAYER'], playerPosX, playerPosY);
      }      
      break;
    case 'Abajo':
      if ( playerPosY === (elementSize * 10) ) {

      } else {
        playerPosY = playerPosY + elementSize;
        game.fillText(emojis['PLAYER'], playerPosX, playerPosY);
      } 
      break;
    case 'Izquierda':
      if ( playerPosX === elementSize ) {

      } else {
        playerPosX = playerPosX - elementSize;
        game.fillText(emojis['PLAYER'], playerPosX, playerPosY);
      } 
      break;
    case 'Derecha':
      if ( playerPosX === (elementSize * 10) ) {

      } else {
        playerPosX = playerPosX + elementSize;
        game.fillText(emojis['PLAYER'], playerPosX, playerPosY);
      } 
      break;
  
    default:
      break;
  }
}
<code> 

Yo cree una funcion para agregar eventos ya que se repetia mucho codigo, ademas tengo pensado que es posible realizar los movimientos con una sola funcion que actua segun un parametro que indique la direccion… esperemos si puedo adaptar el codigo que sigue para hacerlo asi.

function addEvents(){
  let buttonsNodes = document.querySelectorAll('.btns button');
  let buttonsTags = Array.from(buttonsNodes);
  buttonsTags.forEach((button) =>{
    button.addEventListener('click', (e)=>{

      //!Podemos llamar aqui una funcion que reciba la direccion del movimiento y segun ese valor mueva el personaje
      moveCharacter(e.target.id);
      console.log(e.target.id);
    })
  });

  document.addEventListener('keydown', (e)=>{
    //! los keyCode son desde el 37 siendo el izq aumentando en sentido de manecillas terminando abajo 40
    moveCharacter(e.key)
    console.log(e);
  });
};
function moveCharacter(dir){
  console.log(`Moviendo personaje ${dir}`);
};

const up = document.querySelector('#up');

  up.addEventListener('click',moveup);
  window.addEventListener('keyup', moveup);
  function moveup() {
    console.log('moviendonos arrriba');
  }

Y así con todas las demás.

Yo lo hice con document:

document.addEventListener('keydown', movePlayerByKey);

Yo utilicé un enum para agregar el modo dios además de las flechas 🎮😁

const moves = {
    GamerMode: {
        Up: 'w',
        Left: 'a',
        Right: 'd',
        Down: 's'
    },
    mortalMode: {
        Up: 'ArrowUp',
        Left: 'ArrowLeft',
        Right: 'ArrowRight',
        Down: 'ArrowDown'
    }
    
}

function moveByKeys(event) {
    const pressedKey = event.key;

    pressedKey == moves.GamerMode.Up ||
    pressedKey == moves.mortalMode.Up ?
    moveUp() :
    pressedKey == moves.GamerMode.Left ||
    pressedKey == moves.mortalMode.Left ?
    moveLeft() :
    pressedKey == moves.GamerMode.Right ||
    pressedKey == moves.mortalMode.Right ?
    moveRight() :
    pressedKey == moves.GamerMode.Down ||
    pressedKey == moves.mortalMode.Down ?
    moveDown() :
    console.log(pressedKey);
}```

Pues sólo detecte el evento con puro console.log.

const btnUp = document.getElementById("up");
const btnDown = document.getElementById("down");
const btnLeft = document.getElementById("left");
const btnRight = document.getElementById("right");

btnUp.addEventListener("click", () => {console.log("Se ejecuta movimiento");});
btnDown.addEventListener("click", () => {console.log("Se ejecuta movimiento");});
btnLeft.addEventListener("click", () => {console.log("Se ejecuta movimiento");});
btnRight.addEventListener("click", () => {console.log("Se ejecuta movimiento");});

window.addEventListener("keydown", event => console.log(event.key));

My solution

  d.addEventListener("keydown",(e)=>{
        switch (e.key) {
            case 'ArrowUp':
                console.log('Arriba')
                break;
            case 'ArrowDown':
                console.log('Abajo')
                break;
            case 'ArrowLeft':
                console.log('Izquierda')
                break;
            case 'ArrowRight':
                console.log('Derecha')
                break;
            default:
                console.log('Tecla incorrecta!')
                break;
        }
    })

Codigo en javascript:

document.addEventListener('keydown',movimiento);

function movimiento(event, value = ''){
  let key = (value === '') ? event.key : value;
  console.log(key);
}

Codigo en HTML:

<button onclick="movimiento(event,'ArrowUp')" id="up">Arriba</button>
<button onclick="movimiento(event,'ArrowLeft')" id="left">Izquierda</button>
<button onclick="movimiento(event,'ArrowRight')" id="right">Derecha</button>
<button onclick="movimiento(event,'ArrowDown')" id="down">Abajo</button>

mi aporte de botones y teclas

<
window.addEventListener("keydown", eventoTeclas);

function eventoTeclas(evento) {
  console.log(evento);
  switch (evento.keyCode) {
    case teclas.UP:
      console.log("arriba");

      break;
    case teclas.DOWN:
      console.log("abajo");
      break;
    case teclas.LEFT:
      console.log("izquierda");
      break;
    case teclas.RIGHT:
      console.log("derecha");
      break;
  }
}> 

<
btn.addEventListener("click", eventoBotones);
function eventoBotones() {
  console.log("entro");
}
> 

//funciones para el movimiento
function moveUp(){
  console.log('arriba')
}

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

const moveEvent = ( code ) => {
    const a = 65
    const w = 87
    const s = 83
    const d = 68
    const left = 37
    const up = 38
    const right = 39
    const down = 40

    if ( code == a || code == left ) {
        console.log('left')
    } else if ( code == w || code == up ) {
        console.log('up')
    } else if ( code == d || code == right ) {
        console.log('right')
    } else if ( code == s || code == down ) {
        console.log('down')
    }
}

window.addEventListener('keydown', (e) => {    
    moveEvent(e.keyCode)
})
document.getElementById('up').addEventListener('click', moveEvent(38))
document.getElementById('left').addEventListener('click', moveEvent(37))
document.getElementById('right').addEventListener('click', moveEvent(39))
document.getElementById('down').addEventListener('click', moveEvent(40))

Una consulta JuanDC.
Entiendo que funcionalmente es igual, pero no seria mas profesional en vez de consultar por el parámetro key hacerlo con el keyCode ?

Los botones de la pantalla en el juego:

const upButton = document.querySelector('#up');
const downButton = document.querySelector('#down');
const rightButton = document.querySelector('#right');
const leftButton = document.querySelector('#left');

upButton.addEventListener('click', key)
downButton.addEventListener('click', key)
rightButton.addEventListener('click', key)
leftButton.addEventListener('click', key)

.
.
Ahora las teclas:
.

window.addEventListener('keyup', key);

.
Ambos ejecutan la misma funcion:
.

function key(key){
    console.log(key);
}

Se me ocurrió hacerlo de dos maneras. Primero, usando addEventListeners para capturar los eventos del mouse y del click. Segundo, usando una función que capturase el valor interno de las teclas presionadas en el ordenador.

Yo lo probé primero de esta manera

  document.addEventListener('keydown', e => {
    (e.key == 'ArrowUp') ? console.log('Arriba') :
      (e.key == 'ArrowDown') ? console.log('Abajo') :
        (e.key == 'ArrowLeft') ? console.log('Izquierda') :
          (e.key == 'ArrowRight') ? console.log('Derecha') : null;
  })

Le deje así y agregue la calaberita 😃

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 moveVertical=1;
let moveHorizontal=1;

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

    
}
function renderMap(level){

    const  filterMap = maps[level].trim().split("\n");
    const maprender = filterMap.map(function(key){ return key.trim().split("")});
    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));      
            if(maprender[j][i]=='O'){
                moveVertical = j + 1 ;
                moveHorizontal = i + 1 ;
                game.fillText(emojis['PLAYER'] ,elementSize * (i+1) , elementSize * (j+1));
            }       
        }
        
    };
}
function moveWithButton(event){
    const elementSize = canvassize/10;
    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++;
    }
    console.log({moveHorizontal,moveVertical});
    game.fillText(emojis['PLAYER'] ,elementSize * moveHorizontal , elementSize * moveVertical);
}
function keyDetection(event){
    const keyButtonMove = [38,37,39,40];
    
    keyButtonMove.forEach(function(key){
        if(event.keyCode == key){
            const elementSize = canvassize/10;
            if(key == 38){
                moveVertical--;
            }else if(key == 40){
                moveVertical++;
            }else if(key == 37){
                moveHorizontal--;
            }else if(key == 39){
                moveHorizontal++;
            }
            console.log({moveHorizontal,moveVertical});
            game.fillText(emojis['PLAYER'] ,elementSize * moveHorizontal , elementSize * moveVertical);
        }
    });
    
    
    
}
//console.log(renderMap(0));

Esta es mi solución para realizar la acción mover al seleccionar alguno de los botones para mover el personaje:

Decidí, en lugar de asignar un addEventListener a cada botón de mover(lo que probablemente sería computacionalmente más caro), dárselo al contenedor de todos estos botones.
.
Sé que la solución pudo realizarse por medio de una estructura if, hasta incluso el uso de la estructura selectiva switch, pero decidí usar un objeto para este caso.

Me gusta mas el evento keyup, así cada acción sera al soltar la tecla

up.addEventListener('click', moveUp)
down.addEventListener('click', moveDown)
right.addEventListener('click', moveR)
left.addEventListener('click', moveL)
window.addEventListener('keyup', (event) => {
   /*  if(event.key === 'ArrowUp'){
        moveUp();
    }else if(event.key === 'ArrowDown'){
        moveDown();
    }else if(event.key === 'ArrowLeft'){
        moveL();
    }else if(event.key === 'ArrowRight'){
        moveR();
    } */
    switch(event.key){
        case 'ArrowUp': moveUp();
        break;
        case 'ArrowDown': moveDown();
        break;
        case 'ArrowRight': moveR();
        break;
        case 'ArrowLeft': moveL();
        break;
    }

});

Evento cuando se hace click en el botón “Arriba”

var boton_arriba = document.getElementById("up");
boton_arriba.addEventListener('click', moverArriba);

function moverArriba() {
    console.log("arriba");
}

btnUp.addEventListener(‘click’, moveUp);
btnLeft.addEventListener(‘click’,moveLeft);
btnRight.addEventListener(‘click’,moveRight);
btnDown.addEventListener(‘click’,moveDown);

function moveUp(){
console.log(‘Me quiero mover hacia arriba’);

}
function moveLeft(){
console.log(‘Me quiero mover hacia la izquierda’);
}
function moveRight(){
console.log(‘Me quiero mover hacia la derecha’);

}
function moveDown(){
console.log(‘Me quiero mover hacia abajo’);

}

Yo lo hice asi

function moveUp() {
  console.log("Up");
}
function moveLeft() {
  console.log("Left");
}
function moveRight() {
  console.log("Right");
}
function moveDown() {
  console.log("Down");
}
botones.forEach((boton) => {
  boton.addEventListener("click", (e) => {
    switch (e.target.id) {
      case "up":
        moveUp();
        break;
      case "left":
        moveLeft();
        break;
      case "right":
        moveRight();
        break;
      case "down":
        moveDown();
        break;
    }
  });
});
document.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowUp":
      moveUp();
      break;
    case "w":
      moveUp();
      break;
    case "ArrowLeft":
      moveLeft();
      break;
    case "a":
      moveLeft();
      break;
    case "ArrowRight":
      moveRight();
      break;
    case "d":
      moveRight();
      break;
    case "ArrowDown":
      moveDown();
      break;
    case "s":
      moveDown();
      break;
  }
});

Al final logré hacer un código más pequeño y legible usando objetos

window.addEventListener('keydown', moveByKeys);
buttons.forEach(button => {
    button.addEventListener('click', moveByButtons)
});

function moveByKeys(event) {
    const direction = event.key;
    const keys = {
        ArrowUp: 'moveUp',
        ArrowLeft: 'moveLeft',
        ArrowRight: 'moveRight',
        ArrowDown: 'moveDown',
        w: 'moveUp',
        a: 'moveLeft',
        d: 'moveRight',
        s: 'moveDown'
    };
    const validKey = keys[direction];
    if (validKey) {
        // moveFunction();
        console.log(validKey);
    }
}
function moveByButtons(event) {
    const direction = event.target.id
    const buttonsId = {
        up: 'moveUp',
        left: 'moveLeft',
        right: 'moveRight',
        down: 'moveDown',
    };

    const validButton = buttonsId[direction];
    if (validButton) {
        // moveFunction();
        console.log(validButton);
    }
}

COMPAÑEROS LES COMPARTO MI CODIGO, FUNCIONA CON LAS FLECHITAS DIRECCIONALES Y CON W,A,S,D

window.addEventListener("keydown", PressBtn)
function PressBtn(boton){
  console.log(boton)
  boton.key == "w"|| boton.key == "ArrowUp" ? drawBtn("UP"):null;
  boton.key == "a"||boton.key =="ArrowLeft"? drawBtn("LEFT"):null;
  boton.key == "s"||boton.key =="ArrowDown"? drawBtn("DOWN"):null;
  boton.key == "d"||boton.key =="ArrowRight"? drawBtn("RIGHT"):null;
  
}
function drawBtn(boton){
  
  console.log(`you press ${boton}`)
}

Acabo de percatarme que esa forma de usar los condicionales sin llaves se parece un poco a la sintaxis de Python 😮

Yo utilize un poco de programación funcional

document.addEventListener("keydown", handleKeyDown);

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

// 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"));

function movePlayer(direction) {
  // Realizar acciones según la dirección recibida
  switch (direction) {
    case "up":
      // Lógica para mover al jugador hacia arriba
      break;
    case "left":
      // Lógica para mover al jugador hacia la izquierda
      break;
    case "right":
      // Lógica para mover al jugador hacia la derecha
      break;
    case "down":
      // Lógica para mover al jugador hacia abajo
      break;
    default:
      return;
  }

  // Actualizar el juego, dibujar el mapa actualizado, etc.
  // ...
}

Se ve algo parecido en las clases de progra gratis de platzi, así que repetí esta clase con el switch 😄

Por ahora no se me ocurrió otra cosa 😅

Yo utilicé un objeto, creo que sería lo mas optimo

btnUp.addEventListener('click', moveUp)
btnLeft.addEventListener('click', moveLeft)
btnRight.addEventListener('click', moveRight)
btnDown.addEventListener('click', moveDown)

function moveUp() {
  console.log("Me movere hacia arriba")
}

function moveLeft() {
  console.log("Me movere hacia izquierda")
}

function moveRight() {
  console.log("Me movere hacia derecha")
}

function moveDown() {
  console.log("Me movere hacia abajo")
}

const keyboard = {
  ArrowUp: moveUp,
  ArrowDown: moveDown,
  ArrowLeft: moveLeft,
  ArrowRight: moveRight
}
window.addEventListener("keydown", (e) => {
  let tecla = e.key
  keyboard[tecla]
})

Mi solución con un objeto literal y switch para las teclas, y luego una función para cada botón del html:

const up = document.getElementById('up');
const down = document.getElementById('down');
const right = document.getElementById('right');
const left = document.getElementById('left');

document.addEventListener('keydown', movePlayerByKey);

up.addEventListener('click', movePlayerUp);
down.addEventListener('click', movePlayerDown);
left.addEventListener('click', movePlayerLeft);
right.addEventListener('click', movePlayerRight);

function movePlayerByKey(evnt){
    const keys = {
        UP: 38,
        DOWN: 40,
        LEFT: 37,
        RIGHT: 39
    }
    switch(evnt.keyCode){
        case keys.UP:
            console.log("Arriba");
            break;
        case keys.DOWN:
            console.log("Abajo");
            break;
        case keys.LEFT:
            console.log("Izquierda");
            break;
        case keys.RIGHT:
            console.log("Derecha");
            break;
        default: console.log("Incorrecto");    
    }
}

function movePlayerUp(evnt){
    console.log("Arriba");
}
function movePlayerDown(evnt){
    console.log("Abajo");
}
function movePlayerLeft(evnt){
    console.log("Izquierda");
}
function movePlayerRight(evnt){
    console.log("Derecha");
}

pd: El curso de prog básica utiliza esto con teclas del teclado para dibujar en canvas, se los recomiendo (lo da Freddy)

queria intentar dibujarlo y hacer el movimiento pero no se pudo…

document.onkeydown = checkKey;

function checkKey (event) {
    event = event || window.event;
    if(event.keyCode == '38') {
        console.log('up')
    }
    else if(event.keyCode == '40') {
        console.log('down')
    }
    else if(event.keyCode == '37') {
        console.log('left')
    }
    else if(event.keyCode == '39') {
        console.log('right')
    } 
}```

function move(event){
  //console.log(event) 
    let nameTwo = event.key
    let nameOne = event.srcElement.id
    if(nameTwo=='ArrowUp'||nameTwo=='ArrowDown'||nameTwo=='ArrowLeft'||nameTwo=='ArrowRight') nameOne = ""
    if(nameOne == "up" || nameTwo == 'ArrowUp') console.log('up')
    if(nameOne == "down" || nameTwo == 'ArrowDown') console.log('down')
    if(nameOne == "left" || nameTwo == 'ArrowLeft') console.log('left')
    if(nameOne == "right" || nameTwo == 'ArrowRight') console.log('right')
}

Mi solución al reto uwu

const botones = {
    'Arriba' : document.getElementById('up'),
    'Abajo' : document.getElementById('down'),
    'Izquierda' : document.getElementById('left'),
    'Derecha' : document.getElementById('right'),
}

document.addEventListener('keydown',moverJugador);
for(let boton in botones){
    botones[boton].addEventListener('click', moverJugador);
}

function moverJugador(e){
    if(e.key){
        const keys = {
            'ArrowUp' : 'Arriba',
            'ArrowRight' : 'Derecha',
            'ArrowDown' : 'Abajo',
            'ArrowLeft' : 'Izquierda'
        };
        if(keys.hasOwnProperty(e.key)){
            console.log(keys[e.key]);
        }
    }else if(e.target){
        for(let boton in botones){
            if(e.target == botones[boton]){
                console.log(boton);
            }
        }
    }
}