Poner un obstaculo en movimiento div con javascript

[helion]

Hola amigos veran estoy desarrollando un pequeño juego hecho en php y javascript, y bueno gracias a la ayuda de algunos usuarios de este foro pude lograr a que un div ( sprite) se desplace

Codigo:

Código PHP:

  <html>
<head>
<style type="text/css"> 
 
#base-map { 
    position:absolute; 
    left:0; 
    top:0; 
    width:500px; 
    height:320px; 
    z-index:1; 
    background-color: #CCCCCC; 
} 
#user-1 { 
    position:absolute; 
    left:0px; 
    top:0px; 
    width:15px; 
    height:21px; 
    z-index:2; 
} 
#apDiv1 { 
    position:absolute; 
    left:514px; 
    top:18px; 
    width:103px; 
    height:85px; 
    z-index:3; 
} 
 
#obstaculo {
    position:absolute;
    left:32px;
    top:32px;
    width:16px;
    height:21px;
    z-index:4;
    background-color: #000000;
}
</style> 
 
<script type="text/javascript">
    
    function abajo(){
    var posicionActual=document.getElementById("user-1").offsetTop;
    posicion = posicionActual + 16;
    var abajo = document.getElementById("user-1").style.top=posicion;
    }
    function arriba(){
    var posicionActual=document.getElementById("user-1").offsetTop;
    posicion = posicionActual - 16;
    var arriba = document.getElementById("user-1").style.top=posicion;
    }
    function izquierda(){
    var posicionActual=document.getElementById("user-1").offsetLeft;
    posicion = posicionActual  - 16;
    var izquierda = document.getElementById("user-1").style.left=posicion;
    }
    function derecha(){
    var posicionActual=document.getElementById("user-1").offsetLeft;
    posicion = posicionActual + 16;
    var derecha = document.getElementById("user-1").style.left=posicion;
    }
    
</script>
</head>
<body>
    
<div id="base-map">
  <div id="obstaculo"></div>
</div> 
<div id="user-1"><img src="http://static4.wikia.nocookie.net/__cb20110104210317/mario/es/images/d/d4/Champi%C3%B1%C3%B3n_M%26LVCB.png" width="16" height="21"></div> 
<div id="apDiv1"> 
  <table width="200" border="1"> 
    <tr> 
      <td>&nbsp;</td> 
      <td onClick="arriba()">arriba</td> 
      <td>&nbsp;</td> 
    </tr> 
    <tr> 
      <td onClick="izquierda()">izquierda</td> 
      <td>&nbsp;</td> 
      <td onClick="derecha()">derecha</td> 
    </tr> 
    <tr > 
      <td>&nbsp;</td> 
      <td onClick="abajo()">abajo</td> 
      <td>&nbsp;</td> 
    </tr> 
  </table> 
</div>  
</body>
</html> 
  

pero ahora lo que quisiera es saber... como puedo hacer para que el obstaculo color negro no se pasar por encima sino por los costados ...



Gracias de ante mano !