Inicio Apuntes FPApuntes DAW onkeyup, un ejemplo de uso con las flechas del teclado

onkeyup, un ejemplo de uso con las flechas del teclado

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy vengo a dejar un pequeño artículo (que ya tiene solera), por que un usuario ha dejado un comentario en el artículo Mover un objeto por pantalla utilizando JavaScript en el que me decía que él estaba buscando algo que le permitiese mover el objeto utilizando las flechas del teclado. Pues buscando un poco en un disco duro, me encontré un ejercicio JavaScript de hace unos años en los que utilizando los eventos onkeyup para mover un dibujo por pantalla con el teclado. Esto creo que no es exactamente lo que este usuario buscaba, pero quizás pueda serle de ayuda para sacar el código que busca.

¿Qué es onkeyup?

Es un evento que se ejecuta cuando la tecla deja de estar abajo (o sea, cuando soltamos la tecla). Los eventos keydown y keyup proporcionan un código que indica qué tecla se presiona, mientras que keypress indica qué carácter se escribió.

¿Cómo escribir el evento keyup?

Si quieres utilizar un evento keyup, tienes que que utilizarlo desde la función correspondiente. Esta no es la única forma de ejecutar estos eventos, pero es la que recuerdo.

function Nombre_de_la_función(event){
   if (event.keyCode == 'código_de_la_tecla'){
      //acción a ejecutar
   }
}
window.onkeyup = Nombre_de_la_función;

Ejemplo usando el evento onkeyup

En este ejemplo vamos a crear un cuadrado en pantalla, y lo podremos mover por la pantalla del navegador utilizando las teclas de flecha arriba, abajo, izquierda y derecha. Este ejemplo lo vamos a realizar en un mismo documento html, pero se puede dividir en un archivo html, un css y otro javascript.

evento onkeyup

El código numérico de las flechas del teclado

Antes de empezar, con el código en javascript, debemos saber el código numérico de las flechas del teclado necesario pasa poder utilizar las flechas del teclado para mover el cuadrado del ejemplo:

  • Flecha arriba: 38
  • Flecha abajo: 40
  • Flecha izquierda: 37
  • Flecha  derecha: 39

El código del ejemplo

Para mostrar el ejemplo, vamos a crear el archivo llamado index.html. Como decía, podríamos, podríamos enlazar o insertar los otros documentos con extensión .css y .js. y para este ejemplo vamos a ponerlo todo el mismo archivo index.html.

<!DOCTYPE html>
<html lang="en-ES">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo onKeyup</title>
    <style>
      #cuadrado {
        background-color: #00883b;
        height: 100px;
        width: 100px;
        border-radius: 20px;
        position: absolute;
        top: 0px;
        left: 0px;
      }
    </style>
  </head>
  <body>
    <div id="cuadrado"></div> <!--div en donde se mostrará el cuadrado a mover-->
    <script>
      let x = 0;
      let y = 0;
      let cuadrado = document.getElementById("cuadrado");

      /*
       *Hacia la derecha sumamos, Hacia la izquierda restamos, Hacia arriba sumamos, hacia abajo restamos
       */

      function mover(event) {
        if (event.keyCode == "39") {
          x = x + 100; //derecha
          cuadrado.style.left = x + "px";
        }

        if (event.keyCode == "37") {
          x = x - 100; //Izquierda
          cuadrado.style.left = x + "px";
        }

        if (event.keyCode == "38") {
          y = y + 100; //arriba
          cuadrado.style.top = -y + "px";
        }

        if (event.keyCode == "40") {
          y = y - 100; //abajo
          cuadrado.style.top = -y + "px";
        }
      }

      window.onkeyup = mover;
    </script>
  </body>
</html>

El código CSS

En el código CSS le vamos a dar color, tamaño, posición inicial, y un borde al cuadrado que después vamos a mover. Como es sabido por todos, un cuadrado tiene los lados del mismo tamaño, y esto lo indicaremos en el width y el height.

#cuadrado {
        background-color: #00883b;
        height: 100px;
        width: 100px;
        border-radius: 20px;
        position: absolute;
        top: 0px;
        left: 0px;
      }

El código JavaScript

Ahora pasamos a la parte del movimiento. Aquí veremos el movimiento del cuadrado en el sistema de coordenadas, pero en el documento html funciona distinto.

Para movernos hacia la derecha sumamos o incrementamos en x. Para movernos hacia la izquierda restamos o decrementos en x. Para movernos hacia arriba, vamos sumando o incrementando en y. Y para movernos hacia abajo decrementamos en y.

Par empezar vamos a crear 2 variables, como son x e y, que indican cuanto nos moveremos hacia arriba e izquierda.

Usamos onkeyup para que detecte la tecla que presionamos. Después lo vamos a comparar la tecla que escogimos. Si ambas son iguales, ejecutará la acción de mover en la dirección escogida.

      let x = 0;
      let y = 0;
      let cuadrado = document.getElementById("cuadrado");

      /*
       *Hacia la derecha sumamos, Hacia la izquierda restamos, Hacia arriba sumamos, hacia abajo restamos
       */

      function mover(event) {
        if (event.keyCode == "39") {
          x = x + 100; //derecha
          cuadrado.style.left = x + "px";
        }

        if (event.keyCode == "37") {
          x = x - 100; //Izquierda
          cuadrado.style.left = x + "px";
        }

        if (event.keyCode == "38") {
          y = y + 100; //arriba
          cuadrado.style.top = -y + "px";
        }

        if (event.keyCode == "40") {
          y = y - 100; //abajo
          cuadrado.style.top = -y + "px";
        }
      }

      window.onkeyup = mover;

La lógica del eje de coordenadas puede aplicarse a otros lenguajes, lo que cambiaría es como representamos esto en la parte visual o gráfica.

Si quieres ver funcionando este ejemplo, puedes verlo en la sección de ejemplos.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.