javascript - javascript/html canvas 性能低下

Question

因此，我在游戏循环的上下文中使用 javascript/html Canvas 为自己创建了一个小演示。您可以通过按 w、a、s、d 键移动一个小方 block 。但是，当按住超过 3 或 4 秒时， Canvas 会变得卡顿并且正方形几乎停止移动。

这是javascript；

// --------------------------------------------------------------------
// -- MAIN GAME LOOP
// --------------------------------------------------------------------
function gameLoop(){
    update();
    render();
    requestAnimationFrame(gameLoop);
}

function update(){
    processInput();
};
function render(){
    var canvas = document.getElementById('viewport');
    var ctx = canvas.getContext('2d');

    if(upDown){
        rect.top -= rect.speed;
    }else if(downDown){
        rect.top += rect.speed;
    }else if(leftDown){
        rect.left -= rect.speed;
    }else if(rightDown) {
        rect.left += rect.speed;
    }

    ctx.clearRect(0, 0, 1024, 768);
    ctx.beginPath();
    ctx.rect(rect.left, rect.top, 50, 50, true);
    ctx.closePath();
    ctx.fill();
};

var rect = {
    top: 0,
    left: 0,
    speed: 5
};

// --------------------------------------------------------------------
// -- OTHER FUNCTIONS
// --------------------------------------------------------------------
var rightDown = false;
var leftDown = false;
var upDown = false;
var downDown = false;

function processInput(){
    $(document).keydown(function(e){
        console.log(e.keyCode);
        if(e.keyCode == 87){upDown = true;}
        if(e.keyCode == 83){downDown = true;}
        if(e.keyCode == 68){rightDown = true;}
        if(e.keyCode == 65){leftDown = true;}
    }).keyup(function(){
        upDown = false;
        downDown = false;
        rightDown = false;
        leftDown = false;
    })
}

$(document).ready(function(){
    requestAnimationFrame(gameLoop);
});

有人有什么想法吗？

这是我的代码笔；

http://codepen.io/anon/pen/wKGJOr

Answer 1

问题是因为您在游戏循环中调用了 processInput(通过 update)。此函数在每次调用时附加新的 keydown 和 keyup 事件处理程序。只需要调用一次。从 update 中删除调用，并(例如)在 ready 函数中调用它:

$(document).ready(function(){
    processInput();
    requestAnimationFrame(gameLoop);
});

通过注册越来越多的事件处理程序，您会导致运行的代码比必要的多得多，因此会出现卡顿现象。

Updated codepen .