1

Tengo un codigo JavaScript que tiene un cubo que al tocar tocar el los botones asignados se mueve pero solo funciona una sola vez por tecla y quiero que al tocar una tecla se repita hasta que toca otra como el juego de la serpiente.


let y = 0;
let x = 0;

let c = 1;
let t = 1;

let movimiento = document.addEventListener("keydown", (e)=>{
    if (e.code === "ArrowRight") {
        x = c;
        c++
        cubo.style.right = (-x) + "px";
    }
    if (e.code === "ArrowUp") {
        y = t;
        t++
        cubo.style.top = (-y) + "px";
    }
    if (e.code === "ArrowLeft") {
        x = c;
        c++
        cubo.style.left = (-x) + "px";
    }
    if (e.code === "ArrowDown") {
        y = t;
        t++
        cubo.style.bottom = (-y) + "px";
    }
})```
1

2 respuestas 2

1

Tu problema es que eventualmente el elemento tiene asignado top y bottom y/o left y right al mismo tiempo, por eso solo te funciona unas pocas veces.

Yo crearía una variable offset para variar la velocidad, un x e y para la posición

let y = 0;
let x = 0;
let offset=10;

document.addEventListener("keydown", (e)=>{
    if (e.code === "ArrowRight") x+= offset;       
    else if (e.code === "ArrowUp")  y-= offset;
    else if (e.code === "ArrowLeft") x-= offset;     
    else if (e.code === "ArrowDown") y+= offset;

    cubo.style.top = y + "px";
    cubo.style.left = x + "px";
});
#cubo{
  height:50px;
  width:50px;
  background-color:blue;
  position:absolute;
  top:0;
  left:0;
  color:white;
}
<div id="cubo">CLICK</div>

1

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.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.