javascript - 如何在没有事件的情况下移动div的子级

我目前正在制作一款游戏，其中方块掉落，您必须避免它们。我有一些jQuery代码，可将块追加到称为游戏的div上。

我在选择生成的每个div并使它们向下移动而没有单击时遇到麻烦。 Here is the GitHub link，这里是example

这是jQuery代码（部分代码）

function spawn_block(){

$spawned_block = $("<div class='block'></div>")
$game.append($spawned_block); //add div with class block to #game div

var left=getRandomInt(0, $game.width()-$spawned_block.width()); //gets a random value from left of screen where div can appear
var top=getRandomInt(0, $game.height()-$spawned_block.height()); //not useful unless you don't want the div to appear at the top
//adds a random position and color to spawned_block

$spawned_block.css({
    "left": left,
    "background-color": getRandomColor()
});
//if you want a random position from top add "top" : top,
};

    if($spawned_block.position.top < $game.position.top + $game.height ) {
        $spawned_block.css("top", "+=25px");
    }

这最后一段代码是我在函数末尾添加的，我在做什么错呢？

最佳答案

不知道这是不是正在发生的事情，只是最近添加的div是否向下移动？如果您执行以下操作，则可能会有所帮助：

$("#game .block").each(function(index){
    if($(this).position.top < $game.position.top + $game.height ) {
        $(this).css("top", "+=25px");
    }
});

这遍历id .block元素内的每个#game，并在其上运行if语句。

另一件事可能是您的问题（恐怕您的问题还不够清楚，我无法告诉您）是，您仅在事件发生时（例如单击或阻止）运行该函数将所有内容向下移动添加）。也许这样的事情可能对您有用：

function anim() {
    $("#game .block").each(function(index){
        if($(this).position.top < $game.position.top + $game.height ) {
            $(this).css("top", "+=25px");
        }
    });
    window.requestAnimationFrame(anim);
}
window.requestAnimationFrame(anim);

这告诉浏览器（通过window.requestAnimationFrame(anim);行）在下一帧运行anim()函数，该函数将块向下移动。您可以阅读有关requestAnimationFrame() here的更多信息。

祝好运！