1

ここでは、キーを押さない限りボックスが常に下に移動するように「重力」を追加して、一番上の答えを構築しようとしています。

私は今数時間いじっています、そして私はそれを理解することができません。前のコードでは、css位置の上部と左側にある2つの変数をcalculateNewValue関数に送信します。

真/偽のキーが押された場合のこれら2つのテストを4つに分割し、上矢印が偽の場合に+1を追加するだけでよいと思いました。したがって、指示しない限り、ボックスは常に落下します。

ほぼ機能しますが、ボックスは真下ではなく、右下に移動します。そして重力はそのようには機能しません。

これは、ボックスを2方向に移動するために使用されている上下と関係があるはずです。しかし、イベントハンドラーが1つのキーのキーコードのみを格納している場合、他のすべてのテストはfalseを返しませんか？どうすれば正しく動かないようにできますか？

$(function(){

var pane = $('#pane'),
    box = $('#box'),
    maxValue = pane.width() - box.width(),
    keysPressed = {},
    distancePerIteration = 3;

function calculateNewValue(oldValue) {
    var newValue = parseInt(oldValue, 10)
                   - (keysPressed[37] ? distancePerIteration : 0)
                   - (keysPressed[38] ? distancePerIteration : 0)
                   + (keysPressed[39] ? distancePerIteration : 0)
                   + (keysPressed[40] ? distancePerIteration : 1)
    return newValue < 0 ? 0 : newValue > maxValue ? maxValue : newValue;
}

$(window).keydown(function(event) { keysPressed[event.which] = true; });
$(window).keyup(function(event) { keysPressed[event.which] = false; });

setInterval(function() {
    box.css({
        left: function(index ,oldValue) {
            return calculateNewValue(oldValue);
        },
        top: function(index, oldValue) {
            return calculateNewValue(oldValue);
        }   
    });
}, 20);

});
4

2 に答える 2

0

あなたのコードには欠陥があります。20ミリ秒ごとに、ボックスの左/上を毎回同じ量だけ変更します。

コードを設定した方法では、CSS が更新されるたびに左と上の値が常に同じ量だけ増加します。そのため、左/上キーを押すかどうかに応じて、ボックスは常に上下に移動します。

ボックスを上下に移動しようとしているだけの場合は、左の属性を変更しないようにコードを変更し、左右の矢印に ascii を使用しないように calculateNewValue を変更することをお勧めします。

于 2013-02-01T00:56:13.307 に答える
0

通常は keyup() 関数のみを使用します。次に、キープレスは 1 つのイベントのみを発生させます。特別な場合にのみ、keydown() を使用する必要があります。

于 2013-02-01T00:40:03.660 に答える