Mover un objeto por pantalla utilizando JavaScript

Este post lo dejo aquí colgado por que me parece un buen ejemplo que puede valer a mucha gente para empezar a programar un poco con JavaScript utilizando al mismo tiempo CSS3. Se trata de una manera «relativamente» sencilla de mover un objeto por pantalla utilizando estos dos lenguajes.

Para esto utilizaremos el método getElementById de JavaScript, @-webkit-keyframes y  @-moz-keyframes de CSS3. Con esto conseguiremos el típico efecto de los salvapantalla de ordenador en el que podemos ver un elemento botando de un lado a otro por la pantalla.

Si quieres  ver el resultado final del ejemplo, puedes hacerlo en el siguiente enlace. El ejemplo solo consta de un único archivo, pero lo suyo llegado el caso sería dividirlos según los diferentes lenguajes.

Mover un objeto por pantalla con JavaScript

Como digo, el código que se necesita irá todo dentro de un archivos index.html.

CSS3

/*
Estilos para la caja y para el elemento a mover
*/

#imagen{
/*Es importantisimo asignarle a la imagen una posición relativa
para que pueda moverse siguiendo el flujo natural del HTML es
decir dentro de la caja.
*/
width:150px;
position:relative;
display:block;

}

#lienzo{
border:1px solid gray;
box-shadow:0px 0px 20px gray inset;
width:100%;
height:750px;
border-radius:20px;
overflow: hidden;

}

/*Animaciones en css*/
.gira{
-moz-animation:rotar 500ms infinite linear;
-webkit-animation:rotar 500ms infinite linear;
}

@-webkit-keyframes rotar{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}

@-moz-keyframes rotar{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}

JavaScript

//Definimos e iniciamos las variables necesarias
        var y=0;           
        var x=0;
        var controlY=1;  
        var controlX=1;  
        var velocidad=1;
 
        // Cada 5 mili-segundos se va a ejecutar la función mover que comprueba
        // las colisiones de la pelota
        var intervalo=setInterval("mover()",5);
 
        //la función mover, que hace el idem con el objeto
        function mover(){
            //Eje de las X
            if(controlX==1){ 
                x+=velocidad;
            }else{         
                x-=velocidad;
            }
            if(x<=0){ controlX=1; x=0; }else if(x>=document.getElementById("lienzo").offsetWidth-150){
                // Esto significa que si es mayor o igual a el ancho que tiene el lienzo menos el tamaño de la imagen se le da un nuevo valor a x
                controlX=0;
                x=document.getElementById("lienzo").offsetWidth-150;
            }

            //Eje de las Y 
            if(controlY==1){ 
                y+=velocidad;
            }else{         
                y-=velocidad;
            }
            if(y<=0){ controlY=1; y=0; }else if(y>=document.getElementById("lienzo").offsetHeight-150){ 
            // Esto significa que si es mayor o igual a la altura que tiene el lienzo menos el tamaño de la imagen se le dará un nuevo valor a y
                controlY=0;
                y=document.getElementById("lienzo").offsetHeight-150;
            }
 
            
            //movemos la imagen en el eje x e y asignando un valor en px
            document.getElementById("imagen").style.left=String(x)+"px";
            document.getElementById("imagen").style.top=String(y)+"px";
        }
        
        //función que llama a la animación css para girar el objeto
        function girar(){
            document.getElementById("imagen").className="gira";
        }

HTML

<div id="lienzo"> 
<img src="planeta.png" id="imagen" alt="eclipse"/>
</div> 
<input type="button" value="Rotar" id="rotar" onclick="girar();"/>

Evidentemente todo este código ha de ir envuelto entre las correspondientes etiquetas para que funcione correctamente. En su día me vi obligado a quitárselas, aun que a día de hoy no recuerdo por qué lo hice. Pero bueno, avisado está todo aquel que quiera utilizar el código que en este artículo se muestra.