0

我使用 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/

4

3 回答 3

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

于 2013-02-07T15:50:12.610 回答
0

检测对角线移动以跟踪已按下/释放哪些键的最佳方法。我使用了一个名为“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）

于 2013-11-23T22:33:07.163 回答
0

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

于 2014-04-06T17:48:33.737 回答