No tienes acceso a esta clase

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

Eventos y botones

8/24
Recursos

Aportes 56

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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 鈥渁ddEventListener鈥

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

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`);
}
function moveByKeys(event) {
    const moveFunctions = {
        ArrowUp: moveUp,
        ArrowLeft: moveLeft,
        ArrowRight: moveRight,
        ArrowDown: moveDown
      };
    
      const moveFunction = moveFunctions[event.key];
      if (moveFunction) {
        moveFunction();
      }
}

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 鈥榯arget鈥 del evento PointerEvent(as铆 como obtuvimos 鈥榢ey鈥 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(鈥渃lick鈥, ()=>{
console.log(direccion);
})
}
botones (botonUp, 鈥渁rriba鈥);
botones (botonDow, 鈥渁bajo鈥);
botones (botonLef, 鈥渋zquierda鈥);
botones (botonRig, 鈥渄erecha鈥);

window.addEventListener(鈥渒eydown鈥,teclado)
function teclado(event){
if (event.key == 鈥淎rrowUp鈥){
console.log(鈥渁rriba鈥);
}else if(event.key == 鈥淎rrowDown鈥){
console.log(鈥渁bajo鈥);
}else if(event.key == 鈥淎rrowLeft鈥){
console.log(鈥渋zquierda鈥);
}else if(event.key == 鈥淎rrowRight鈥){
console.log(鈥渄erecha鈥);
}
}

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 鈥淎rriba鈥

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

function moverArriba() {
    console.log("arriba");
}
Al igual que tienen un nombre cada letra tiene un c贸digo, en este caso quedo de la siguiente forma.function moveByKeys(e){聽 聽 *// console.log(e);*聽 聽 *if*(e.keyCode *==* 37) moveLeft()聽 聽 *if*(e.keyCode *==* 38) moveUp()聽 聽 *if*(e.keyCode *==* 39) moveRight()聽 聽 *if*(e.keyCode *==* 40) moveDown()} ```js function moveByKeys(e){ // console.log(e); if(e.keyCode == 37) moveLeft() if(e.keyCode == 38) moveUp() if(e.keyCode == 39) moveRight() if(e.keyCode == 40) moveDown() } ```Al igual una p谩gina que tiene mucha informaci贸n sobre la tecla que presionemos y lo que podemos hacer con ella, esta <https://www.toptal.com/developers/keycode>

btnUp.addEventListener(鈥榗lick鈥, moveUp);
btnLeft.addEventListener(鈥榗lick鈥,moveLeft);
btnRight.addEventListener(鈥榗lick鈥,moveRight);
btnDown.addEventListener(鈥榗lick鈥,moveDown);

function moveUp(){
console.log(鈥楳e quiero mover hacia arriba鈥);

}
function moveLeft(){
console.log(鈥楳e quiero mover hacia la izquierda鈥);
}
function moveRight(){
console.log(鈥楳e quiero mover hacia la derecha鈥);

}
function moveDown(){
console.log(鈥楳e quiero mover hacia abajo鈥);

}

como muchos de los compa帽eros yo tambien utilice un switch, me parece que es mas ordenado pero al final del dia es eleccion y comodidad de cada quien :D.. les comparto mi codigo. `//`` EVENTOS DE MOVIMIENTO PARA EL JUGADOR.` `window.addEventListener('keydown',moveByKeys)` `btnUp.addEventListener('click', moveUp);btnDown.addEventListener('click', moveDown);btnLeft.addEventListener('click', moveLeft);btnRight.addEventListener('click', moveRight);` `function moveByKeys(event){聽 聽 聽 聽 switch (event.key) {聽 聽 聽 聽 case "ArrowUp":聽 聽 聽 聽 聽 聽 moveUp();聽 聽 聽 聽 聽 聽 break;聽 聽 聽 聽 case "ArrowDown":聽 聽 聽 聽 聽 聽 moveDown();聽 聽 聽 聽 聽 聽 break;聽 聽 聽 聽 case "ArrowLeft":聽 聽 聽 聽 聽 聽 moveLeft();聽 聽 聽 聽 聽 聽 break;聽 聽 聽 聽 case "ArrowRight":聽 聽 聽 聽 聽 聽 moveRight();聽 聽 聽 聽 聽 聽 break;聽 聽 }` `}function moveUp(){聽 聽 console.log('Me muevo hacia arriba');}function moveDown(){聽 聽 console.log('Me muevo hacia abajo');}function moveLeft(){聽 聽 console.log('Me muevo hacia izquieda');}function moveRight(){聽 聽 console.log('Me muevo hacia derecha');}`
como muchos de los compa帽eros yo tambien utilice un switch, me parece que es mas ordenado pero al final del dia es eleccion y comodidad de cada quien :D.. les comparto mi codigo. // *EVENTOS DE MOVIMIENTO PARA EL JUGADOR.* window.addEventListener('keydown',moveByKeys) btnUp.addEventListener('click', moveUp);btnDown.addEventListener('click', moveDown);btnLeft.addEventListener('click', moveLeft);btnRight.addEventListener('click', moveRight); function moveByKeys(event){聽 聽 聽 聽 switch (event.key) {聽 聽 聽 聽 case "ArrowUp":聽 聽 聽 聽 聽 聽 moveUp();聽 聽 聽 聽 聽 聽 break;聽 聽 聽 聽 case "ArrowDown":聽 聽 聽 聽 聽 聽 moveDown();聽 聽 聽 聽 聽 聽 break;聽 聽 聽 聽 case "ArrowLeft":聽 聽 聽 聽 聽 聽 moveLeft();聽 聽 聽 聽 聽 聽 break;聽 聽 聽 聽 case "ArrowRight":聽 聽 聽 聽 聽 聽 moveRight();聽 聽 聽 聽 聽 聽 break;聽 聽 } }function moveUp(){聽 聽 console.log('Me muevo hacia arriba');}function moveDown(){聽 聽 console.log('Me muevo hacia abajo');}function moveLeft(){聽 聽 console.log('Me muevo hacia izquieda');}function moveRight(){聽 聽 console.log('Me muevo hacia derecha');}
```js function moveByKeys(event){ keyOptions = {'ArrowUp': moveUp, 'ArrowRight': moveRight, 'ArrowDown': moveDown, 'ArrowLeft': moveLeft} if (event.key in keyOptions){ keyOptions[event.key]() } } ```

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