|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - test matemático- 1 - 2 - 3 - 4 - 5 - 6 - 7
Test Matemáico(VI)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Finalizando la animación.-
Bueno amigos, estamos llegando al final de nuestro juego. Una vez que sabemos mover una capa un número de pixels a la izquierda, sólo nos queda ahora crear un bucle que realice esta operación el número de veces que nos convenga.
Para crear este bucle vamos a usar el método setTimeout, que lo que hace es llamar a una función determinada trás pasar un intervalo de tiempo prefijado. Su sintaxis general es:
setTimeout ("funcion()",tiempo)
donde debemos pasar siempre el nombre de la funcion entre comillas (lo trata como cadena de texto), y tiempo es un número que expresa los milisegundos que deben pasar antes de llamar a la función.
Sabiendo esto, hacer que la capa se mueva una y otra vez es fácil: basta llamar a la función mueve() antes definida cada cierto tiempo, digamos cada 100 milisegundos, por ejemplo. El código nos queda:
<script language="JavaScript"
type="text/javascript">
var
posicion=593;
function
mueve()
{
nueva_posicion=posicion-10;
if(ie)
document.all['siete'].style.left=nueva_posicion;
else
if(nc)
document.layers['siete'].left=nueva_posicion;
else
if(n6)
document.getElementById('siete').style.left=nueva_posicion;
posicion=nueva_posicion;
setTimeout("mueve()",100);
</script>
Y el resultado lo podemos ver en la siguiente ventana.
Muy bonito, pero la imagen se nos sale de la pantalla por la izquierda, por lo que podemos establecer en la función que cuando la capa llegue a la posición de la imagen de la interrogación, se detenga allí. Para ello sólo debemos añadir a nuestra función mueve() un condicionante, de tal forma que cuando se cumpla la condición establecida la capa se detenga. Además, podemos crear también una capa que inicialmente esté oculta, con un mensaje de felicitación, de tal forma que cuando la imagen del 7 llegue se sitúe encima del interrogante, el mensaje se haga visible, dando una alegría al niño.
Y ya puestos, creamos otra capa análoga, invisible inicialmente, que se mostrará en el caso de que se pulse 3 veces seguidas una respuesta incorrecta, presentando en pantalla un aviso de que se ha acabado el juego. El código necesario para nuestra página completa es:
<html>
<head>
<title>test
de números</title>
<style
type="text/css">
#mensaje1
{position:absolute;top:50px;left:5px;font-family:Comic Sans
MS;font-size:14px;color:blue;}
#mensaje2
{position:absolute;top:50px;left:492px;font-family:Comic Sans
MS;font-size:14px;color:#993399;}
#tres
{position:absolute;top:80px;left:30px;}
#mas
{position:absolute;top:95px;left:85px;}
#cuatro
{position:absolute;top:80px;left:110px;}
#igual
{position:absolute;top:95px;left:166px;}
#interrogacion
{position:absolute;top:80px;left:193px;}
#seis
{position:absolute;top:80px;left:500px;}
#siete
{position:absolute;top:80px;left:583px;}
#correcto
{position:absolute;top:200px;left:130px;font-family:Comic Sans
MS;font-size:20px;color:#00cc00;visibility:hidden;}
#incorrecto
{position:absolute;top:200px;left:100px;font-family:Comic Sans
MS;font-size:20px;color:red;visibility:hidden;}
</style>
<script language="JavaScript"
type="text/javascript">
/**
* detectamos el navegador del usuario para amnejar
luego las capas
*/
var nc =
(document.layers) ? true:false
var ie = (document.all) ?
true:false
var n6 = (document.getElementById) ?
true:false
/**
* variables para asignar las posiciones a las
capas
*/
var
posicion=593;
var nueva_posicion;
/**
* funcion que mueve la
capa
*/
function
mueve()
{
nueva_posicion=posicion-10;
if(nueva_posicion==183)
{
if(ie)
document.all['correcto'].style.visibility="visible";
else if(nc)
document.layers['correcto'].visibility="show";
else if(n6)
document.getElementById('correcto').style.visibility="visible";
}
else
{
if(ie)
document.all['siete'].style.left=nueva_posicion;
else if(nc)
document.layers['siete'].left=nueva_posicion;
else if(n6)
document.getElementById('siete').style.left=nueva_posicion;
posicion=nueva_posicion;
setTimeout("mueve()",100);
}
}
var
suma=false;
var contador=0;
/**
* funcion que controla las
respuestas elegidas
*/
function
resultado()
{
contador++;
if(contador==3)
{
if(ie)
document.all['incorrecto'].style.visibility="visible";
else if(nc)
document.layers['incorrecto'].visibility="show";
else if(n6)
document.getElementById('incorrecto').style.visibility="visible";
contador=0;
}
else
{
if
(suma==true)
{
mueve();
contador=0;
}
}
}
</script>
</head>
<body>
<h2 align="center">JUEGO DE
MATEMATICAS</h2>
<div id="mensaje1">¿eres capaz
de sumar estos dos números?</div>
<div
id="tres"><img src="images/3.gif" width="50" height="50" border="0"
alt="3"></div>
<div id="mas"><img
src="images/mas.gif" width="20" height="20" border="0"
alt="mas"></div>
<div id="cuatro"><img
src="images/4.gif" width="50" height="50" border="0"
alt="4"></div>
<div id="igual"><img
src="images/igual.gif" width="20" height="20" border="0" alt="igual
a"></div>
<div id="interrogacion"><img
src="images/interrogacion.gif" width="50" height="50" border="0"
alt="interrogación"></div>
<div
id="mensaje2">elige una de estas dos</div>
<div
id="seis"><a href= "#"onClick="suma=false;resultado();return
false;"><img src="images/6.gif" width="50" height="50" border="0"
alt="seis"></a></div>
<div id="siete"><a
href= "#"onClick="suma=true;resultado();return false;"><img
src="images/7.gif" width="50" height="50" border="0"
alt="siete"></a></div>
<div id="correcto">! MUY
BIEN ¡ HAS ACERTADO. ERES UN CAMPEÓN</div>
<div
id="incorrecto">! LO SIENTO ¡ NO HAS ACERTADO. LA PRÓXINA VEZ
SERa</div>
</body>
</html>
Lo explicamos un poco: aparte del código que ya teníamos, hemos introducido las capas de los mensajes de felicitación y error, y en la función mueve() introducimos al principio el condicionante de que si el atributo left de la capa siete es 183 (que es la coordenada izquierda de la capa que contiene la interrogación), entonces se detiene el movimiento y se muestra en pantalla la capa con el mensaje de felicitación. Si no ocurre esto, continuamos moviendo la capa siete hasta que se cumpla.
Por otra parte, si la respuesta pulsada no es la correcta, vamos aumentando el contador hasta que vale 3, y entonces mostramos la capa con el mensaje de que el juego ha terminado.
Para mostrar una capa que estaba oculta, accedemos a su propiedad visibility, del mismo modo que accedimos antes a la propiedad left, cambiando su visibilidad de oculta ( hidden inicilamente) a visible (visible para Internet Explorer y Nestcape 6x y show para Nestcape 4x).
Y eso es todo. El resultado final lo tenéis en esta ventana.
 |
 |