私はいくつかのdivsレースを作っています

Question

これは多分若者の一種ですが、私はまだJqueryを学んでいます。私は2つのDIV（50x50pxが絶対的に配置されている）を持っています。そして、このコードはそれらを画面上で移動させます。 緑色のボックスをクリックすると間隔が短くなり、移動が速くなります。明らかに私はここで何か間違っている、私はちょうど何がわからない。すでに効​​果がありませんタイマーを開始しました後、タイマ間隔に

$(document).ready(function(){ 
    var greenSpeed = 300; 
    var redSpeed = 300; 
    var redLeft = $('#red').offset().left; 
    setInterval(function() { 
    $('#red').css('left', ++redLeft); 
    }, redSpeed); 
    var greenLeft = $('#green').offset().left; 
    setInterval(function() { 
    $('#green').css('left', ++greenLeft); 
    }, greenSpeed); 
    $('#green').click(function() {--greenSpeed}); 
}); 

Answer 1

あなたのアップデート。おそらく、あなたはタイマーの間隔を一定に保ち、そして常にポジションに1を加えるだけでなく、増分のサイズを変えるべきです。

つまり、 "redSpeed"と "greenSpeed"は1から始まり、各繰り返しでそれらを "redLeft"または "greenLeft"に追加します。クリックでは、「速度」変数を1（または2など）だけ増やす必要があります。

Answer 2

いいえ...私はそれを行う方法を考え出しましたが、もし誰かが助けになる理由を説明できたら。

var greenLeft = $('#green').offset().left; 
function moveGreen() { 
    setTimeout(moveGreen, greenSpeed); 
    $('#green').css('left', ++greenLeft); 
} 
moveGreen(); 
$('#green').click(function() {greenSpeed-=20}); 

私の推測では、それが最初に呼ばれていたときのsetIntervalは一度だけcolorSpeedをチェックし、私は高速カウンタをデクリメントしてもそれは問題ではないということです。それはsetIntervalで行うか、再帰的なsetTimeout呼び出しで唯一の方法ですか？

Answer 3

最初のコードが機能しなかったのは、setIntervalにgreenSpeedに格納されている値が渡され、その変数へのポインタではないためです。このため、その後のgreenSpeedの更新は効果がありませんでした。 2番目のコードでは、setTimeoutを繰り返し呼び出しています。呼び出されるたびに、greenSpeedに格納されている現在の値が渡されるため、クリック後に新しい値が使用されます。

Answer 4

あなたがそれを望むようにこの作品...

$(function(){ 

    var greenSpeed = 300; 
    var redSpeed = 300; 

    var redLeft = $('#red').offset().left; 

    function raceRed() { 

     setInterval(function() { 
      $('#red').css('left', ++redLeft); 
     }, redSpeed); 

    } 

    $('#red').click(function() { 
     --redSpeed; 
     raceRed(); 
    }); 

    raceRed(); 

    var greenLeft = $('#green').offset().left; 

    function raceGreen() { 

     setInterval(function() { 
      $('#green').css('left', ++greenLeft); 
     }, greenSpeed); 

    } 

    $('#green').click(function() { 
     --greenSpeed; 
     raceGreen(); 
    }); 

    raceGreen(); 

});