Programación en Javascript:

En este tutorial vamos a ver un poco como funciona el lenguaje de programación Javascript, para ello introduciremos los siguientes conceptos:

• Llamar a una función de Javascript desde un botón de la web.

• Creación de números aleatorios.

• Uso de Arrays en Javascript.

• Sustitución de código HTML con Javascript.

¿Qué pretendemos conseguir?:

Bien, lo primero que se debe hacer cuando programamos algo es saber exactamente qué queremos conseguir.

En el caso del ejemplo lo que se pretende es crear una página web que genere una serie de resultados aleatorios y los muestre por pantalla.

Exactamente lo que queremos hacer es crear una página automatizada que haga los pasos que propone Ricard Ibáñez en su Generador de aventuras en los mundos de Cthulhu.

Para ello vemos que habrá 10 pasos (10 tablas), cada una de ellas con varias opciones las cuales se deben elegir con la tirada de un dado de 6 o 10 caras.

El proceso automático que podemos hacer es generar las tiradas mediante código Javascript, con lo cual ahorramos las tiradas de dados.

Después hemps de mostrar el resultado que habríamos obtenido, esos se puede hacer de muchas maneras, pero nosotros usaremos arrays, donde guardaremos los posibles resultados de cada una de las tablas.

Los arreglos (arrays) tienen una posición entre 6 o 10 posibles, según la tabla que sea, por lo que el número aleatorio lo usaremos para elegir una opción del array.

Después solo quedará mostrar el texto seleccionado al azar en la posición de la página web que haga falta.

Así que el resultado final será tener una página web que muestre por pantalla resultados aleatorios de cada una de las 10 tablas propuestas por Ricard Ibáñez.

Llamar a una función de Javascript desde un botón:

En nuestra web de ejemplo pondremos un botón, eso lo hacemos con código HTML, y dentro de la etiqueta button:

<button type="button" onclick="generar()">¡Generar!</button>

Con este código le decimos a la página web que cuando se presione el botón "onclick" se llame a la función "generar", la cual estará dentro de una etiqueta especial llamada "SCRIPT" que es donde tendremos todo el código Javascript y que veremos después.

El texto "¡Generar!" es lo que se puede leer en el botón que hemos creado.

Creación de números aleatorios:

Para crear números aleatorios usaremos una función, ya que hemos de generar 10 veces números aleatorios, por lo que vale la pena estructurar el código de forma independiente. La función se llamará "aleatorio(n)" y recibirá un parámetro n, el cual es el número máximo que esperamos obtener menos uno.

De esta manera la llamada a la función "aleatorio(6)" devolverá un número aleatorio entre 0 y 5.

function aleatorio(n){
    var resultado = Math.floor(Math.random()*n);
    return resultado;
}

¿Por qué entre 0 y 5? Pues porque las posiciones de los arrays comienzan en 0, por lo que si tenermos un array con 6 opciones las opciones serán 0,1,2,3,4 o 5.

Si por ejempo tuviesemos que mostrar el resultado de una tirada de un dado de 6 caras, es decir, un valor entre 1 y 6, deberíamos sumar 1 al resultado antes de devolver el valor de la función con return.

Uso de Arrays en Javascript:

Cada una de las 10 tablas de las que hemos de elegir un resultado tiene 6 o 10 frases (cadenas de texto o strings), que almacenar, de entre los cuales se mostrará uno.

Para almacenar las frases crearemos un array para cada tabla, pongamos la tabla1 de ejemplo:

var tabla1 = ["Una ciudad de Europa","Estados Unidos: Costa del Pacífico","Zona inexplorada de África","Estados Unidos: Central"," Selva de América latina","Estados Unidos: Arkham","Una exótica ciudad de Asia","Estados Unidos: Providence","Bosques de Canadá", "Estados Unidos: En una de las 13 colonias originales"];

Así si obtenemos un 0 en la tirada aleatoria generada por la función aleatorio, usaremos el índice 0 de la tabla, tabla1[0], que sería igual a escribir "Una ciudad de Europa" y tabla[9] sería como escribir "Estados Unidos: En una de las 13 colonias originales".

Habrá tablas de 6 posiciones y tablas de 10 posiciones en el ejemplo, hay que tener cuidado de no poner un número superior a los valores que tiene un array como índice porque entonces provocaremos un error, por ejemplo tabla[10] provocará un error porque solo tiene valores de 0 a 9.

Sustitución de código HTML con Javascript:

Por último cuando ya tenemos el texto que queremos mostrar al usuario en cada posición hay que escribirlo en la página web, para eso hemos de tener reservado un sitio en ella.

Nosotros guardaremos sitio para cada una de las 10 frases obtenidas con un código similar a este:

<p>La aventura tendrá lugar en... <span id="resultado1"></span></p>

Donde id="resultado1" indica una variable que podemos llamar desde Javascript.

De hecho lo que haremos será indicar por código que lo que hay entre las etiquetas span sea nuestra frase obtenida del array tabla correspondiente:

var a = aleatorio(10);  
document.getElementById("resultado1").innerHTML = tabla1[a];

El código anterior llama a la función aleatorio que devolverá un valor entre 0 y 9 y lo guardará en la variable a.

Después indica que el texto que haya entre las etiquetas span con id resultado1 sea el valor tabla1[a].

document.getElementById("resultado1").innerHTML ="Hola mundo"

De hecho el código anterior escribiría Hola mundo entre las etiquetas span con id resultado1.

Código Javascript:

El código Javascript se escribe dentro de etiquetas script:

<script>
    function generar() {
        //tablas:
        var tabla1 = ["Una ciudad de Europa","Estados Unidos: Costa del Pacífico","Zona inexplorada de África","Estados Unidos: Central"," Selva de América latina","Estados Unidos: Arkham","Una exótica ciudad de Asia","Estados Unidos: Providence","Bosques de Canadá", "Estados Unidos: En una de las 13 colonias originales"];
        var tabla2 = ["Una petición de ayuda por parte de un amigo o familiar","Son contratados por un millonario excéntrico","Una noticia en el periódico les llama la atención","Presencian un suceso macabro y/o inexplicable","Un amigo (o personaje influyente) les pide un favor","Encuentran una referencia en un antiguo libro que les pone sobre la pista"];
        var tabla3 = ["Profesor de Universidad","Mafioso","Delincuente de poca monta","Policía","Ocultista","El enemigo de su enemigo"];
        var tabla4 = ["Un nativo del lugar","Un camarero","Un mendigo","Un profesor de universidad","Un anticuario","Un médico","Un policía","Un anticuario","Un periodista","Un funcionario"];
        var tabla5 = ["Delincuentes del crimen organizado","Sectarios","Profundos","Gules","Hombres serpiente","Muertos vivientes"];
        var tabla6 = ["Mi-Gos","Byakhees","Perros de Tíndalos","Semilla estelar de Cthulhu","Shantaks","Shoggoth","Ángeles descarnados de la noche","Gran Raza de Yith","Vagabundos dimensionales","Vampiros de fuego"];
        var tabla7 = ["Un hechicero humano","Cthulhu","Nyarlathotep","Yog-Sothoth","Un fantasma o maldición","Yig"];
        var tabla8 = ["Una biblioteca","El registro civil","La taberna local","El hospital (y/o la Morgue)","El domicilio de una víctima, o sospechoso","La comisaría de policía","La redacción del periódico","Un lugar supuestamente maldito","El manicomio","Un casino ilegal y/o burdel"];
        var tabla9 = ["Un grimorio", "Una daga con sed de sangre","Un símbolo arcano","El Signo amarillo","Un Trapezoedro Resplandeciente","Un elixir con propiedades asombrosas"];
        var tabla10 = ["Un aliado traiciona a los PJ","Una fiera salvaje (o grupo de ellas) ataca al grupo","Los naturales de la zona se muestran hostiles hacia los PJ","Intentan envenenar a uno o varios de los PJ","La información que les han dado a los PJ era falsa","Los PJ se ven envueltos en un altercado callejero","Una pieza del equipo es de mala calidad y se rompe","Un ladrón roba a los PJ un objeto importante","Posibilidad de accidente (en un principio no mortal)","La policía intenta detener a los PJ por un delito que no han cometido (o si)"];
        //tiradas:
        var a = aleatorio(10);  
        document.getElementById("resultado1").innerHTML = tabla1[a];
        var a = aleatorio(6);
        document.getElementById("resultado2").innerHTML = tabla2[a];
        var a = aleatorio(6);
        document.getElementById("resultado3").innerHTML = tabla3[a];
        var a = aleatorio(10);
        document.getElementById("resultado4").innerHTML = tabla4[a];
        var a = aleatorio(6);
        document.getElementById("resultado5").innerHTML = tabla5[a];
        var a = aleatorio(10);
        document.getElementById("resultado6").innerHTML = tabla6[a];
        var a = aleatorio(6);
        document.getElementById("resultado7").innerHTML = tabla7[a];
        var a = aleatorio(10);
        document.getElementById("resultado8").innerHTML = tabla8[a];
        var a = aleatorio(6);
        document.getElementById("resultado9").innerHTML = tabla9[a];
        var a = aleatorio(10);
        document.getElementById("resultado10").innerHTML = tabla10[a];    
    }
    //devuelve un número entre 0 y n:
    function aleatorio(n){
        var resultado = Math.floor(Math.random()*n);
        return resultado;
    }
</script>

Código y página final:

Podéis ver el código funcionando en la página generador de partidas de Cthulhu.