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:
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.
¿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 apercibirnos cuando seguimos una receta de cocina. Y si...
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...
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...
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
Práctica javascript para practicar con las informaciones de un array. Llamamos, substituimos y añadimos elementos. Incluye solución.
No Comments