En este ejemplo vamos a probar el error que cometemos al estimar la posición de un objeto móvil. Inicialmente veremos como se desplaza, pero llegado a un punto (tunel) desaparecerá. Debemos estimar en que momento saldrá del tunel pinchando con el ratón sobre el propio tunel. Para que el móvil comience a moverse deberemos pichar sobre él. Esta prueba la realizan a veces en las revisiones médicas necesarias para la renovación del carnet de conducir.
El movimiento y los efectos se consiguen modificando los estilos de los elementos usados. Por ejemplo, para ocultar el coche en el tunel hacemos uso del estilo z-index, y para el movimiento lo único que hacemos es modificar la posición mediante el estilo left.
Estilos utilizados
.movil { position: absolute; top: 375px; left: 0px; z-index: -1; display: inline; } .tunel { background-color: brown; position: absolute; top: 350px; left: 200px; height: 70px; width: 300px; z-index: 1; }
Código JavaScript
var paso=4; var En_Movimiento=false; var TimerID; function Mueve() { var posicion=parseInt(window.document.getElementById("Movil").style.left); if (!En_Movimiento) { En_Movimiento=true; window.document.getElementById("Movil").style.zIndex=-1; posicion=0; } if ( posicion >= parseInt(window.document.getElementById("Tunel").style.left)) window.document.getElementById("Movil").style.display="none"; if (posicion <=700) { posicion += paso; TimerId=setTimeout("Mueve()",50); window.document.getElementById("Movil").style.left=posicion; } else { window.document.getElementById("Movil").style.display=""; En_Movimiento=false; alert("No lo paraste a tiempo"); window.document.getElementById("Movil").style.left=0; } } function Para() { var Mensaje=""; var Punto=parseInt(window.document.getElementById("Movil").style.left)+parseInt(window.document.getElementById("Movil").style.width); var Fin=parseInt(window.document.getElementById("Tunel").style.left)+parseInt(window.document.getElementById("Tunel").style.width); var distancia=Punto-Fin var Longitud=parseInt(window.document.getElementById("Movil").style.width); if (!En_Movimiento) return; En_Movimiento=false; clearTimeout(TimerId); window.document.getElementById("Movil").style.display=""; window.document.getElementById("Movil").style.zIndex=2; distancia=parseInt(window.document.getElementById("Movil").style.left)+parseInt(window.document.getElementById("Movil").style.width)-(parseInt(window.document.getElementById("Tunel").style.left)+parseInt(window.document.getElementById("Tunel").style.width)) if (distancia>=0 && distancia<Longitud) Mensaje="Perfecto, has acertado el momento en que salia el vehículo" else if (distancia<0) Mensaje="Te han faltado " + distancia + " puntos."; else Mensaje="Te has pasado en " + (distancia-Longitud) + " puntos."; window.document.getElementById("Resultado").innerHTML="Resultado<br>" + Mensaje; }
Código HTML
<div class="tunel" id="Tunel" onclick="Para();" style="left: 200; width:300; "></div> <img alt="coche" src="coche.gif" id="Movil" width="50" height="23" class="movil" style="left: 0; width: 50; display:'';" onclick="Mueve();"/> <div class="resultado" id="Resultado" style="position: absolute; top:450; left:300; width:200;"></div>