0

私はjavascriptで書いたささいな小さなゲームを持っていて、クリックしたところから波を作成します。「波」を画面上で移動させる2つの方法を考え出しました。

  1. ますます長い時間でjQuery.animate（）を呼び出すことによって。デモ
  2. setTimeoutを繰り返し呼び出すことによって。デモ

私が抱えている問題は、2の動作（列はすべてオフセットタイミングで同じ速度で成長する）が必要ですが、1の動作（その後のクリックによって「波」が形成される）が必要なことです。

現在、2番目のデモでは、「wave」が終了する前にもう一度クリックすると、すぐにsetTimeoutsがクリアされ、最初からやり直します。最初の例のようにそれらを積み重ねることができるようにしたいと思います。

これらのページのいずれかのソースを表示して、コードを確認できます（メソッドはgetMouseXYUpおよびgetMouseXYDownです）。

2番目のデモで私が行っていることの基本的な要点は、次の2つの関数にあります。

function getMouseXYUp(e) {
            $("body").die('mousemove');

            h = (document.height - e.pageY + 17);
                left = id-1;
                right = id+1;
            setTimeout("moveleft()", 100);
            setTimeout("moveright()", 100);

            return true
        }

function moveleft(){
        if (left >= 0){
            $("#div"+left).animate({'height': h}, 400);
            left--;
            setTimeout("moveleft()", 50);
        }
    }
4

2 に答える 2

2

問題は、2 回目のマウス クリックが発生するとすぐに変数「左」と「右」をリセットしていることです。これはあなたが探しているものに近いですか？

    function getMouseXYUp(e) {
        $("body").die('mousemove');

        var h = (document.height - e.pageY + 17);
        var left = id-1;
        var right = id+1;
        setTimeout(function() { moveleft(left, h); }, 100);
        setTimeout(function() { moveright(right, h); }, 100);

        return true;
    }

    ...

    function moveleft(left, h) {
        if (left >= 0){
            $("#div"+left).animate({'height': h}, 400);
            left--;
            setTimeout(function() { moveleft(left, h); }, 50);
        }
    }

    function moveright(right, h) {
        if (right < divs){
            $("#div"+right).animate({'height': h}, 400);
            right++;
            setTimeout(function () { moveright(right, h); }, 50);
        }
    }
于 2009-07-23T21:21:01.350 に答える
0

コードを見ると、グローバル変数に問題があるようです。関数呼び出しで左右に渡す必要があり、グローバルスコープには入れないでください。

于 2009-07-23T21:16:48.127 に答える