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:
Compendio de métodos para trabajar con fechas en Javascript. Comparto mi chuleta de métodos para obtener y crear nuevas fechas.
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
Práctica javascript para practicar con las informaciones de un array. Llamamos, substituimos y añadimos elementos. Incluye solución.
Javascript es un lenguaje de programación de lado cliente que ha cambiado Internet tal y como lo conocemos a día de hoy. Junto con el html y el css es uno de los 3 pilares del diseño web. Es un requer...
La consola del navegador es una herramienta imprescindible para cualquier aprendiz de Javascript. ¿Podemos darle un poco más de color y utilidad?
Ejercicio javascript que regula el control de accesos a una página web según edad del visitante. Incluye solución.
No Comments