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。机芯现在很简陋，还在努力完善中。为了能够正确移动我的物体，我应该能够同时捕捉 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;          
        }
    }

现在请注意，在控制台中点击两个箭头按钮不会产生消息组合(例如，up held 和 right held)

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

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

编辑:forked fiddle with this in action:http://jsfiddle.net/t2M82/