title: Javascript game with css position
body: <p>I am trying to make a very simple helicopter game in javascript and I'm currently using css positions to move the objects. but I wanted to know if there was a better/other method for moving objects (divs) when a user is pressing a button</p>
  
  <p>here's a code i've got so far..</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Game 2 helicopter&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  function num(x){
    return parseInt(x.replace(/([^0-9]+)/g,''));  
  }
  
  function getPos(x, y){    
    var inum=Math.floor(Math.random()*(y+1-x)) + x;
    inum=inum;
    return inum; 
  }
  
  function setTop(x,y){ x.style.top = y+'px'; }
  function setBot(x,y){ x.style.bottom = y+'px'; }
  function setLeft(x,y){ x.style.left = y+'px'; }
  function setRight(x,y){ x.style.right = y+'px'; }
  
  function getTop(x){ return num(x.style.top); }
  function getBot(x){ return num(x.style.bottom); }
  function getLeft(x){ return num(x.style.left); }
  function getRight(x){ return num(x.style.right); }
  
  function moveLeft(x,y){
    var heli = document.getElementById('heli');   
    var obj = document.getElementById('obj');  
    var poss = [20,120,350,400];
    var r_pos = getPos(1,4);
    var rand_pos = poss[r_pos];
    xleft = getLeft(x)-y;
    if(xleft&gt;0){
     xleft=xleft;
    }
    else{
     xleft=800;
    setTop(x,rand_pos);
    }  
    setLeft(x,xleft);
    setTimeout(function(){moveLeft(x,y)},10);
    checkGame(heli,obj);
  }
  var heli;
  var obj;
  
  function checkGame(x,y){
   var obj_right = getLeft(x) + 100;
   var yt = getTop(y);
   var yb = (getTop(y)+100);
     if(getTop(x) &gt;= yt &amp;&amp; getTop(x) &lt;= yb &amp;&amp; obj_right==getLeft(y)){
       endGame();
     }
  }
  
  function func(){
    var x = document.getElementById('heli');
    var y = document.getElementById('obj');
    alert(getTop(x)+' '+getTop(y)+' '+(getTop(y)+200));
  }
  
  function startGame(e){
    document.getElementById('park').style.display='block';
    document.getElementById('newgame').style.display='none';
    heli = document.getElementById('heli');
    obj = document.getElementById('obj');
    hp = heli.style.top;
    op = obj.style.top;
    setTop(heli,20);
    setLeft(heli,20);
  
    setLeft(obj,800);
    setTop(obj,20);
    moveLeft(obj,5);    
  }
  
  function newGameLoad(){
    document.getElementById('park').style.display='none';
    document.getElementById('newgame').style.display='block';
  }
  
  function gamePos(e){
    heli = document.getElementById('heli');
    obj = document.getElementById('obj');
    var keynum;
    var keychar;
    var numcheck;
  
    if(window.event){ // IE
      keynum = e.keyCode;
    }
    else if(e.which){ // Netscape/Firefox/Opera
      keynum = e.which;
    }
  
    keychar = String.fromCharCode(keynum); // up=38 down=40 left=37 right=39
    /*if(keynum==37){ //left
      tl=tl-20;
      db.style.left = tl + 'px';
    }
  
    if(keynum==39){ //right
      //stopPos();
      tl=tl+20;
      db.style.left = tl + 'px';
    }*/
  
    curb = getTop(heli);
  
    if(keynum==38){ //top
      setTop(heli,curb-10);
      //alert(curb+10);
    }
  
    if(keynum==40){ //bottom
      setTop(heli,curb+10);
      //alert(curb-10);
    }
  }
  
  function endGame(){
    clearTimeout();
    newGameLoad();
  }
  
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
    .play{position:absolute;color:#fff;}  #heli{background:url(http://classroomclipart.com/images/gallery/Clipart/Transportation/Helicopter/TN_00-helicopter2.jpg);width:150px;height:59px;}
    #obj{background:red;width:20px;height:200px;}
    .park{height:550px;border:5px solid brown;border-left:none;border-right:none;}
    #newgame{display:none;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="startGame();" onkeydown="gamePos(event);"&gt;
    &lt;div class="park" id="park"&gt;
      &lt;div id="heli" class="play"&gt;&lt;/div&gt;
      &lt;div id="obj" class="play"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;input type="button" id="newgame" style="position:absolute;top:25%;left:25%;" onclick="startGame();" value="New Game" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>