Ejercicio – El pokemon corredor

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

ejercicio javascript setInterval

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:

[vc_raw_html]JTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDc3R5bGUlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMkElN0JtYXJnaW4lM0EwJTNCcGFkZGluZyUzQTAlM0Jib3gtc2l6aW5nJTNBYm9yZGVyLWJveCUzQiU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMC5jb250ZW5lZG9yJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwbWFyZ2luJTNBYXV0byUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHdpZHRoJTNBNjAwcHglM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBoZWlnaHQlM0EzMDBweCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHBvc2l0aW9uJTNBcmVsYXRpdmUlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBib3JkZXIlM0ExcHglMjBzb2xpZCUyMCUyMzAwMCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGJhY2tncm91bmQlM0F1cmwlMjhodHRwcyUzQSUyRiUyRmZyYW5jZXNjcmljYXJ0LmNvbSUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGMjAxOCUyRjExJTJGcnVubmVyLmpwZyUyOSUyMG5vLXJlcGVhdCUyMDAlMjAwJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwLmNvcnJlZG9yJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwd2lkdGglM0E2MHB4JTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaGVpZ2h0JTNBNjBweCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGJhY2tncm91bmQlM0F1cmwlMjglMjdodHRwcyUzQSUyRiUyRmZyYW5jZXNjcmljYXJ0LmNvbSUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGMjAxOCUyRjExJTJGY2hhcm1hbmRlci5naWYlMjclMjklMjBuby1yZXBlYXQlMjAwJTIwMCUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMHBvc2l0aW9uJTNBYWJzb2x1dGUlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBib3R0b20lM0EwJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGc3R5bGUlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmNvbnRlbmVkb3IlMjIlM0UlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCUyMmNvcnJlZG9yJTIyJTNFJTNDJTJGZGl2JTNFJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTBBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDc2NyaXB0JTNFJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwd2luZG93Lm9ubG9hZCUzRGluaXQlM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBmdW5jdGlvbiUyMGluaXQlMjglMjklN0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBzZXRJbnRlcnZhbCUyOG1vdmVyJTJDMTAlMjklM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBpenF1aWVyZGElMjAlMjAlM0QlMjAwJTNCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZnVuY3Rpb24lMjBtb3ZlciUyOCUyOSU3QiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGl6cXVpZXJkYSUyQiUyQiUzQiUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGlmJTIwJTI4aXpxdWllcmRhJTNDNTUwJTI5JTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwZG9jdW1lbnQucXVlcnlTZWxlY3RvciUyOCUyMi5jb3JyZWRvciUyMiUyOS5zdHlsZS5sZWZ0JTIwJTNEJTIwaXpxdWllcmRhJTIwJTJCJTIwJTI3cHglMjclM0IlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlN0RlbHNlJTdCJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwaXpxdWllcmRhJTIwJTNEJTIwMCUzQiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSU3RCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUzQyUyRnNjcmlwdCUzRQ==[/vc_raw_html]

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.[vc_custom_heading text=»Código html y css» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

<!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>

[vc_custom_heading text=»Código javascript» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

<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!

Deja una respuesta

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