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:

Carácteres escapados en Javascript
- 238
El término escapar un carácter en Javascript sin duda da un poquito de yuyu. En realidad una palabra poco atractiva para algo muy práctico. El concepto es muy similar al de escapar un carácter en HTML...
Métodos javascript
- 260
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
Ejercicio – Corrige los errores (concepto acoplamiento javascript)
- 101
Ejercicio javascript en el que se repasa el concepto de acoplamiento y se piden corregir algunos errores típicos.
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 85
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
Métodos imprescindibles para trabajar con fechas en Javascript
- 187
Compendio de métodos para trabajar con fechas en Javascript. Comparto mi chuleta de métodos para obtener y crear nuevas fechas.
Acceder y modificar una web con javascript
- 332
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...
Tipos de variables en Javascript
- 686
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...
Ejercicio – ¿En qué día de la semana estamos?
- 67
Problema javascript que devuelve en formato texto el día de la semana en el que esamos. Incluye 2 posibles soluciones con switch() y array.
Como eliminar nodos del DOM mediante Javascript
- 470
Resumimos como eliminar nodos del DOM mediante javascript y siguiendo una estrategia sencilla mediante .removeChild()
Ejercicio – Crear una lista de recordatorios
- 57
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
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.