25 Nov Ejercicio – El pokemon corredor
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:
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:
¿Qué es programar? Programar es indicar a una máquina que siga un conjunto ordenado de instrucciones. Es una acción cotidiana que realizamos sin aperc...
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una i...
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de scri...
Veamos como podemos deshabitar el envío de un formulario web mediante javascript. Explico el método clásico y otra alternativa más limpia mediante pre...
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corr...
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.
No hay comentarios