How can i make a movement of a element while the user is "keydown" and then if he make "keyup" to stop the animation(movement), this is my code by now

$(document).ready(function(){

    function checkKey(e){
         switch (e.keyCode) {
            case 40:
                //alert('down');
                $('#cube').animate({top: "+=20px"})
                break;
            case 38:
                //alert('up');
                $('#cube').animate({top: "-=20px"})
                break;
            case 37:
                //alert('left');
                $('#cube').animate({left: "-=20px"})
                break;
            case 39:
                //alert('right');
                $('#cube').animate({left: "+=20px"})
                break;
            default:
                alert('???');  
                }      
    }

    if ($.browser.mozilla) {
        $(document).keydown (checkKey);
    } else {
        $(document).keydown (checkKey);
    }
})

i want to move the cube while the user press the key (down, left, up, right), not with every press, is possible?

How can i make a movement of a element while the user is "keydown" and then if he make "keyup" to stop the animation(movement), this is my code by now

$(document).ready(function(){

    function checkKey(e){
         switch (e.keyCode) {
            case 40:
                //alert('down');
                $('#cube').animate({top: "+=20px"})
                break;
            case 38:
                //alert('up');
                $('#cube').animate({top: "-=20px"})
                break;
            case 37:
                //alert('left');
                $('#cube').animate({left: "-=20px"})
                break;
            case 39:
                //alert('right');
                $('#cube').animate({left: "+=20px"})
                break;
            default:
                alert('???');  
                }      
    }

    if ($.browser.mozilla) {
        $(document).keydown (checkKey);
    } else {
        $(document).keydown (checkKey);
    }
})

i want to move the cube while the user press the key (down, left, up, right), not with every press, is possible?

• javascript
• jquery

4 Answers 4

You need a simple 2D engine that will setup a game loop.

Simple demo: http://jsfiddle/kzXek/

Source: https://github./superrob/simple-2D-javascript-engine/blob/master/simple2d.html

Is that you are looking for?

$(document).on("keyup", function() {
    $("#cube").stop(true);
});

DEMO: http://jsfiddle/LjGRe/

you can just change the checkKey function, and add this to it :

   function checkKey(e){
          $(document).keyup(return);
         switch (e.keyCode) {
            case 40:
                //alert('down');
                $('#cube').animate({top: "+=20px"})
                break;
            case 38:
                //alert('up');
                $('#cube').animate({top: "-=20px"})
                break;
            case 37:
                //alert('left');
                $('#cube').animate({left: "-=20px"})
                break;
            case 39:
                //alert('right');
                $('#cube').animate({left: "+=20px"})
                break;
            default:
                alert('???');  
                }      
    }

I think using a timer to handle the animation is better.

You just start the timer when a key is pressed and stop it when the key is released ..

Here is a simple solution that handles multiple keypresses (can move diagonally)

var direction = {top:0,left:0},
    animator = null,
    cube = $("#cube");

function animate(){
    cube.css({
        top: '+=' + direction.top,
        left: '+=' + direction.left
    });
}
function setProperties(keyCode, unset){
        switch (keyCode) {
        case 40:
                direction.top = (unset)?0:2;
            break;
        case 38:
            direction.top = (unset)?0:-2;
            break;
        case 37:
            direction.left = (unset)?0:-2;
            break;
        case 39:
            direction.left = (unset)?0:2;
            break;
    }  
}
function setKey(e) {

    setProperties(e.keyCode);

    if (animator === null){
        animator = setInterval(animate, 10);
    }
}
function unsetKey(e){
    setProperties(e.keyCode, true);
    if (direction.top === 0 && direction.left === 0){
        clearTimeout(animator);
        animator = null;
    }
}

$(document)
    .on("keyup", unsetKey)
    .on('keydown', setKey);

Demo at http://jsfiddle/gaby/Cu6nW/