移动物体时，如何最好地结合方向运动（向上和向左、向上和向右……）？答案

【问题标题】：How do I best combine directional movements (up and left, up and right...) when moving objects?移动物体时，如何最好地结合方向运动（向上和向左、向上和向右……）？
【发布时间】：2014-02-01 11:11:50
【问题描述】：

我在 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;

我有以下代码可以在按下向上、向左和/或向右时捕获，并临时对它们做出反应。运动现在很破旧，我还在努力完善它。为了让我能够正确移动我的对象，我应该能够同时捕捉角度变化（左/右）和加速度（向前）。

这是我目前拥有的 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! 使用上下左右箭头移动红色斑点。

【问题讨论】：

easeljs 是否真的与您的问题相关？
我认为做到这一点的唯一方法是将按键向下与按键向上匹配。如果您在从最后一个键按下一个键之前按下另一个键，则两个键被按住。除了 shift、ctrl 等之外，没有办法测试当前是否按住了某个键，您需要查看 up 和 left 是否都被按住。
另外，你的小提琴似乎表现得很好（在 Chrome 上）。如果您同时按下两个箭头键，它通常显示为一个平滑的对角线移动。
@MattBurland 好吧，我正在使用 EaselJS，我认为熟悉该库的人可能已经在某个时候处理过这个问题。对角线评论令人困惑，我也在使用 Chrome，但无法使 blob 像那样移动。
好的 - 我只是在看新闻稿。重复（即按住键）确实效果不佳。

标签： javascript keyboard-events easeljs

【解决方案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();
}

编辑：在行动中分叉小提琴：http://jsfiddle.net/t2M82/

【讨论】：

非常简洁的解释，感谢您使用 Fiddle。