Eventos y botones
Contenido del curso
Canvas
Mapa del juego
Movimientos del jugador
Colisiones
Bonus: adictividad
Deploy
Próximos pasos
Eventos y botones
Eventos y botones
Contenido del curso
Erick Salas
Diego Toro Cárdenas
Enrique Aguilera
Juan Castro
Profesor
Jonathan Meixueiro
César Augusto Cortés Labrada
Camilo Taborda
Nestor Rios Garcia
Gualberto Montiel
Aaron Santiago Loyo Zabala
Angel David Velasco Bonifaz
Jonhatan prieto mora
Tommy Toala Cox
Josue Cerron Tuesta
Abigail Nahomi Chávez Lozano
Mateo Bossa
Valeria Soledad Paez
Jorge Isaac Villa Lopez
Juan Carlos Montilla Sánchez
Jesus Martinez
Nestor Rios Garcia
Juan Pablo Vargas Ramirez
Edgar Roy Huaman Pumachapi
Raúl Adolfo Sánchez Rodríguez
Matías Wasiak
Manuel Andres García Vera
Luis Miguel Rodríguez
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; } });
✅ Hace tiempo en un tutorial escuché que después de dos if es mejor usar entonces switch ✅
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"))
:clap:
Closures!!! veo que dominas la magia negra >:D
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(); } }
Una respuesta muy inteligente
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`); }
Bastante bien la verdad
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.
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](); }
++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](); }
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?)
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. 🚀
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');}
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); }