Ejemplo del Dado

Como de costumbre, vamos por partes. Necesitamos antes que nada, crear la forma que contenga un INPUT tipo TEXT y un botón para tirar el dado:


<FORM>

<INPUT type="text" name="dado" size="2">
&nbsp;&nbsp;&nbsp;
<INPUT type="button" value="Tirar el dado" onclick="tirardado();">

</FORM>

Luego tenemos que pensar en generar un número aleatorio. Para ello, utilizamos al objeto Math. El objeto Math tiene varias propiedades y métodos. Los métodos principales son: Math.abs(n); (Valor absoluto), Math.ceil(n) (Redondear "hacia arriba"), Math.floor (Redondear "hacia abajo"), Math.max(a,b) (regresa el mayor de los 2 nums), Math.min(a,b) (regresa el menor), Math.random() (regresa un número aleatorio), etc.
Para los curiosos, también hay acos, asin, atan, atan2, cos, exp, log, pow, round, sin, sqrt, tan.
Ya tenemos la función que genera números aleatorios. Vamos a probarla:

alert(Math.random());

Se puede ver que despliega un número aleatorio entre 0 y 1 con un aproximado de 16 decimales. Nosotros no necesitamos tantos. Supongamos que queremos un número aleatorio entre 0 y 999. Podemos multiplicar el número obtenido con anterioridad por 1000. De la siguiente manera:

alert(1000*(Math.random()));

Muy bien, ahora queremos limitar el número de 1 a 6. Para ello, usamos el operador matemático "%" (mod). Esto es el residuo obtenido tras hacer una división. Por ejemplo: 17 % 5 = 2 (17 ÷ 5 = 3 y sobran 2); o 14 % 7 = 0.
Esto nos es muy útil para obtener valores entre 1 y 6. Si utilizamos: N % 6, obtendremos un valor entre 0 y 5 cada vez.

alert((1000*(Math.random()))%6);

Sin embargo, aquí hay algo que no nos conviene: el residuo sigue teniendo decimales. Para ello, utilizamos el método floor() de Math:

alert(Math.floor(1000*(Math.random()))%6);

Ahora si ya tenemos un valor entre 0 y 5 .. necesitamos sumarle uno para que sea el valor posible de un dado:

alert((Math.floor(1000*(Math.random()))%6)+1);

Ahora si ya tenemos nuestro generador "diseñado"; falta hacer una función con el.


<SCRIPT Language="JavaScript">



function numero(){

return (Math.floor(1000*(Math.random()))%6)+1;

}



</SCRIPT>

Luego podemos incluir en nuestro bloque de SCRIPT, la función que escribe al "text box":


...

function tirardado(){

document.forms[0].dado.value=numero();

}

...

El ejemplo final es este:

La siguiente lección es el manejo de "strings".

Regresar

El link de esta lección es: http://flores-morones.net/geo/roflo1/HTML/JavaScript/dado.html (Se abre en toda la ventana).

<A href=../izq.html>Índice</A>