Javascript KineticJS使用键控键进行形状移动

我已经使用KineticJS中的Transitiono创建了一个借助箭头键（keydown事件）移动的形状。

我有两个问题：

1.按下该键后，形状的移动会有一个短暂的延迟。如何消除延迟？

2.如何在同时按下两个箭头键的情况下使形状沿对角线移动？下面是javascript：

var stage = new Kinetic.Stage({
    container: 'container',
    width: screen.width,
    height: 500
});
var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    fill: 'yellow',
    stroke: 'black',
    strokeWidth: 4
});

// add the shape to the layer
layer.add(circle);

// add the layer to the stage
stage.add(layer);

window.addEventListener('keydown', function(e) {
    if (e.keyCode == 37) { //Left Arrow Key
        setTimeout(function () {
            circle.transitionTo({
                x: circle.getX() - 10,
                y: circle.getY(),
                duration: 0.01
            })
        }, 0);
    }
    if (e.keyCode == 38) { //Up Arrow Key
        setTimeout(function () {
            circle.transitionTo({
                x: circle.getX(),
                y: circle.getY() - 10,
                duration: 0.01
            })
        }, 0);
    }
    if (e.keyCode == 39) { //Right Arrow Key
        setTimeout(function () {
            circle.transitionTo({
                x: circle.getX() + 10,
                y: circle.getY(),
                duration: 0.01
            })
        }, 0);
    }
    if (e.keyCode == 40) { //Top Arrow Key
        setTimeout(function () {
            circle.transitionTo({
                x: circle.getX(),
                y: circle.getY() + 10,
                duration: 0.01
            })
        }, 0);
    }
});

---

Fiddle:

对于延迟，您可以按如下方式打开setTimeout和Transition

window.addEventListener('keydown', function(e) {
    if (e.keyCode == 37) //Left Arrow Key
        circle.attrs.x -= 10;
    if (e.keyCode == 38) //Up Arrow Key
        circle.attrs.y += 10;
    if (e.keyCode == 39) //Right Arrow Key
        circle.attrs.x += 10;
    if (e.keyCode == 40) //Top Arrow Key
        circle.attrs.y -= 10;
    layer.draw();
});

---

对于对角线移动，不能同时按两个箭头键。这是您的操作系统限制。您可以按alt键、ctrl键。。。等。

检测对角线移动的最佳方法，以跟踪哪些键已按下/释放。我使用了一个名为“key_status.js”的jQuery插件，它允许您使用以下内容检查任何密钥的状态：

if (keydown.left) {
  console.log("left arrow is down")
}
if (keydown.left && keydown.up) {
  console.log("Left/Up Diagonal!")
}

当然，要执行类似的操作，您需要将所有输入检查包装在setTimeout或requestAnimFrame中

我在这里的优秀html5游戏教程中发现了这个脚本和方法：

---

直接链接到脚本：（）

有一些库可以帮助您识别组合键。退房：

---

1。看不到任何延迟，感觉对我有反应。2.请参阅（播放

超时值）。为什么要在
设置超时
中包装
转换到
？