Estimación de la posición de un móvil

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>