Как переместить детей из div без события

Question

В настоящее время я делаю игру, где блоки падают, и вам нужно их избегать. У меня есть код 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"); 
    } 

Этот последний кусок кода, что я добавил в конце функции, то, что я Я делаю неправильно?

Answer 1

Не уверен, что это то, что происходит с вами, но только последнее добавленное div движение вниз? Может быть, это поможет, если вы сделали что-то вроде:

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

Это проходит через каждый .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.

Удачи вам!