Sposta Div con JavaScript OnKeyDown

Question

Sto cercando di rendere il mio div muoversi con i tasti freccia (37 e 39) e premere la barra spaziatrice per far apparire un segretodown e sparire il tallone. Ma la cosa è: voglio che il div continui a muoversi quando premo la barra spaziatrice.In questo momento, il div si smette di muoversi quando lo faccio.

Ho pensato di mettere le chiavi in un array funzionerebbe, ma non l'ha fatto, hai un suggerimento per aiutarmi?:)

Il codice deve essere in JavaScript.

var keysPressed = new Array();
window.onkeydown = keyDownHandler;
window.onkeyup = keyUpHandler;

function keyDownHandler(e){
    var s="";
    keysPressed[e.which] = true;
    Key = window.event.keyCode;
    s+=Key+" activee:" + keysPressed[e.which];
    updateKeys();
    document.getElementById("moveDiv").innerHTML  = s;
}

function keyUpHandler(e){
     s="";
     keysPressed[e.which] = false;
     Key = window.event.keyCode;
     s+=Key+" activee:" + keysPressed[e.which];
     updateKeys();
     document.getElementById("moveDiv").innerHTML  = s;
}
    var left=0;
    var top = 0;
function updateKeys(){
    if(keysPressed[39]){
        document.getElementById("moveDiv").style.left = left + 10+"px";
        left += 10;
    }
    if(keysPressed[37]){
        document.getElementById("moveDiv").style.left = left -10+"px";
        left-=10;
    }
    if(keysPressed[32]){
        document.getElementById("show").style.display = "block";
    }
    if(!keysPressed[32]){
        document.getElementById("show").style.display = "none";
    }

}

.

HTML:

<div style="position:absolute;" id="moveDiv"></div>
<div style="position:absolute; 
                left:500px; 
                top:500px; 
                display: none;" id="show">Pressed spacebar</div>

.

Answer 1

è questo quello che stavi cercando di raggiungere?

Fiddle

function updateKeys() {
    if (keysPressed[0])
        left -= speed;
    if (keysPressed[2])
        left += speed;
    if (keysPressed[1])
        top -= speed;
    if (keysPressed[3])
        top += speed;

    document.getElementById("moveDiv").style.left = left + "px";
    document.getElementById("moveDiv").style.top = top + "px";
    if (spacePressed)
        document.getElementById("show").style.display = "block";
    else
        document.getElementById("show").style.display = "none";
}

setInterval(updateKeys, 1);

.

Leggi su setInterval se non ne hai familiarità con esso

Imposta fondamentalmente una funzione per eseguire tutti i millisecondi dettagliati, in questo caso ogni 1 millisecondo la funzione updateKeys viene eseguita.