game loop not working

Question

Where am I going wrong with getting my player to move without the delay, I read some articles online "Is it possible to make JQuery keydown respond faster?" and from what I could pick up a game loop was needed so I created one but I keep getting an error in my console Uncaught ReferenceError: game is not defined I don't know why can anyone help me in finding where I'm going wrong. Also I'm using mainly jQuery so a solution using jQuery would be much appreciated.

Here is a link to the game Here is my JS:

var increments = 10;

function game(){


        // 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){
            e.preventDefault();
            $("#player.img-responsive").removeClass("run");
            $("#player.img-responsive").removeClass("hit");
            delete e.which;
        });
        $(document).keydown(function (e) {
            // Use this to identify what button the user is pressing on the keyboard
            // alert(e.keyCode);

            // get the position of the character
            var position = $("#player").position();

            switch (e.which)
            {
                case 37:  // Arrow Left
                    if(position.left >= increments) {

                        $("#player").css('left', position.left - increments + 'px');
                        $("#player.img-responsive").addClass("run").addClass("flip");
                    }
                break;

                case 38:  // Arrow Up
                    if(position.top <= increments) {
                        $("#player").css('top', position.top - increments + 'px');
                    }
                break;

                case 39:  // Arrow Right
                    if(position.left < 550) { // Right constraint
                        $("#player").css('left', position.left + increments + 'px');
                        $("#player.img-responsive").addClass("run").removeClass("flip");
                    }
                break;

                case 40:  // Arrow Down
                    if(position.top < 1000) { // Bottom constraint
                        $("#player").css('top', position.top + increments + 'px');
                    }
                break;

                case 90: //right ctrl
                    $("#player.img-responsive").addClass("hit");

                break;

                default: return;
            } // End Switch

        }); // End KeyDown function


}// end game function


var game = game();
// set frame loop
setInterval(game, 1000 / 60);

Thanks in advance.

move `function game()` out of the `$()`(dom ready) then call `$(game)` and `setInterval(game, 1000/60)` — Arun P Johny, Oct 21 '14 at 13:27
This will explain the e.which "http://stackoverflow.com/questions/4471582/javascript-keycode-vs-which" — Code, Oct 21 '14 at 13:33
@Arun P Johny I updated my code is that what you meant by the change? — Code, Oct 21 '14 at 13:34
@Code no [Problem](http://jsfiddle.net/arunpjohny/4u2und9o/1/) - [Solution](http://jsfiddle.net/arunpjohny/4u2und9o/2/) — Arun P Johny, Oct 21 '14 at 13:38
@Code the delay `1000/60` is very less.... may overload the system... — Arun P Johny, Oct 21 '14 at 13:42
i updated the code above but for some reason the game loop does not remove the delay when moving the player forward why is this? — Code, Oct 21 '14 at 13:51
remove `var game = game();` - it wrongly redefines the value of `game` to `undefined`. Also, you should move `$(document).key...` from `game` to `$(document).ready(function(){});`. — Igor, Oct 21 '14 at 13:56
so then what if i wrapped the game function round the switch statement — Code, Oct 21 '14 at 14:01
I don't understand this sentence - "so then what if i wrapped the game function round the switch statement". — Igor, Oct 21 '14 at 14:05
You realize that `$("#map").append(player);` happens every time `game` is called, which happens on every interval, which fires every 16 milliseconds? — Igor, Oct 21 '14 at 14:07

score 0 · Answer 1 · answered Oct 21 '14 at 14:07

Your declaration of game is not in the same context as the setInterval(). Declare game as a global function and just pass the pointer for game to $(document).ready like so.

var increments = 10;

function game(){

    // 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){
        e.preventDefault();
        $("#player.img-responsive").removeClass("run");
        $("#player.img-responsive").removeClass("hit");
        delete e.which;
    });
    $(document).keydown(function (e) {
        // Use this to identify what button the user is pressing on the keyboard
        // alert(e.keyCode);

        // get the position of the character
        var position = $("#player").position();

        switch (e.which)
        {
            case 37:  // Arrow Left
                if(position.left >= increments) {

                    $("#player").css('left', position.left - increments + 'px');
                    $("#player.img-responsive").addClass("run").addClass("flip");
                }
            break;

            case 38:  // Arrow Up
                if(position.top <= increments) {
                    $("#player").css('top', position.top - increments + 'px');
                }
            break;

            case 39:  // Arrow Right
                if(position.left < 550) { // Right constraint
                    $("#player").css('left', position.left + increments + 'px');
                    $("#player.img-responsive").addClass("run").removeClass("flip");
                }
            break;

            case 40:  // Arrow Down
                if(position.top < 1000) { // Bottom constraint
                    $("#player").css('top', position.top + increments + 'px');
                }
            break;

            case 90: //right ctrl
                $("#player.img-responsive").addClass("hit");

            break;

            default: return;
        } // End Switch

    }); // End KeyDown function

}; // End Main function


$(document).ready(game);

I've removed the setInterval because your loop is just repeatedly registering the same function to the key listeners! You only need to register the listeners once. For smoother animation you should look into either requestAnimationFrame which fires a callback just before the browser draws its frame(speed varies on the page performance) or CSS's 3Dtranslate used with a transition would also work well. 3Dtranslate is hardware accelerated and will handle draw the frames between your from/to positions.

game loop not working

1 Answers1