javascript - 即使按下其他按钮也继续 keydown 事件

Question

假设我们有一个可以在屏幕上左右移动的球。当您单击空格键时，球应该会跳跃。

我让球在 Canvas 上左右移动。然而，当球向左移动(例如)并且我在任何事情之前按下空格键时，球停止向左移动。

查看 my example到目前为止!

我正在使用 KeyboardJS处理我的关键事件的库:

KeyboardJS.on("left", function () {
    cc();
    x -= xv;
    if (x < r) {
        circle(x + width, y, r);
        if (x + width <= width - r) {
            x = x + width;
        }
    }
    circle(x, y, r);
});

KeyboardJS.on("space", null, function () {
    console.log("space!");
});

我怎样才能停止这种行为，以便在按下空格键时，球会向上跳，但同时仍然向左移动？

Answer 1

将一个想法添加到其他人的好想法中:

将您的用户输入与您的绘图分开。

键盘输入:

如果您在使用 KeyboardJS 时遇到问题，请查看 Keydrown:http://jeremyckahn.github.io/keydrown/

在捕获键时不做任何绘图……只捕获用户输入的他们希望圆圈移动的方向。

设置一个“方向”变量来保存用户按[左]或[右]的次数:

var direction=0;  

当按下 [left] 键时:

direction--; 

当按下[右]键时:

direction++;

方向是一个网数。因此，如果用户按住左键 20 次，右键 15 次，方向将为 -5 ( -20 + 15 )。

设置一个“高度”变量来保存用户按下[空格]的次数:

var altitude=0;

当按下[空格]时:

altitude-=10;

海拔高度也是一个净数。

绘图:

在单独的动画循环中完成所有绘图。不要使用 javascript 的 setInterval，而是使用新的和改进的方法来创建一个 imation 循环 -- requestAnimationFrame。

// set the starting circle positions 

var currentX=canvas.width;
var currentY=canvas.height-r;

function animate(){

    // even as we're executing this current animation loop
    // request another loop for next time

    requestAnimationFrame(animate);

    // change the currentX position by the accumulated direction

    currentX+=direction;
    direction=0;

    // change the currentY position by the accumulated altitude

    currentY+=altitude;
    altitude=0;

    // draw the circle at its current position

    cc();

    circle(currentX,currentY,r);

    // apply gravity to the circle
    // to make it fall if its in the air

    if(currentY<canvas.height-r){
        currentY++;
    }

}

祝你的项目好运!