[SOLUCIONADO] Hacer movimiento de Div

helion · #1 (**permalink**) 08/12/2013, 11:19

hola amigos veran... estoy intentando desarrollar un juego php con javascript, hace poco habia lanzado un servidor en full php y me di cuenta que por demasiadas consultas a la base de datos ,esta se desconectaba u.u

pero bueno quiero crear una transición de esta manera :

Código PHP:

  <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;

}

-->

</style>

<div id="base-map"></div>

<div id="user-1"><img src="file:///C|/AppServ/www/pokemon/poke_images/users/0_.gif" width="16" height="21"></div>

<div id="apDiv1">

  <table width="200" border="1">

    <tr>

      <td>&nbsp;</td>

      <td>arriba</td>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td>izquierda</td>

      <td>&nbsp;</td>

      <td>derecha</td>

    </tr>

    <tr>

      <td>&nbsp;</td>

      <td>abajo</td>

      <td>&nbsp;</td>

    </tr>

  </table>

</div>

que seria algo asi en imagen:

e visto a varios que usan un tipo de javascript, que al presionar los botones ... hacen de que avance el div, en este caso quisiera que avanzara el div en 16 en 16px, alguien podria darme una mano en esto por favor, gracias de antemano.

PD: si alguien esta interesado en este tipo de juego me gustaria que formara parte de mi proyecto ...

kevin_91bo · #2 (**permalink**) 09/12/2013, 14:09

Buenas,
Le he echado un vistazo a tu código y mas o menos tengo una solución que seria lo siguiente:
Tendrías que hacer una función para cada movimiento, el cual se tendría que visualizar su posición según sea vertical o horizontal en cada momento que presionas los botones.
Para saber la posición de un DIV con ID se utilizaría : element.offsetTop o element.offsetLeft.
Y para el movimiento , con un simple un simple element.style.top o element.style.left
vendría perfecto.
Para que lo entiendas mejor, te muestro el código.

Código HTML:

<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; 
} 

</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> 
<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>

Dime que tal te fue

helion · #3 (**permalink**) 11/12/2013, 14:53

Cita:

Iniciado por kevin_91bo

Buenas,
Le he echado un vistazo a tu código y mas o menos tengo una solución que seria lo siguiente:
Tendrías que hacer una función para cada movimiento, el cual se tendría que visualizar su posición según sea vertical o horizontal en cada momento que presionas los botones.
Para saber la posición de un DIV con ID se utilizaría : element.offsetTop o element.offsetLeft.
Y para el movimiento , con un simple un simple element.style.top o element.style.left
vendría perfecto.
Para que lo entiendas mejor, te muestro el código.

Código HTML:

<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; 
} 

</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> 
<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>

Dime que tal te fue

hola kevin !! eres lo maximo, te pasaste me funciona de maravilla, quisiera hacerte mas preguntas crees que puedas ayudarme :S ?

marlanga · #4 (**permalink**) 11/12/2013, 15:05

Te recomiendo el blog que hay en mi firma para aprender.
En particular:
http://www.jlabstudio.com/webgl/tuto...ial-canvas-2d/
http://www.jlabstudio.com/webgl/tuto...ados-en-tiles/

helion · #5 (**permalink**) 11/12/2013, 16:05

Cita:

Iniciado por marlanga

Te recomiendo el blog que hay en mi firma para aprender.
En particular:
http://www.jlabstudio.com/webgl/tuto...ial-canvas-2d/
http://www.jlabstudio.com/webgl/tuto...ados-en-tiles/

gracias por los tutoriales me parecen buenos, solo que no es multiplayer y que me costaria trabajo adaptarlo a una banca de datos...

marlanga · #6 (**permalink**) 11/12/2013, 16:11

Sólo un consejo: Antes de programar un call of duty: ghost del 2013, hay que saber hacer un pong del año 70. O te ahogarás.
Te atrancas al mover un div por la pantalla, ¿y tienes puestas las miras en un juego multijugador en html mediante polling con ajax? la receta perfecta para el desastre.

helion · #7 (**permalink**) 11/12/2013, 16:24

Cita:

Iniciado por marlanga

Sólo un consejo: Antes de programar un call of duty: ghost del 2013, hay que saber hacer un pong del año 70. O te ahogarás.
Te atrancas al mover un div por la pantalla, ¿y tienes puestas las miras en un juego multijugador en html mediante polling con ajax? la receta perfecta para el desastre.

claro que no mano, entiendo que es complicado pero mira esto:

se que no es un juego fluido html5 o canvas http://www.pokemon-arion.net pero es un juego php que desarrolle y me corre bien, solo quiero cambiar el caminar con javascript quedando en multiplayer por eso solo pido unos tips

marlanga · #8 (**permalink**) 11/12/2013, 16:41

El mayor problema que vas a tener, es que las llamadas ajax tienen un retraso enorme en comparación con la velocidad con la que un jugador puede desplazarse por el mapa, o hacer cosas.
Yo haría una mezcla. Usaría llamadas ajax para mover el juego, pero impediría que el jugador realice más acciones si la última acción comunicada con ajax al servidor aún no ha tenido respuesta. El juego no iría mas fluído, pero evitarías recargar el frame contínuamente.

helion · #9 (**permalink**) 11/12/2013, 18:15

Cita:

Iniciado por marlanga

El mayor problema que vas a tener, es que las llamadas ajax tienen un retraso enorme en comparación con la velocidad con la que un jugador puede desplazarse por el mapa, o hacer cosas.
Yo haría una mezcla. Usaría llamadas ajax para mover el juego, pero impediría que el jugador realice más acciones si la última acción comunicada con ajax al servidor aún no ha tenido respuesta. El juego no iría mas fluído, pero evitarías recargar el frame contínuamente.

si por eso quiero usar mas sobre javascript, ya que aun no e podido encontrar un buen tuto de canvas multiplayer :/