Javascript 移动对象时，如何最好地组合方向移动（向上和向左、向上和向右…）？

我在Javascript中使用EaselJS，并使用

keydown

和

keydup

事件捕捉键盘输入（见下文）：

当按下up down（向上向下）、left（向左）和/或right（向右）时，我需要捕获以下代码，并对它们做出临时反应。这场运动现在非常糟糕，我仍在努力改进它。为了能够正确地移动我的物体，我应该能够同时捕捉角度变化（左/右）和加速度（向前）

以下是我目前拥有的按键密码：

    /*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;          
        }
    }

现在请注意，在控制台中，按下两个箭头按钮不会产生消息组合（例如，

向上保持

和

向右保持

）

我如何处理（或倾听）多个事件

---

使用向上、向下、向左和向右箭头移动红色斑点。

处理此问题的方法是在您的按键向下代码中捕获哪些按键向下，然后在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:

easeljs是否与您的问题相关？我认为唯一的方法是将向下键与向上键匹配。如果在从上一个向下键获得一个向上键之前，您先获得另一个向下键，则两个向下键被按住。除了shift、ctrl等，没有办法测试当前是否按下了一个键，您需要查看是否同时按住了向上键和向左键。此外，您的小提琴似乎表现得非常好（在Chrome上）。如果你同时按下两个箭头键，它通常显示为一个平滑的对角线运动。@MattBurland我使用的是EaselJS，我认为熟悉该库的人可能在某个时候处理过这个问题。对角线上的评论让人困惑，我也在使用Chrome，但还没能让这个斑点像那样移动。好吧，我只是在看一个新闻稿。重复一次（即按住键）确实不起作用。非常简洁的解释，谢谢你使用小提琴。

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