Ejercicio – El pokemon corredor

Ejercicio – El pokemon corredor

Print Friendly, PDF & Email
Ejercicio – El pokemon corredor
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!

Entradas relacionadas:

¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 363
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Resumen de carácteres extraños en Javascript
- 307
Muchos alumnos me habéis pedido esta entrada sobre los carácteres , . : ; [] {} () en Javascript. Y es que tenéis razón. Hay pocos recursos en internet que los aglutinen y nos expliquen dónde debemo...
Tipos de variables en Javascript
- 1335
En programación se dice que una variable es un recurso de memoria del ordenador reservado para alojar una información. En Javascript existen 5 tipos de variables: textos, números, booleanos, objetos y...
LibrosWeb ahora es UniWebSidad
- 206
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Ejercicio – Sumas con letras
- 187
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
La etiqueta noscript
- 392
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
Javascript: Acoplamiento
- 682
En entradas anteriores hemos visto el origen de javascript como una de las aportaciones de Netscape a la web y como un lenguaje muy útil para aprender a programar. Este lenguaje de script nos permite ...
Ejercicio – Vamos a dormir, hay 100 ovejas que contar
- 134
Ejercicio javascript dónde se practica el uso de for y de while para la resolución de un mismo problema JS. Incluye solución.
Acceder y modificar una web con javascript
- 586
Vamos a ver como mediante Javascript podemos interactuar con las etiquetas html que constituyen un documento web. Podemos acceder a una etiqueta, un párrafo, un enlace, una imagen, o incluso a los met...
Introducción a las animaciones Javascript: setInterval() y setTimeout()
- 823
Resumimos las funciones setInterval(), clearInterval y setTimeout(). Cuales son sus parámetros, que es una función anónima y como la llamamos.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.