0

KineticJSのtransitionToを使用して、矢印キー（キーダウンイベント）を使用して移動する形状を作成しました。

私には2つの問題があります：

1。キーを押した後、図形の動きに少し遅れがあります。遅延を取り除くにはどうすればよいですか？

2. 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();
});

斜め移動の場合、2つの矢印キーを同時に押すことはできません。これは、オペレーティングシステムの制限です。Altキー、Ctrlキーなどで押すことができます。

于 2013-02-07T15:50:12.610 に答える
0

キーの組み合わせを識別するのに役立つライブラリがあります。チェックアウト：

于 2014-04-06T17:48:33.737 に答える
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/noteearsgame/

スクリプトへの直接リンク: ( http://strd6.com/space_demo/javascripts/key_status.js )

于 2013-11-23T22:33:07.163 に答える