Question

我正在用Javascript和Jquery制作游戏，玩家可以在那里买鱼，然后在他们的坦克里游来游去。我希望<div id="goldfish"><img src="fish/goldfish_l.gif"/></div>在<div id="container">内移动我还想在鱼向右移动时将img src更改为fish / goldfish_r。到目前为止，我已经尝试过：

function moveDiv() {
    var $span = $("#goldfish");

    $span.fadeOut(1000, function() {
        var maxLeft = $(window).width() - $span.width();
        var maxTop = $(window).height() - $span.height();
        var leftPos = Math.floor(Math.random() * (maxLeft + 1))
        var topPos = Math.floor(Math.random() * (maxTop + 1))

        $span.css({ left: leftPos, top: topPos }).fadeIn(1000);
    });
};
moveDiv();setInterval(moveDiv, 5000);

但这只是让它消失然后重新出现在其他地方。

Answer 1

你很亲密。你不需要淡出和淡入，你可以简单地使用函数的回调来循环。

<强> Fiddle

function AnimateIt() {
    var theDiv = $("#the-div"),
        theContainer = $("#container"),
        maxLeft = theContainer.width() - theDiv.width(),
        maxTop = theContainer.height() - theDiv.height(),
        leftPos = Math.floor(Math.random() * maxLeft),
        topPos = Math.floor(Math.random() * maxTop);

    if (theDiv.position().left < leftPos) {
        theDiv.removeClass("left").addClass("right");
    } else {
        theDiv.removeClass("right").addClass("left");
    }

    theDiv.animate({
        "left": leftPos,
        "top": topPos
    }, 1200, AnimateIt);
}
AnimateIt();

如您所见，向左或向右移动时背景会发生变化。我已经用一个类完成了这个，所以你可以轻松地改变背景图像，但是如果你真的想要更改源代码，你可以这样做：

<强> Fiddle

function AnimateIt() {
    var theDiv = $("#the-div"),
        theContainer = $("#container"),
        maxLeft = theContainer.width() - theDiv.width(),
        maxTop = theContainer.height() - theDiv.height(),
        leftPos = Math.floor(Math.random() * maxLeft),
        topPos = Math.floor(Math.random() * maxTop),
        imgRight = "http://f00.inventorspot.com/images/goldfish.jpg",
        imgLeft = "http://2.bp.blogspot.com/-F8s9XEIBSsc/T41x37x9w1I/AAAAAAAAB9A/cDfFJLCERII/s1600/Goldfish-1600x1200.jpg";

    if (theDiv.position().left < leftPos) {
        theDiv.attr("src", imgRight);
    } else {
        theDiv.attr("src", imgLeft);
    }

    theDiv.animate({
        "left": leftPos,
        "top": topPos
    }, 2000, AnimateIt);
}
AnimateIt();

使用javascript在页面上随机移动div

1 个答案: