javascript - 移动物体时如何最好地结合方向运动(向上和向左、向上和向右......)？

Question

我在 Javascript 中使用 EaselJS，并使用 keydown 和 keyup 事件来捕获键盘输入(见下文):

/*Connecting keydown input to keyPressed handler*/
this.document.onkeydown = keyPressed;
/*Connecting key up event to keyUp handler*/
this.document.onkeyup = keyUp;

我有以下代码来捕获按下上下、左和/或右时的情况，并暂时对它们使用react。现在这个 Action 很简陋，我还在努力完善它。为了能够正确移动物体，我应该能够同时捕获 Angular 变化(左/右)和加速度(向前)。

这是我当前拥有的 keyDown 代码:

    /*Keyboard input handlers - keydown and keyup*/
    function keyPressed(event){
        if(!event){ var event = window.event; }
        switch(event.keyCode){
            case KEYCODE_LEFT: 
                console.log("left held");
                ellip.x -= 5;
                break;
            case KEYCODE_RIGHT: 
                console.log("right held");
                ellip.x += 5; 
                break;
            case KEYCODE_UP: 
                console.log("up held");
                ellip.y -= 5;
                break;
            case KEYCODE_DOWN: 
                console.log("down held");
                ellip.y += 5;
                break;          
        }
    }

现在请注意，在控制台中点击两个箭头按钮不会产生消息组合(例如向上保持和向右保持)

我如何处理(或监听)多个事件？

Here is a Fiddle!使用上、下、左、右箭头移动红色 Blob 。

Answer 1

处理这个问题的方法是在 keyDown 代码中捕获哪些键被按下，然后在 handleTick 函数中执行移动本身。您还需要查看 keyUp，以便知道按键何时不再按下:

/*Keyboard input handlers - keydown and keyup*/
var left,
    right,
    up,
    down;

function keyPressed(event){
    if(!event){ var event = window.event; }
    switch(event.keyCode){
        case KEYCODE_LEFT: 
            console.log("left held");
            left = true;
            break;
        case KEYCODE_RIGHT: 
            console.log("right held");
            right = true; 
            break;
        case KEYCODE_UP: 
            console.log("up held");
            up = true;
            break;
        case KEYCODE_DOWN: 
            console.log("down held");
            down = true;
            break;          
    }
}

function keyReleased(event){
    if(!event){ var event = window.event; }
    switch(event.keyCode){
        case KEYCODE_LEFT: 
            console.log("left released");
            left = false;
            break;
        case KEYCODE_RIGHT: 
            console.log("right released");
            right = false; 
            break;
        case KEYCODE_UP: 
            console.log("up released");
            up = false;
            break;
        case KEYCODE_DOWN: 
            console.log("down released");
            down = false;
            break;          
    }
}

function handleTick(event){
    /*Scaling down the image*/
    ellip.scaleX = 0.10;
    ellip.scaleY = 0.10;

    if(left) {
        ellip.x -= 5;
    } else if(right) {
        ellip.x += 5;
    }

    if(up) {
        ellip.y -= 5;
    } else if(down) {
        ellip.y += 5;
    }

    if (ellip.x > stage.canvas.width) { 
        ellip.x = stage.canvas.width; 
    }   
    stage.update();
}

编辑: fork fiddle 在行动:http://jsfiddle.net/t2M82/