Ejercicio – El pokemon corredor

Ejercicio – El pokemon corredor

Print Friendly, PDF & Email
Valora esta entrada

En este ejercicio vamos a desplazar mediante javascript un gif de un lado a otro de un contenedor.

Para ello haremos uso del posicionamiento absoluto y relativo css de cajas y modificaremos la posición de una caja dinámicamente.

Las siguientes lecturas te ayudaran a repasar los conceptos indispensables.

Vamos al ejercicio.

Enunciado

Combina html, css y javascript para crear un documento web en el que se muestre un pokemon que se desplace de un lado a otro de un contenedor de 600px de ancho.

Los recursos usados en el ejercicio son:

Ver solución (Haz clic)

Solución del ejercicio

Para solucionar el ejercicio encerramos un div dentro de otro.

El primero es el contenedor que servirá de fondo y que  tendrá posicionamiento relativo.

El segundo será una caja cuyo fondo será la imagen del gif y que tendrá posicionamiento absoluto con referencia su elemento contenedor.

Mediante setInterval modificamos cada 10 misilegundo la propiedad left del pokemon. Al extremo volvemos a inicializar a 0 la posición.

Código html y css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Ejercicio en el que se desplaza un corredor de punto a punto">
        <meta name="author" content="Francesc Ricart">
        <title>Pokemon corredor</title>
        
        <style>
            *{margin:0;padding:0;box-sizing:border-box;}
            .contenedor{
                margin:auto;
                width:600px;
                height:300px;
                position:relative;
                border:1px solid #000;
                background:url(runner.jpg) no-repeat 0 0;
            }
            
            .corredor{
                width:60px;
                height:60px;
                background:url('charmander.gif') no-repeat 0 0;
                position:absolute;
                bottom:0;
            }
            
        </style>      
    </head>
    <body>
        <div class="contenedor">
            <div class="corredor"></div>        
        </div>

       <script> 
        </script>
   
    </body>
</html>

Código javascript

<script>
        window.onload=init;
        function init(){
            setInterval(mover,10);
            izquierda  = 0;
        }
           
        function mover(){
            izquierda++;
            if (izquierda<550){
                document.querySelector(".corredor").style.left = izquierda + 'px';
            }else{
                izquierda = 0;
            }      
        }   
           
        </script>

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

¿Te animas a hacer una pelota que sube y que baja? ¿Te atreves a hacerlo programando el efecto gravedad?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.