title: Jquery: using .animate to creata a game
body: <p>I know this is not the best kind of question, but I'm really stuck. I'm trying to create a game like the on in this link : <a href="http://richard.parnaby-king.co.uk/examples/games/balloons/" rel="nofollow">http://richard.parnaby-king.co.uk/examples/games/balloons/</a> , using only Jquery/Javascript/CSS/HTML. (So I can't use flash).</p>
  
  <p>I know the game can't look as nice or fluent with it, but what I have right now doensn't even work.</p>
  
  <p>First, i've created a div, wich whill be the 'gamefield'. Then I want to add a balloon at the bottom of the page every 200 ms, which goes up. It works for one balloon, but as soon as I add more, the balloons jump to the top of the screen when the .animate function starts.</p>
  
  <pre><code> var divheight = $("#playfield").height();
  var divwidth = $("#playfield").width();
  var y = 0;
  
  while (y&lt;=20) {
  var position = Math.round(divwidth*Math.random());
  setTimeout(function(){
  
  var testballoon = '&lt;img src="Afbeeldingen/testballon.png" class="blueballoon"'
  testballoon+= 'style="position:absolute;bottom:0px;' + 'left:' + position + 'px;"/&gt;';
  $("#playfield").append(testballoon);
  }, 1000); y++}
  </code></pre>
  
  <p>But I can't even get the images in a good place, and animating them doensn't work like I intend to either. I'm not asking for ready-to-use code, but if anyone has any experience with something like this and knows a better approach to randomly add elements/moving them on a page, I'd appreciate it.</p>