déplacer l'élément avec la touche (plusieurs)

Mouvement en diagonale ne fonctionne pas et la question sur la gauche-appuyez de manière prolongée/droite simultanée

Mais sur la double pression de touche, le navire devient fou!

$(document).bind('keydown', function(e) {
    var box = $("#plane"),
        left = 37,
        up = 38,
        right = 39,
        down = 40

    if (e.keyCode == left) {
        box.animate({left: "-=5000"},3000);
    }
    if (e.keyCode == up) {
        box.animate({top: "-=5000"},3000);
    }
    if (e.keyCode == right) {
        box.animate({left:"+=5000"},3000);
    }
    if (e.keyCode == down) {
        box.animate({top: "+=5000"},3000);
    }
});
$(document).bind('keyup', function() {
    $('#plane').stop();
});
Je parie que oui,quelqu'un l'a fait
+1! GRrreat commentaire! 😀 hehe j'ai failli cracher mon café!
heureux de vous rendre heureux. Je vais essayer quelque chose quand je reviens de mon déjeuner
J'y travaille déjà! (la haine google parfois) Laissez-moi savoir quand vous êtes plein!
got maintenant 😉 🙂

OriginalL'auteur Roko C. Buljan | 2011-09-04

  1. 9

    J'ai foiré autour avec une chose de similaire et voici une solution je suis tombé sur qui fonctionne.

    setInterval(movePlane, 20);
var keys = {}

$(document).keydown(function(e) {
    keys[e.keyCode] = true;
});

$(document).keyup(function(e) {
    delete keys[e.keyCode];
});

function movePlane() {
    for (var direction in keys) {
        if (!keys.hasOwnProperty(direction)) continue;
        if (direction == 37) {
            $("#plane").animate({left: "-=5"}, 0);                
        }
        if (direction == 38) {
            $("#plane").animate({top: "-=5"}, 0);  
        }
        if (direction == 39) {
            $("#plane").animate({left: "+=5"}, 0);  
        }
        if (direction == 40) {
            $("#plane").animate({top: "+=5"}, 0);  
        }
    }
}

    Démo

    Le problème avec le retard semble être que la plupart des navigateurs de prendre la première entrée (keyDown) et puis ils ont une demi-seconde de retard avant d'exécuter les fonctions sur et sur. Si nous n'avons pas de rappeler la fonction sur keydown, mais plutôt un intervalle de vérification d'un tableau associatif où l'on conserve à ce que les touches sont maintenues enfoncées, qui semble lisse mouvement. Il permet également de plusieurs touches à enfoncer à la fois, ce qui signifie que les mouvements en diagonale. Ensuite, nous allons supprimer les touches correspondantes en utilisant l'événement keyup.

    Dans cette solution, vous avez deux façons de gérer la vitesse de l'élément que vous souhaitez déplacer.

    1. La fréquence de mise à jour de l'intervalle. (20ms dans la démo ci-dessus)
    2. Le nombre de pixels par déplacement de l'avion. (5 dans la démo ci-dessus)

    Je trouve que 20 ms sur l'intervalle de fréquence vous donne assez de mouvement lisse.

    Je me rends compte que c'est vraiment un vieux thread, mais j'ai pensé contribuent à leur manière.

    Vous aime!!! Vous avez résolu mon problème, merci
    Votre image n'est pas de travailler plus, mais si vous collez un lien vers une image, le violon ... bel exemple.
    Mis à jour le violon avec une image de travail. Merci pour le heads-up.

    OriginalL'auteur svsk

  2. 2

    sur cet intervalle,

    http://jsfiddle.net/fbFuW/21/

    var leftDown, rightDown, upDown, downDown,leftKey,upKey,rightKey,downKey;
var box = $("#plane");
function keye(e) {
console.log(e.keyCode);
var $key = e.keyCode;
$(document).keydown(function(e) {
if (e.keyCode == left && $key != left) leftDown = true;
if (e.keyCode == right && $key != right) rightDown = true;
if (e.keyCode == down && $key != down) downDown = true;
if (e.keyCode == up && $key != up) upDown = true;
}).keyup(function(e) {
if (e.keyCode == left) leftDown = false;
if (e.keyCode == right) rightDown = false;
if (e.keyCode == down) downDown = false;
if (e.keyCode == up) upDown = false;
});
if (e.keyCode == left) {
leftKey = true;
}
if (e.keyCode == up) {
upKey = true;
}
if (e.keyCode == right) {
rightKey = true;
}
if (e.keyCode == down) {
downKey = true;
}
}
$("body").keydown(function(){
keye(event); 
});
$("body").keyup(function(e){
if (e.keyCode == left) {
leftKey = false;
}
if (e.keyCode == up) {
upKey = false;
}
if (e.keyCode == right) {
rightKey = false;
}
if (e.keyCode == down) {
downKey = false;
}
});
setInterval(function() {
if (leftDown) {
box.css('left', '-=5');
}
if (rightDown) {
box.css('left', '+=5');
}
if (downDown) {
box.css('top', '+=5');
}
if (upDown) {
box.css('top', '-=5');
}
if (upKey) {
box.css("top", "-=5");
}
if (rightKey) {
box.css("left", "+=5");
}
if (downKey) {
box.css("top", "+=5");
}
if (leftKey) {
box.css("left", "-=5");
}
},20);
    +1 Merci genèse! C'est jolie..... long! 🙂 mais il fonctionne... presque. Il y a encore quelques arrêter de retard. Essayez de garder la "gauche" pressé et que la commutation rapide de "droit". Le navire de décrochage. :\
    désolé, appuyez sur la touche F5. J'ai obtenu quelques factice si les déclarations.
    Je l'ai fait... regarde ma Question. J'ai ajouté un peu modifier.
    eu quelques progrès, mais il est en train de voler autour sans l'approbation du! jsfiddle.net/fbFuW/17
    de se ! Regarde mon edit'

    OriginalL'auteur genesis

  3. 1

    Comment à ce sujet à l'aide de jquery animate. Il est presque prévenir le retard de mouvement.

    Voir démo

    OriginalL'auteur Tushar Ahirrao