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 !