Acá te dejo otro vía para lograr tu objetivo, es bastante más compleja que la del maestro Yussef, a cambio, el movimiento es más fluido (o a mi me parece).
setInterval( function() {
if( puede ) {
mover();
}
}, 5 ); // es el intervalo entre eventos (en miliseg).
let puede = false;
let direccion = "";
let y = 10;
let x = 10;
function mover() {
if( direccion == "der" ) {
cubo.style.left = ++x + "px";
}
else if( direccion == "arr" ) {
cubo.style.top = --y + "px";
}
else if( direccion == "izq" ) {
cubo.style.left = --x + "px";
}
else if( direccion == "aba" ) {
cubo.style.top = ++y + "px";
}
}
document.addEventListener( "keydown", (e) => {
puede = true;
if( e.code === "ArrowRight" ) {
direccion = "der";
}
else if( e.code === "ArrowUp" ) {
direccion = "arr";
}
else if( e.code === "ArrowLeft" ) {
direccion = "izq";
}
else if( e.code === "ArrowDown" ) {
direccion = "aba";
}
});
let po = document.addEventListener( "keyup", (e) => {
puede = false;
});
#cubo {
height: 55px;
width: 47px;
background-color: red;
position: absolute;
top: 10;
left: 10;
color: blue;
}
<div id="cubo"> XXXX<br>XXXX<br>XXXX </div>
La función setInterval, dispara a mover cada cierto tiempo, si es que puede es true (este booleano lo usamos para condicionar el movimiento, a que haya una tecla apretada).
Usamos dos escuchadores de eventos, uno para detectar un keydown, y el otro un keyup.
Si tenemos un keydown, asigamos a puede "true", con el bloque if / else if, identificamos la tecla apretada, y en base a cual es, asignamos a direccion el valor correspondiente.
Si el evento es un keyup, simplemente asignamos a puede false.