帆布游戏的滞后运动

嘿，伙计们，不完全确定我做错了什么。我玩过一些HTML5游戏，它们似乎遇到了不同的问题。这幅画落后于动作，看起来很奇怪。这里的情况似乎并非如此。

在我的比赛中，平局看起来很好，但随着他的移动，它像每一秒一样滞后。（移动是箭头键）。如果我设置他自动移动，它也可以在没有箭头键的情况下完成，所以我不认为这是一个关键检测问题。

就好像垃圾收集器每秒钟都在运行一样。不过，我不认为我喷出了那么多物体。

我使用的是Chrome 21（MacOSX）和Firefox 14。

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

这是js对相关代码的篡改。

http://jsfiddle.net/ju3ag/

这是铬金丝雀很好。我不知道这是否只是因为javascript在canary中比标准chrome快得多。在最新的火狐中，这太可怕了。我不确定我做错了什么。我正在根据时间更新动作。如果我把它拿出来，尽管它仍然很糟糕。

我只是想知道是否有什么能让任何人脱颖而出。谢谢你的帮助。

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