Foros del Web - Movimiento en diagonal

Foros del Web (http://www.forosdelweb.com/)

- Javascript (http://www.forosdelweb.com/f13/)

- - Movimiento en diagonal (http://www.forosdelweb.com/f13/movimiento-diagonal-587210/)

Movimiento en diagonal

Saludos amigos,

Como puedo hacer que un elemento se desplaze diagonalmente y que llegue a unas coordenadas especificas al mismo tiempo, por ejemplo:

Tengo un elemento <div> con las siguientes caracteristicas: left = 100px, top = 100px
y quiero que se desplaze hasta las cordenadas left= 300px, top=500px

como puden ver, se tiene que desplazar mas en Y que en X.

Le he intentado hacer pero llega primero al punto al que menos pixeles tiene que desplazarse.

Agradezco de antemano su respuesta.

Respuesta: Movimiento en diagonal

Hola johnj:

No sé como lo tendrás hecho, pero supongo que tendrás un setInterval() o un setTimeout() dentro de una función llamándose a sí misma.

Para ir de (100,100) a (300,500) en cada golpe de movimiento (reposicionamiento de la capa), en X se tendría que mover (300-100)/golpes unidades, y en Y (500-100)/golpes. De esa manera cuando llevemos golpes iteraciones, el objeto se habrá movido 300-100 unidades en X y 500-100 unidades en Y, más verticalmente que horizontalmente.

No sé si me he explicado: Tienes que calcular cada pasito (golpe) que vas a mover la capa para que al final cuadren los números y llegue a donde tiene que llegar.

Saludos.

Respuesta: Movimiento en diagonal

Saludos derkenuke,

Muchas gracias por tu respuesta....la verdad es que haz organizado mis ideas muchisimo. Pero aún no entiendo que quieres decir con la palabra golpes. Lo he intentado hacer así:

<html>
<head>
<script type="text/javascript">

function move(x,y)
{

var obj = document.getElementById("mover");
obj.style.left = Math.round((300 - 100) / x);
obj.style.top = Math.round((500 - 100) / y);

x++;
y++;
setTimeout("move("+ x +","+ y +")",50);

}

document.onclick = function(){move(1,1)};

</script>

</head>
<body>
<div id="mover" style="position:relative; width:100px; left:100px; top:100px;">UnoUnoUno</div>
</body>
</html>

pero el desplazamiento lo realiza hacia arriba. Lo estoy haciendo bien...o he fracasado de nuevo jejeje.

Muchas gracias.

Respuesta: Movimiento en diagonal

Lo he intentado pero me sigue desplazando hacia arriba.

Respuesta: Movimiento en diagonal

Hola de nuevo:

Sí, se podría decir que casi lo tienes. Con número de golpes me refería a número de llamadas a tu función move(). En tu función veo un par de problemas:

No tiene fin
No empieza en (100, 100), sino en (0,0) (creo que eso es lo que dices que sigue desplazando hacia arriba)
No funcionará en todos los navegadores por no poner las unidades a las coordenadas.

Vamos a poner un ejemplo sencillo para que no haya problemas de entendimiento. Si queremos mover un objeto desde (100, 100) a (300,300) en 200 pasos (en 200 golpes) tendremos que mover la capa 1 pixel a la derecha y un pixel hacia abajo en cada golpe. Ese 1 se calcula así:
distancia que tengo que recorrer en X = posición final en X - posicion inicial X = 300 - 100 = 200
distancia que tengo que recorrer en Y = posición final en Y - posicion inicial Y = 300 - 100 = 200
Iteraciones en las que quiero hacer el movimiento = 200
píxeles que tengo que mover mi capa en un golpe = pixeles totales que tengo que mover mi capa en X / iteraciones = 200/200 = 1
píxeles que tengo que mover mi capa en un golpe = pixeles totales que tengo que mover mi capa en Y / iteraciones = 200/200 = 1

Ahí la distancia en X y en Y en un golpe es igual, 1 y 1, pero en el caso que nos ocupa no será igual, será más en Y que en X.

La posición en X que ocupará la capa en el golpe nº 1 = posicion inicial + pixeles que tengo que mover en un golpe * golpes que llevamos = 100 + 1 * 1
En el golpe nº 2 = 100 + 1 * 2
En el golpe nº 3 = 100 + 1 * 3
En el golpe nº N = 100 + 1 * n

Luego así se deduce la fórmula general de
posición en X = posición inicial en X + aumento de posición en X en cada golpe * golpes que llevamos = x0 + ((300-100)/200) * n

He fabricado a partir de tu función una más genérica para mover cualquier capa desde cualquier punto a cualquier punto en el número de golpes que quieras:

Código PHP:

   <html>

<head>

<script type="text/javascript">

 
function move(elId, x0, y0, x1, y1, golpesTotales, golpeActual) {

    var obj = document.getElementById(elId);

    if( !golpeActual )

        golpeActual = 1;

    obj.style.left = x0 + Math.round(((x1 - y0)/golpesTotales)*golpeActual) +"px";

    obj.style.top = y0 + Math.round(((y1 - y0)/golpesTotales)*golpeActual) +"px";

    obj.innerHTML = "estoy en (" + parseInt(obj.style.left) +", "+ parseInt(obj.style.top) +")";

    golpeActual++;

    if( golpeActual <= golpesTotales )

        setTimeout("move('"+elId+"', "+x0+", "+y0+", "+x1+", "+y1+", "+golpesTotales+", "+golpeActual+")",10);

}

 
document.onclick = function() { move('mover', 100, 100, 300, 500, 300) };

 
</script>

 
</head>

<body>

<div id="mover" style="position:relative; width:200px; left:100px; top:100px;">estoy en (100, 100)</div>

</body>

</html>

Ten en cuenta que cada golpe se produce cada 10ms, luego si colocas que el movimiento se haga en 3 golpes tardará 30ms en moverse.

Bueno, esa es mi chapa.
Saludos :adios:

Respuesta: Movimiento en diagonal

Muchas gracias amigo... en el momento en que tu posteaste habia acabado de entender la explicación que me habias dado anteriormente...

Muchas Gracias por tu ayuda y por este gran ejemplo.