如何在没有事件的情况下移动 div 的孩子

Question

我目前正在制作一个游戏，其中方块掉落，你必须避免它们。我有一些 jQuery 代码将块附加到 div称为 game.

我无法选择每个生成的 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");
    }

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

Answer 1

不确定这是不是发生在您身上，但只是最近添加的div 向下移动？如果您执行以下操作可能会有所帮助：

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

这会遍历 id #game 元素中的每个 .block 并在其上运行您的 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的信息。

祝你好运！