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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
En este ejercicio se practica el método length y se usa para jugar con los arrays y acceder al primer elemento y al último de un vector.
Ejercicio de programación de una venta emergente con el mítico mensaje de Ley de Cookies. Paradójicamente hay que usar una cookie para cumplir con la ley de cookies. Incluye solución.
En esta entrada vemos un tutorial paso a paso sobre como añadir nuevos nodos al DOM mediante Javacript con el ejemplo de un párrafo y el de una imagen.
Se muestran 3 ejemplos explicados paso a paso para ayudar a entender como funciona la estructura de programación for.
¿como podemos hacer para forzar sin botón submit el envío de un formulario web una vez han rellenado todos los campos que deseamos?
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
No hay comentarios