Two second delay on key down event

Question

I wrote some jQuery that triggers keyup and keydown events but for some reason theres a slight delay of two seconds how can i fix this? Also how would i make the image stay in the canvas

Link to demo

jQuery:

$(function(){
    // Put player on map
    var player = '<div id="player" class="img-responsive"></div>';
    $("#map").append(player);
    // Set layout for player controlls
    $(document).keyup(function (e){
        $("#player.img-responsive").removeClass("run");
    });
    $(document).keydown(function (e) {
        // Get the position of the character
        var position = $("#player").position();
        $("#player.img-responsive").addClass("run");
        switch (e.keyCode)
        {
            case 37:  // Arrow Left
                $("#player").css(
                        'left'      , position.left - 10 + 'px'
                        );
                break;

            case 38:  // Arrow Up
                $("#player").css(
                        'top'       , position.top - 10 + 'px'
                        );
                break;

            case 39:  // Arrow Right
                $("#player").css(
                        'left'      , position.left + 10 + 'px'
                        );
                break;

            case 40:  // Arrow Down
                $("#player").css(
                        'top'       , position.top + 10 + 'px'
                        );
                break;

        } // End Switch
    }); // End KeyDown function
}); // End Main function

CSS:

/* Top Score
++++++++++++++++++++++++++++++++++++++++*/
span.tot_score{
    position: relative;
    top: 1px;
}

/* Player Character
++++++++++++++++++++++++++++++++++++++++*/
#player {
    position: absolute;
    background: url(../img/players/player2.png) no-repeat;
    width: 50px;
    height: 63px;
    bottom: 0;
    margin: 0;
    padding: 0;
}
#player.img-responsive.run{
    background: url(../img/players/run.gif) no-repeat;
    width: 75px;
}

when the image moves accross my screen theres a 2 second delay when it moves accross the screen — Code, Oct 09 '14 at 14:17
You should keep track of which keys are pressed with keyup/keydown events. Then you should check the pressed keys in your gameloop. If you need more explanation I'll post an answer. — A1rPun, Oct 09 '14 at 14:17
You should post all of the JS, I imagine the top part of the script has something to do with it - http://4rtificial.co.za/souls-RPG/js/game.js — Luke, Oct 09 '14 at 14:18
All my js files are included at the bottom of my code to make it load faster — Code, Oct 09 '14 at 14:20
The delay happens when keeping the key pressed right? It's a well known behavior and requires a different approach. See here: http://stackoverflow.com/questions/11197220/javascript-move-delay-and-multiple-keystrokes — LcSalazar, Oct 09 '14 at 14:21
@Barmar: Yes, there is, but not about the keydown. When you press any direction, the little guy start to animate, but not go anywhere for 1 secont. if you want make the image stay in the canvas, you need to get the size of your image, need to set the starting positions parameters, the size of your canvas, and check, is it reached the border of the canvas. — vaso123, Oct 09 '14 at 14:23
@LcSalazar is correct, go into any text editor and try navigating some text by holding your arrow keys.. You will get the same delay. — wf4, Oct 09 '14 at 14:26

Two second delay on key down event

0 Answers0