Poner un obstaculo en movimiento div con javascript

helion · #1 (**permalink**) 11/12/2013, 18:33

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 !