Inicio Apuntes FPApuntes DAW Mover un objeto por pantalla utilizando JavaScript

Mover un objeto por pantalla utilizando JavaScript

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.
mover un objeto con 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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

9 Comentarios

VerDanT 24 septiembre, 2022 - 4:47 PM

uy, pensé que era un objeto que podría moverse con la cruzeta del teclado, igual está bueno :)

Respuesta
entreunosyceros 24 septiembre, 2022 - 11:09 PM

Hola, algo como lo que pides, creo que lo tengo por alguna carpeta. Si lo encuentro lo publicaré también. Salu2.

Respuesta
entreunosyceros 22 octubre, 2022 - 12:53 AM

No sé si algo así se acerca a lo que buscas.

Respuesta
Rick 25 julio, 2022 - 9:54 PM

Perdi significativamente mi tiempo

Respuesta
entreunosyceros 26 julio, 2022 - 12:51 AM

Quizás seas significativamente un poco inútil … no sé que más decirte :)

Respuesta
Juanpe 12 noviembre, 2021 - 9:37 AM

ja,ja,ja bien dicho, encima que lo publicas, la gente dando por ( | )

Respuesta
entreunosyceros 12 noviembre, 2021 - 1:17 PM

Hay gente para todo ;). Salu2.

Respuesta
Pedro 26 noviembre, 2019 - 4:34 PM

esto es una mierda

Respuesta
sapoclay 26 noviembre, 2019 - 4:37 PM

Esto es una mierda … o tú un puto inútil. Yo me inclino más por esta segunda opción, pedazo de subdesarrollado.

Respuesta

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.