Question

让我的播放器毫不拖延地移动我出错了，我在线阅读了一些文章＆＃34; Is it possible to make JQuery keydown respond faster?＆＃34;我需要一个游戏循环，所以我创建了一个，但我在控制台中一直出现错误未捕获的ReferenceError：游戏未定义我不知道为什么有人可以帮忙我找到了我错的地方。我也主要使用jQuery，所以使用jQuery的解决方案将非常受欢迎。

以下是game的链接这是我的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);

提前致谢。

Answer 1

您的游戏声明与setInterval（）不在同一个上下文中。将游戏声明为全局函数，并将游戏指针传递给$（document）.ready就像这样。

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);

我已经删除了setInterval，因为你的循环只是重复向关键监听器注册相同的函数！您只需要注册一次监听器。为了获得更流畅的动画，您应该查看requestAnimationFrame，它在浏览器绘制帧之前触发回调（速度因页面性能而异）或者CSS转换时使用的3D转换也可以正常工作。 3Dtranslate是硬件加速的，可以处理你的从/到位置之间的帧。

游戏循环不起作用

1 个答案: