Eventos y botones

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

Erick Salas

student•

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

Diego Toro Cárdenas

student•

✅ Hace tiempo en un tutorial escuché que después de dos if es mejor usar entonces switch ✅

Enrique Aguilera

student•

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

Juan Castro

teacher•

:clap:

Jonathan Meixueiro

student•

Closures!!! veo que dominas la magia negra >:D

César Augusto Cortés Labrada

student•

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

Camilo Taborda

student•

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

Nestor Rios Garcia

student•

Una respuesta muy inteligente

Gualberto Montiel

student•

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

Aaron Santiago Loyo Zabala

student•

Bastante bien la verdad

Angel David Velasco Bonifaz

student•

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.

Jonhatan prieto mora

student•

Yo hice algo parecido pero no use el switch si no un objeto con las funciones

este es el html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Juego de obstaculos</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="game-container">
    <canvas id="game">
    </canvas>
    <div class="container-buttons">
      <button id="up" class="retro-button" onclick= "moveUp()">⇑</button>
      <button id="left" class="retro-button" onclick= "moveLeft()">⇐</button>
      <button id="right" class="retro-button" onclick= "moveRight()">⇒</button>
      <button id="down" class="retro-button"onclick= "moveDown()">⇓</button>
    </div>
    <div class="messages">
      <p>mensajes...</p>
      <p>mensajes...</p>
      <p>mensajes...</p>
    </div>
  </div>
  <script src="./js/map.js"></script>
  <script src="./js/game.js"></script>
</body>
</html>

y este es el javascript

"use strict";
const canvas = document.querySelector("#game");
const game = canvas.getContext("2d");
const fixPosition = 6;
let canvasSize;
let elementsSize;
let level = 0;
const keysFunction = {
    'ArrowUp': moveUp,
    'ArrowDown': moveDown,
    'ArrowLeft': moveLeft,
    'ArrowRight': moveRight
};
window.addEventListener("load", setCanvasSize);
window.addEventListener("resize", setCanvasSize);
window.addEventListener("keydown", moveByKey);
function startGame() {
    game.clearRect(0, 0, canvasSize, canvasSize);
    game.font = `${elementsSize}px Verdana`;
    game.textAlign = "end";
    let map = maps[level].match(/[IXO\-]+/g).map(i => i.split(""));
    map.forEach((row, rowIndex) => {
        row.forEach((col, colIndex) => {
            const emoji = emojis[col];
            const posX = (elementsSize * (colIndex + 1)) + fixPosition;
            const posY = (elementsSize * (rowIndex + 1)) - fixPosition;
            game.fillText(emoji, posX, posY);
        });
    });
}
function setCanvasSize() {
    canvasSize = window.innerHeight > window.innerWidth ? window.innerWidth * 0.8 : window.innerHeight * 0.8;
    elementsSize = canvasSize * 0.1;
    canvas.setAttribute("width", canvasSize.toString());
    canvas.setAttribute("height", canvasSize.toString());
    startGame();
}
function moveUp() {
    console.log("arriba");
}
function moveDown() {
    console.log("abajo");
}
function moveLeft() {
    console.log("izquierda");
}
function moveRight() {
    console.log("derecha");
}
function moveByKey(event) {
    let tecla = event.key;
    keysFunction[tecla]();
}

Tommy Toala Cox

student•

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

Josue Cerron Tuesta

student•

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

Abigail Nahomi Chávez Lozano

student•

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

Mateo Bossa

student•

Valeria Soledad Paez

student•

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

Jorge Isaac Villa Lopez

student•

Profesor, tengo una consulta con respecto al window.addEventListener("keydown", moveBykeys); esta función sirve igual, para los PC con otro sistema operativo (linux, Mack, etc?)

Juan Carlos Montilla Sánchez

student•

Hola, Jorge.

Sí, hasta donde tengo entendido, estas utilizando las API del navegador, es decir, que sin importar el equipo en el que estés; más importa en qué navegador te encuentres.

Saludos. 🚀

Jesus Martinez

student•

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

Nestor Rios Garcia

student•

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 💚

Juan Pablo Vargas Ramirez

student•

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

Edgar Roy Huaman Pumachapi

student•

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

Raúl Adolfo Sánchez Rodríguez

student•

Evento keydown

Mira las siguientes slides:

Matías Wasiak

student•

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

Manuel Andres García Vera

student•

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
    }

}

Luis Miguel Rodriguez

student•

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

Eventos y botones

Introducción

Programemos un juego con JavaScript

Canvas

¿Qué es canvas en JavaScript?

Tamaño del canvas y sus elementos

Canvas responsive

Mapa del juego

¿Qué es un array bidimensional?

Arreglos multidimensionales en JavaScript

Refactor del mapa de juego

Movimientos del jugador

Eventos y botones

Objeto playerPosition

Limpieza de movimientos

No te salgas del mapa

Colisiones

Detectando colisiones fijas

Detectando colisiones con arrays

Victoria: subiendo de nivel

Derrota: perdiendo vidas

Bonus: adictividad

Sistema de vidas y corazones

Sistema de tiempo y puntajes

¿Qué es localStorage?

Guardando records del jugador

Deploy

Depurando errores del juego

Desplegando el juego a GitHub Pages

Próximos pasos

Reto: reinicio del juego

Reto: timeouts de victoria o derrota

¿Quieres un simulador laboral?