游戏循环无法正常工作

Question

在让玩家无延迟移动的过程中，我哪里出错了，我在线阅读了一些文章“ 是否可以使JQuery keydown更快地响应？ ”，因此我需要选择一个游戏循环，因此我创建了一个游戏循环不断在控制台中出现错误Uncaught ReferenceError：游戏未定义我不知道为什么没人能帮助我找到我要去哪里。 另外我主要使用jQuery，因此使用jQuery解决方案将不胜感激。

这是游戏的链接，这是我的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）。

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的3Dtranslate用于过渡效果也可以。 3Dtranslate是硬件加速的，可以处理从/到位置之间的画框。