Mover un elemento del DOM con las teclas de dirección

Un buen amigo me preguntó: «Cómo se hace para mover un ‘div’ con Javascript? Así como en los juegos, con las flechas del teclado.».

Para responder a su inquietud decidí hacerlo con un ejemplo.

Comencé por un simple documento html que consta de un div (.box-container) que contiene a otro (#box) que será el que se mueva dentro de los limites de su padre; y le salpiqué un poco de CSS para definir visualmente a ambos.

Por último, escribí move-it.js en VanillaJS porque no queremos depender de jQuery para todo. La clave acá es hacer que el document ‘escuche’ el evento ‘onkeydown’, y enlazar (bind) este evento con nuestra función ‘move’.

var e = document.captureEvents(Event.KEYDOWN);

window.onload = function() {
  // Bind the 'onkeydown' event to the document
  document.onkeydown = function(e) {
    move(e);
  };
};

La función move recibe como argumento el evento, descifra cuál fue la tecla pulsada por el usuario (izquierda, arriba, derecha, abajo) y con base en ella modificar las propiedades ‘top’ y ‘left’ en el inline-style del elemento ‘box’.

Et voilà! Nuestro personaje se mueve en 2D!

See the Pen Mover un elemento del DOM con las teclas de dirección by Victor Noguera (@nvictorme) on CodePen.dark

Senior Full-stack Developer. Self-taught programmer since I was 11yo. Chemical Engineer specialized in Waste Water Bio-treatment and Process simulation and modeling. Major Geek.