Wie man Kinder eines Divs ohne Ereignis bewegt

Question

Ich mache gerade ein Spiel, wo Blöcke fallen und Sie sie vermeiden müssen. Ich habe einige jQuery-Code, der Blöcke an eine div namens Spiel anfügt.

Ich habe Probleme bei der Auswahl jeder einzelnen div erstellt und damit sie ohne Klicken zu bewegen. Here is the GitHub link und hier ein example

Hier ist der jQuery-Code (ein Teil davon)

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"); 
    } 

Dieses letzte Stück Code ist, was ich am Ende der Funktion hinzugefügt, was am Ich mache falsch?

Answer 1

Nicht sicher, ob dies mit Ihnen passiert, aber ist nur der zuletzt hinzugefügte div nach unten verschoben? Vielleicht würde es helfen, wenn man etwas tat wie:

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

Dies geht durch jede einzelne .block innerhalb des Elements der ID #game und läuft Ihre if Aussage darauf.

Die andere Sache, die Ihr Problem sein könnte (ich fürchte, Ihre Frage ist nicht klar genug für mich zu erzählen) ist, dass Sie nur die Funktion ausführen, alles nach unten zu verschieben, wenn ein Ereignis eintritt (wie ein Klick) oder ein Block hinzugefügt wird). Vielleicht so etwas wie dies könnte für Sie arbeiten:

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); 

Dies teilt dem Browser (durch die Leitung window.requestAnimationFrame(anim);) an, im nächsten Bild, führen Sie die Funktion anim(), die Sie die Blöcke bewegt. Sie können mehr über requestAnimationFrame()here lesen.

Viel Glück!