Question

我使用来自KineticJS的transitionTo制作了一个我借助箭头键（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);
    }
});

小提琴：http://jsfiddle.net/uUWmC/1/

Answer 1

对于延迟，您可以像下面那样解包setTimeout和transitionTo;

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键等按下它。

Answer 2

检测对角线移动以跟踪已按下/释放哪些键的最佳方法。我使用一个名为“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游戏教程中发现了这个脚本和方法：http://www.html5rocks.com/en/tutorials/canvas/notearsgame/

直接链接到脚本：（http://strd6.com/space_demo/javascripts/key_status.js）

Answer 3

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

带有Keydown的KineticJS形状运动

3 个答案: