0

我有一个用 javascript 编写的小游戏，它会在您单击的位置创建一个波浪。我想出了两种让“波浪”在屏幕上移动的方法：

  1. 通过调用 jQuery.animate() 越来越大的时间。演示
  2. 通过递归调用 setTimeout。演示

我遇到的问题是我想要 2 的行为（所有列都以相同的速度增长，并具有偏移时间），但使用 1 的行为（随后的点击复合形成的“波”）。

现在在第二个演示中，如果您在“wave”完成之前再次单击，它会立即清除 setTimeouts 并重新启动它们。我希望能够像第一个示例中那样堆叠它们。

您可以查看其中任一页面的源代码以查看代码（方法为 getMouseXYUp 和 getMouseXYDown）。

我在第二个演示中所做的基本要点可以在这两个函数中找到：

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

问题是，一旦发生第二次鼠标单击，您就正在重置变量“left”和“right”。这是否更接近您正在寻找的东西？

    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 回答