Muévete con Javascript

Muévete con Javascript
Adriana
Desarrolladora Web
“Todo va a estar bien al final. Si no está bien, no es el final.”
Post más relevante: CSS3: Menú Desplegable con hover

En el tutorial de esta semana, vamos a tratar unas pequeñas propiedades de Javascript para dar movimiento a elementos de nuestro documento HTML. Aunque pueda parecer complicado, Javascript es bastante sencillo, solo hay qué saber que propiedades o funciones usar y dónde aplicarlas.

Animación Javascript

Vamos a hacer un pequeño script simulando una carrera de coches.
Este es nuestro código HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Carrera</title>
</head>
<body>
    <div class="body">
	<img id="coche1" src="coche.gif" alt="Este es mi coche">
	<img id="coche2" src="coche.jpg" alt="Este es mi oponente">			
	<div class="zona_boton">
		<input type="button" id="boton">	
	</div>
    </div>
</body>
</html>

No olvidéis que se puede realizar con cualquier tipo de elemento, no solo para imágenes. En este caso con imágenes queda mucho más visual.
Si vais a usar las imágenes recordad poner bien la ruta y el nombre para acceder a ellas.
NOTA: También se puede usar cualquier tipo de formato de imagen. Las más óptimas para dar mejor sensación de movimiento serían las animaciones .gif, como, en este caso, el primer coche.

Captura1

De momento en nuestro navegador veremos todo desordenado y el botón sin ninguna funcionalidad.
Ahora procederemos a añadir unas líneas de estilo muy básicas para colocar los elementos.

Código:

<style>
.body {
   padding-top: 40px;
   padding-left: 40px;
}

img#coche1 {
   position: absolute;
}

img#coche2 {
   position: absolute;
   margin-top: 80px;
}

.zona_boton {
   text-align: center;
   width: 100%;
   margin-top: 240px;
}

</style>

Recordad que esta etiqueta siempre tiene que ir en la cabecera.

Captura2

Como resultado de estos estilos nuestros coches de carreras ya están en su posición de salida. Ahora solo falta aplicarles el movimiento.
Para ello usaremos el Javascript.

Función Javascript

Para empezar con Javascript, lo primero que hay que hacer es crear una etiqueta “script” justo antes de donde se cierra la etiqueta del body para que se ejecute cuando haya terminado de cargar el archivo.

<body>

   ...

   <script>

      ....

   </script>

</body>

Una vez creada la etiqueta, procederemos a crear nuestro código para el movimiento de los coches, dentro de ella.

Vamos a empezar por seleccionar ambas imágenes y almacenarlas en dos variables para tenerlas a mano siempre que queramos usarlas. Se aplica la función “document.getElementById(‘id’)“.

<script>
	//selecionar imágenes
	var coche1 = document.getElementById("coche1");
	var coche2 = document.getElementById("coche2");
</script>

Una vez que las tenemos seleccionadas y guardadas vamos a darle la posición desde donde van a empezar a moverse.

<script>
       //seleccionar imágenes
       var coche1 = document.getElementById("coche1");
       var coche2 = document.getElementById("coche2");

       //posiciones iniciales
       var x_coche1 = 0;
       var x_coche2 = 0;
</script>

Después de crear todas las variables que nos harán falta para mover nuestros coches es hora de realizar la función que los va a desplazar por toda la pantalla.

<script>	  
      //seleccionar imágenes
      var coche1 = document.getElementById("coche1");
      var coche2 = document.getElementById("coche2");

      //posiciones iniciales
      var x_coche1 = 0;
      var x_coche2 = 0;

      function correr() {

      }
</script>

Creamos nuestra propia función, en la cual se van a realizar todos los procesos de movimiento.
Para que nuestros coches se muevan, lo único que hay que hacer es ir dándole mayor valor a su posición horizontal, es decir, en las coordenadas x.
Como ya declaramos anteriormente la posición inicial de cada coche, consiste en ir aumentando el valor de esta posición inicial e ir aplicándolo en el valor “left” del elemento seleccionado.

Una vez definido el movimiento, hay que marcar el recorrido, que va a ser un trozo de nuestra pantalla.
Lo que hacemos es hacer una condición indicándole los valores del ancho de la pantalla por donde se van a mover y que cuando se salga de eses valores vuelva a empezar en la posición inicial.

<script>	  
      //seleccionar imágenes
      var coche1 = document.getElementById("coche1");
      var coche2 = document.getElementById("coche2");

      //posiciones iniciales
      var x_coche1 = 0;
      var x_coche2 = 0;

      function correr() {
      	   //movimiento coche1
	   if (x_coche1 <= 85 && x_coche1 >= 0) { //condición para que se mueva entre estos valores de la pantalla
		x_coche1 = x_coche1 + 1; //movimiento del valor x
		coche1.style.left = x_coche1 + "%"; //aplicar el valor obtenido al left del elemento
	    }
	    else { //si no cumple la condición, es decir, se sale de los valores de la pantalla, vuelve a empezar
		 x_coche1=0; //posicion inicial
		 coche1.style.left = x_coche1 + "%"; //volvemos a aplicar el valor obtenido al left del elemento
	    }

	    //movimiento coche2
            if (x_coche2 <= 85 && x_coche2 >= 0) { //condición para que se mueva entre estos valores de la pantalla
		 x_coche2 = x_coche2 + 1; //movimiento del valor x
		 coche2.style.left = x_coche2 + "%"; //aplicar el valor obtenido al left del elemento
	    }
            else { //si no cumple la condición, es decir, se sale de los valores de la pantalla, vuelve a empezar
		 x_coche2=0; //posicion inicial
		 coche2.style.left = x_coche2 + "%"; //volvemos a aplicar el valor obtenido al left del elemento
	    }
      }
</script>

Para que se haga el movimiento cuando aplicamos los valores en left hay que añadir el “%” para que tome el tamaño aplicado del total de la pantalla.

Ahora que ya tenemos nuestro código acabado, hay que darle esa funcionalidad al botón y nuestro coches estarán listos para correr.
Para dotar de funcionalidad nuestro botón es tan sencillo como darle el atributo “onclick“.

<input id="boton" type="button" onclick='setInterval("correr()",60)' value="A CORRER!" />	

El “setInterval” lo que hace es que la función que nosotros le indicamos se este repitiendo cada x tiempo, también indicado por nosotros. En este caso se repetirá la función “correr” creada por nosotros cada 60 milisegundos.

Y así nuestros coches empezarán a moverse cuando nosotros pulsemos el botón.

Captura3

Como yo siempre animo a que se siga investigando y probando nuevas cosas, vamos a aumentarle la velocidad al primer vehículo para que acabe su recorrido antes que el segundo.
Solo consiste, como ya dije, en aumentar el valor de la coordenada x.

x_coche1 = x_coche1 + 2; //le aumentamos en 2 la velocidad

Y este sería el código final en el que el primer coche corre más que el segundo:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Carrera</title>
    <style>
       .body {
           padding-top: 40px;
           padding-left: 40px;
       }

       img#coche1 {
          position: absolute;
       }

       img#coche2 {
         position: absolute;
         margin-top: 80px;
      }

      .zona_boton {
        text-align: center;
        width: 100%;
        margin-top: 240px;
      }

   </style>
</head>
<body>
    <div class="body">
	<img id="coche1" src="coche.gif" alt="Este es mi coche">
	<img id="coche2" src="coche.jpg" alt="Este es mi oponente">			
	<div class="zona_boton">
		<input type="button" onclick='setInterval("correr()",60)' value="A CORRER!">	
	</div>
    </div>
    <script>	  
      //seleccionar imágenes
      var coche1 = document.getElementById("coche1");
      var coche2 = document.getElementById("coche2");

      //posiciones iniciales
      var x_coche1 = 0;
      var x_coche2 = 0;

      function correr() {
      	   //movimiento coche1
	   if (x_coche1 <= 85 && x_coche1 >= 0) { //condición para que se mueva entre estos valores de la pantalla
		x_coche1 = x_coche1 + 2; //movimiento del valor x
		coche1.style.left = x_coche1 + "%"; //aplicar el valor obtenido al left del elemento
	    }
	    else { //si no cumple la condición, es decir, se sale de los valores de la pantalla, vuelve a empezar
		 x_coche1=0; //posicion inicial
		 coche1.style.left = x_coche1 + "%"; //volvemos a aplicar el valor obtenido al left del elemento
	    }

	    //movimiento coche2
            if (x_coche2 <= 85 && x_coche2 >= 0) { //condición para que se mueva entre estos valores de la pantalla
		 x_coche2 = x_coche2 + 1; //movimiento del valor x
		 coche2.style.left = x_coche2 + "%"; //aplicar el valor obtenido al left del elemento
	    }
            else { //si no cumple la condición, es decir, se sale de los valores de la pantalla, vuelve a empezar
		 x_coche2=0; //posicion inicial
		 coche2.style.left = x_coche2 + "%"; //volvemos a aplicar el valor obtenido al left del elemento
	    }
      }
  </script>
</body>
</html>

Captura4

Si quieres ver este ejemplo en funcionamiento, sigue este enlace.
Espero que os haya gustado esta forma tan sencilla de hacer movimientos en horizontal con este lenguaje, que a día de hoy es compatible con todos los navegadores.
Sin nada más que añadir, nos vemos en el próximo tutorial.

Una opinión sobre “Muévete con Javascript

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *