javascript/html canvas的缓慢性能

Slow performance with javascript/html canvas

本文关键字：缓慢 性能 canvas html javascript      更新时间：2023-09-26

所以，我在游戏循环的背景下用javascript/html画布创建了一个小演示。你可以通过按w,a,s,d键移动一个小方块。然而，当按住超过3或4秒时，画布就会变得磕磕绊绊，正方形几乎停止移动。

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

有人有什么想法吗?

这是我的codepen;

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

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

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

通过注册越来越多的事件处理程序，导致运行的代码比必要的多，因此出现了结巴。

codepen更新。

相关文章：