javascript - Canvas 游戏的滞后运动

Question

嘿伙计们不完全确定我做错了什么。我玩过一些 HTML5 游戏，它们似乎都遇到了不同的问题。画的比 Action 滞后，看起来怪怪的。这似乎不是这里的情况。

在我的游戏中，绘图看起来不错，但在他移动时它像每秒一样滞后。(移动是箭头键)。如果我将他设置为自动移动，它也可以在没有箭头键的情况下完成，所以我认为这不是关键检测问题。

垃圾收集器几乎每秒都在运行。不过，我不认为我吐出那么多东西。

我使用的是 Chrome 21 (MacOSX) 和 Firefox 14。

http://tempdrew.dreamhosters.com/spine/

这是带有相关代码的js fiddle。

http://jsfiddle.net/ju3ag/

这在 chrome canary 上很好。我不知道这是否只是因为 canary 中的 javascript 比标准 chrome 快得多。这在最新的 Firefox 中很糟糕。我不确定我做错了什么。我正在根据时间更新运动。如果我把它去掉，虽然它仍然很糟糕。

我只是想知道是否有任何东西会脱颖而出。感谢您的帮助。

    sg = Class.extend({


});

sg.entities = [];
sg.buttonStates = [];

sg.createEntity = function (entity) {    
    this.entities.push(entity);    
};


window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function (callback, element) {
        window.setTimeout(callback, 1000 / 60);
    };

})();


(function defineUtil() {

    sg.util = {};

    sg.util.getRandomInt = function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    };

    sg.util.getRandomNumber = function getRandomNumber(min, max) {
        return Math.random() * (max - min) + min;
    };

})();


/*************************/
(function createEntity() {

    var Entity = Class.extend({

        init: function (x, y) {

            this.name = 'Entity';
            this.health = 100;

            this.pos = {
                x: x,
                y: y
            };

            this.vel = {
                x: 0,
                y: 0
            };

            this.accel = {
                x: 0,
                y: 0
            }

            console.log(this.name + ' created ' + x + ' ' + y);
        },

        update: function (elapsed) {

        },

        draw: function (ctx) {

        }

    });

    sg.Entity = Entity;

})();





/************************/

// -- player.js
(function createPlayer() {

    var Player = sg.Entity.extend({

        x: 0,
        y: 0,
        moveLeft: false,
        moveRight: false,
        speed : 5,

        init: function (x, y) {

            this.x = x;
            this.y = y;
            this.name = 'Player';
        },

        draw: function (ctx) {

            var x = this.x,
                y = this.y;

            ctx.beginPath();
            ctx.rect(x, y, 40, 50);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.lineWidth = .5;
            ctx.strokeStyle = 'rgba(0,0,0,.3)';
            ctx.stroke();
            ctx.fillStyle = 'rgba(0,0,0,.5)';
            ctx.fillRect(x + 25, y + 15, 5, 5);
        },

        update: function (elapsed) {
            var distance = (60 / 1000) * elapsed;
            if (this.moveLeft) {
                this.x += this.speed * distance;
            } else if (this.moveRight) {
                this.x -= this.speed * distance;
            }
        },

        keyDown: function (e) {

            if (e.keyCode === 39) {
                this.moveLeft = true;
            } else if (e.keyCode === 37) {
                this.moveRight = true;
            } else {
                this.moveLeft = false;
                this.moveRight = false;
            }
        },

        keyUp: function (e) {

            if (e.keyCode === 39) {
                this.moveLeft = false;
            } else if (e.keyCode === 37) {
                this.moveRight = false;
            }
        }

    });


    sg.Player = Player;

})();




/**********************************/


(function createGame() {

    var Game = Class.extend({

        canvas: null,
        context: null,
        width: null,
        height: null,

        init: function (width, height) {

            this.canvas = document.getElementById('canvas');
            this.context = this.canvas.getContext('2d');

            this.width = width || 800;
            this.height = height || 600;

            this.canvas.width = this.width;
            this.canvas.height = this.height;
        },

        clear: function () {
            this.context.clearRect(0, 0, this.width, this.height);
        },

        draw: function () {

            this.clear();       

            for (var i = 0; i < sg.entities.length; i++) {
                sg.entities[i].draw(this.context);
            }
        },

        update: function (elapsed) {

            for (var i = 0; i < sg.entities.length; i++) {
                sg.entities[i].update(elapsed);
            }
        },

        keyDown: function (e) {

            for (var i = 0; i < sg.entities.length; i++) {

                if (typeof sg.entities[i].keyDown === 'function') {
                    sg.entities[i].keyDown(e);
                }
            }
        },


        keyUp: function (e) {

            for (var i = 0; i < sg.entities.length; i++) {
                if (typeof sg.entities[i].keyUp === 'function') {
                    sg.entities[i].keyUp(e);
                }
            }
        }

    });

    sg.Game = Game;

    var game = sg.currentGame = new sg.Game(800, 600);


    var player = new sg.Player(200, 459);

    sg.createEntity(player);

    function update(elapsed) {

        game.update(elapsed);
    }

    var lastUpdate = Date.now();

    function draw() {

        var now = Date.now();
        var elapsed = (now - lastUpdate);
        lastUpdate = now;

        game.draw();
        update(elapsed);
        requestAnimFrame(draw);
    }

    window.addEventListener('keydown', sg.currentGame.keyDown, false);
    window.addEventListener('keyup', sg.currentGame.keyUp, false);

    draw();

})();

Answer 1

keydown/keyup 事件在一次和另一次按下之间等待了一点时间。

以下是我如何解决我的问题(不确定这是否正是您的问题)；添加一个 setInterval，每 20 毫秒检查是否有按键按下(对 Angular 线移动超过一个)。

    var keys = {};
    $(document).bind('keyup', function(e){
        delete keys[e.which];
    });
    $(document).bind('keydown', function(e){
        keys[e.which] = true;
    });

    setInterval(keyEvent, 20);

    function keyEvent(){
        for(var idKeyPressed in keys){
            switch(idKeyPressed){
                case "87": // "W" key; Move to the top
                    // Do something
                    break;
            }
        }
    }

希望对您有所帮助:)