Creando con JavaScript

Para hacerlo lo mas sencillo posible y no solo los implicados, cualquier persona que se pase pueda tanto colaborar, como seguir esta sencilla guiá me dispongo a crear unas cuantas paginas HTML en las que me apoyare en javascript pero muy, muy, sencillo, veamos que vamos a necesitar.

Herramientas:

Bloc de Notas o editor de texto al gusto.
Navegador web con javascript activado.

Ya esta, no hace falta nada mas….creo que antes de abordar un lenguaje de programacion en video juegos se deben tener claras unas cuantas cosas para no sucumbir en el intento.

Para los gráficos como en un principio van a ser muy básicos utilizaremos los Ascii-Art, si todavía no tenéis claro que son pongo unos enlaces:

_______________$$$$$_____________
___$$$$_______$$$___$$$$$________
__$$$$$$_____$$$___$$$$$$$_______
_$$$_$$$$___$$$__$$$$____$_______
_$____$$$$_$$$$_$$$______________
________$$$$$$$$$$___$$$$$_______
_____$$$$$$$$$$$$_$$$$_$$$$$_____
____$$$$$$$$$$$$$$$$$_____$$$____
___$$$__$$$$$$$$$$$$________$____
__$$___$$$$$$$$$$$$$$$$$_________
_$$___$$$$_$$$_$$$__$$$$$________
_$___$$$$___$$__$$$$___$$$_______
_____$$$_____$$___$$$____$$______
_____$$______$$$___$$$____$______
_____$$_______$$____$$$__________
_____$________$$$____$$__________
______________$$$____$___________
______________$$$________________
______________$$$________________
______________$$$________________
______________$$$________________
_____________$$$_________________
____________$$$$_________________
__________$$$$$__________________
_______$$$$$$

http://arteascii.yaia.com/comocrear.html

http://elrinconcito.net/Dibujos-ascii/index.php?pageNum_Lista=0

http://www.chris.com/ascii/

y muchos mas que encontrareis por la red, la idea es crear un juego conversacional a lo retro muy sencillo que luego complicaremos a medida que introduzcamos mas elementos.

Decir antes de nada que javasrcipt se parece a Java como un huevo a una castaña, pero nos abre la posibilidad de programar a un nivel muy básico para luego complicarlo pero sin morir en el intento, pero antes de todo que quede claro que un servidor no es programador, soy usuario de interfaces.

Cuando controléis estos sencillos scripts, luego podéis pensar en otras cuestiones como HTML5, PHP, incluso otros, pero ese no es el cometido de esta guia.

Como se colocara el código en el foro…?

Pues utilizando el botón # del editor de texto del foro, un ejemplo:

Código: [Seleccionar]
<html>

<head>Empezando a programar muy facil</head>
<br>
<body>
<pre>
_______________$$$$$_____________     UN EJEMPLO DE INTRO....
___$$$$_______$$$___$$$$$________     
__$$$$$$_____$$$___$$$$$$$_______     PARA CREAR UNA PRIMERA PAGINA QUE SOLO CONTIENE TEXTO
_$$$_$$$$___$$$__$$$$____$_______     Y UNA IMAGEN ASCII-ART.
_$____$$$$_$$$$_$$$______________     
________$$$$$$$$$$___$$$$$_______     PODEIS COPIAR Y PEGAR ESTE TEXTO EN UN BLOC DE NOTAS
_____$$$$$$$$$$$$_$$$$_$$$$$_____     LUEGO GUARDARLO COMO intro.html
____$$$$$$$$$$$$$$$$$_____$$$____
___$$$__$$$$$$$$$$$$________$____     PARA VER EL RESULTADO ABRIR EL ARCHIVO CON EL NAVEGADOR
__$$___$$$$$$$$$$$$$$$$$_________     Y OS DEBE MOSTRAR LA IMAGEN CON EL TEXTO DE LA INTRO.
_$$___$$$$_$$$_$$$__$$$$$________
_$___$$$$___$$__$$$$___$$$_______
_____$$$_____$$___$$$____$$______
_____$$______$$$___$$$____$______
_____$$_______$$____$$$__________
_____$________$$$____$$__________
______________$$$____$___________
______________$$$________________
______________$$$________________
______________$$$________________
______________$$$________________     PARA LA SECCIÓN DE VIDEO-JUEGOS DESARROLLADO EN
_____________$$$_________________     imprimiryjugar.com
____________$$$$_________________
__________$$$$$__________________                                          POR YUYU @ 2013
_______$$$$$$ 
</pre>
</body>
</html>

Oye pues parece fácil, como empiezo…?

Ya has empezado… copia el código, pegarlo en una bloc de notas y guardalo en vuestro ordenador como Intro.html os animo a que modifiquéis el código para incluir un acsii-art diferente y un prologo de cualquier cosa que se os ocurra, pegarlo en el foro como antes se comento, así todos podemos ver fácilmente como  cada uno avanza y si os parece bien la idea continuamos….

<>

Bueno por lo menos parece sencillo…

Sobre Ascii-Art hay ciertos programas que nos crean Ascii’s de imagenes jpg,bmp etc.. son muy faciles de usar y hay un montón por la red.

Sobre Html mas de lo mismo, realmente lo que hemos realizado hasta ahora es solo html, pero con eso y ganas ya seria suficiente para ir creando una aventura al estilo “Elige tu propia Aventura” introduciendo como lo hizo Entofol una referencia a otra dirección.

Es mas seguro que mas de uno se estará preguntando ¿como funcionara eso cuando se suba a un servidor?, pues, para muestra un botón y nunca mejor dicho sin salirme de html he incluido un botón que nos enlaza a otra pagina, por lo que con un poco de imaginación crear una aventura es cuestión de ponerse a ello.

Advertencia.- Subí nuestras html a un servidor gratuito, por ese motivo aparece unos baners que en ningún caso puedo controlar ya que los coloca el servidor, ese es el precio a pagar cuando se usan este tipo de servicios, no todos son así pero hay que tenerlo en cuenta por si creáis algo para menores de edad.

Enlace.- http://galeon.com/juegomesa/Intro.html

En esta pagina incluí un botón, debo decir que no es la única manera, como en todo siempre hay diferentes maneras de llegar al mismo punto.

Código: [Seleccionar]
<html>
<head>
<title>Ejemplo de Intro</title>
</head>
<BODY>
<body bgcolor="#000000">
<PRE><B><FONT COLOR="#FFFFFF">
<FONT SIZE=2>
<P align="left">                        _____
                    . . . . .      _.-""     ""-._              _                                                   
                    !-!-!-!-!    .'               '.           | |    __ _    ___ __ _ ___  __ _    __ _ _   _  ___
                    !_!_!_!_!  .'                   '.         | |   / _` |  / __/ _` / __|/ _` |  / _` | | | |/ _ \
                    |_=-   =| /   .-..                \        | |__| (_| | | (_| (_| \__ \ (_| | | (_| | |_| |  __/
                  ,/`,/'_`\,`\,  [____|_]  /.-. .-,_\   ;      |_____\__,_|  \___\__,_|___/\__,_|  \__, |\__,_|\___|
                ,/',/'/_|_\`\,`\,|=   |=|      \(       ;                                             |_|           
              ,/' |/ ||"""|| \| `\, = | |       `       |
              |   #| ||___|| | #  |=  | |               |       ____                                 _          
            ,/' #  | [_____] |   #`\, |=|               ;      / ___| _   _ ___ _   _ _ __ _ __ __ _| |__   __ _ 
          ,/',-----'      =  '-----,`\--'---,/\,--,    /       \___ \| | | / __| | | | '__| '__/ _` | '_ \ / _` |
         `""|   .;;;,=      ,;;;,   |#  # ,//  \\,'\, /         ___) | |_| \__ \ |_| | |  | | | (_| | |_) | (_| |
            | =//___\\ =   //___\\ =| # ,//',;;,'\\,#\,        |____/ \__,_|___/\__,_|_|  |_|  \__,_|_.__/ \__,_|
            |  ||-. ||     ||   ||  |#,//' //||\\ '\\,`\,
            |  ||..\||     ||   ||  |-|/| ||_||_|| |\|_ _|
            |  ||   ||   = ||   ||  |=  | |.----.|=|___]
            |= ||___|| =   ||___|| =|  =| ||    || | ||
            | [_______]   [_______] |--.| ||____|| | ||
            ;_______=______=_____ __;   |[________]| ||          PARA LA SECCIÓN DE CREANDO VIDEOJUEGOS EN
          ,/'#    #   #      #       #  '----------''\|                      imprimiryjugar.com  
        ,/'    #        #       #         #     #   # '\,
      ,/'___#____#__#_____#___#_______#_______#____#___#'\,                                   Por Yuyu @ 2013
      `""[____________________________________________]|""`
         _[_|   .-----.  =-       ___________    ||_]_||          En esta ocasión solo he incluido un botón.
        |  _| .",-"|"-,',   () = |.--..-..--.| = |_  |||
        |_/ |/ /_\_|_/_\ \ /__\  ||__||_||__||   | \_|\\          El codigo es muy facil y podemos insertar el botón 
        (_) || .-------. | |  |  |.--..-..--.|  =| (_) ||         en la pagina de diferentes maneras, pero solo utilizo 
        / \ || |       | | |()|  ||__||_||__||   | / \ ||         la mas facil:
        \_/ || '-------' |  )(   |___________|   | \_/ ||         
        (_) ||.---------.|  \/   |.---------.|=  | (_) ||          Dentro del Body incluyo un form para incluir el botón
        / \ |||   ___   ||    =  ||         ||   | / \ ||          de la siguiente manera...
        \_/ |||  {___}  ||       ||         ||   | \_/ ||
        (_) |||  ((_))  || -=   =||_________|| = |_(_)_//          "< "input type=button value="Nombre del botón"
        / \ |||   '-'   ||   _ .-'-----------'-. | / \__\          onClick="self.location='http://www.imprimiryjugar.com'">
        \_/_|||       ()||  [_]"""""""""""""""""[_]\_/\\\\
       [ __ ]||         || =| |==.==.==.==.==.==| |__]|||||        Con la inclusión de un botón ya podriamos ir
       j|  ||||         ||  | |  |  |  |  |  |  | |  |====|        creando enlaces a otras pagina para ir desarrollando
       g|__|||;).       ||--|_|=='=='=='=='=='==|_|  ||||||        una aventura simple pero funcional, unas imagenes
      _s____/`---`\ ____||_.____._____._____.____.|__|////         Ascii-Art pueden cumplimentar al texto para generar
     |     |  @.@  |=====' |    |    /  \    \   |    |-'          un proyecto muy basico.
     '------\ www /---'----'----'---'----'---'---'----'
             `---'
</FONT></FONT></B></PRE><br>
</P>
<FONT SIZE=2><FONT COLOR="#ffffff">
</table>
<input type=button 
value="Ir al foro"
onClick="self.location='http://galeon.com/juegomesa/entofol.html'">
</center>
</BODY>
</html>

Pero y lo de Javascript que pasa?

Para el próximo HTML incluiré un sencillo javascript que nos genera un número aleatorio, y explicaremos un poco mas de archivos que nos pueden servir de apoyo a nuestro Html.

<>

Bien, si tuviéramos que escribir un código muy largo en un HTML, descubriríamos que si tenemos que cambiar algo puede llegar a ser un verdadero hueso.

Con javascript podemos crear archivos de apoyo a nuestro HTML, de forma que no tengamos que editar el mismo, haciendo pequeños módulos que podemos cargar desde el HTML.

Estos archivos deben tener una ruta, yo de momento los dejo en el mismo directorio donde se encuentre el HTML, pero lo suyo es tener organizado los Scripts en una carpeta, las imágenes en otra etc. lo que obliga a dar una ruta a este tipo de archivos.

De nuevo y por hacerlo fácil mas de un entendido puede pensar que el código escrito es una verdadera chapuza, pero todo sea por hacerlo mas fácil a los que no entendemos.

Manos a la obra, para esta ocasión una de números aleatorios:

HTML Números aleatorios

Código: [Seleccionar]
<html>
<head>
<script language="JavaScript" src="prueba.js">
</script>
<title>Ejemplo de Número Aleatorio</title>
</head>
<body>
<input type="button" value = "Iniciar script" onclick="clickMe()";>
</body>
</html>

Sin comentarios, mas fácil casi imposible, observar que incluí un botón que cuando es pulsado va a llamar a una función llamada clickMe y que en la <HEAD> del HTML cargo el archivo prueba.js

Ahora el archivo de apoyo prueba.js

Código: [Seleccionar]
function clickMe()
{
document.close();
var aleatorio = Math.floor(Math.random() * 99) + 1;
document.write("El resultado fue: " + aleatorio + "<br>");
document.write("<INPUT TYPE='button' VALUE='Hazme Clic' onClick='clickMe();'>");
}

¿Porqué cierro el documento, con document.close()?
Probarlo vosotros mismos, se estaría repitiendo sin fin tantas veces como pulsáramos el botón.

¿Qué hace var aleatorio = Math.floor(Math.random() * 99) + 1;?
Lo primero es crear una variable al vuelo var aleatorio, que va a contener la operación matemática que genera un número aleatorio. Nuestra primera variable…

Ahora escribo el resultado con: document.write(“El resultado fue: ” + aleatorio + “<br>”);

Después de var aleatorio = se genera un número aleatorio entre 1 y 100, aclarar que lo que realmente hace es generarlo entre 0 y 99, por lo que si quiero que sea del 1 al 100 le sumo un +1 al final.

La pescadilla que se muerde la cola…

Si no introduzco un botón desde el archivo JSP el programa quedaría muerto y solo generaría un único número, pero como antes comente, sino borrara el documento, cada vez que pulsara se repetiría tantas veces como pulsaciones diéramos al botón, probar a poner //document.close()   y veréis lo que sucede.

Por tanto hay que colocar un boton desde el script y por eso la sentencia:
document.write(“<INPUT TYPE=’button’ VALUE=’Hazme Clic’ onClick=’clickMe();’>”);

Toda función en javascript va a ir incluida entre llaves {} se abren al inicio y se cierran al final del código escrito en la función. Esto también es valido para otros lenguajes de programación.

Y ya está, probar hacerle perrerías y estrujar mas el código que aunque son cuatro lineas tiene mas chicha de la que parece, acordaros que de momento, ambos archivos (dados.html y prueba.js) deben estar en el mismo directorio.

Para los que todavía seguimos con HTML sencillos tenemos otro lanzador, se puede llegar al mismo punto de diferentes maneras, en esta ocasión todo el código está en el HTML.

Archivo LanzaDados.html

Código: [Seleccionar]
<HTML>
<HEAD>
<title>Lanzador de Dados</title> 
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
var dado = 6;
var dados = 1;
function tira_dados(dado, dados) {
var lanza = 0;
for (loop=0; loop < dados; loop++) {
// Crea un numero aleatorio del tipo de dado y la cantidad que usemos
lanza = lanza + Math.round(Math.random() * dado) % dado + 1;
}
document.form.text.value = lanza;
}
// Fin -->
</script>

<!-- PASO DOS: Esto es lo que irá en el cuerpo (BODY)  -->

<BODY>
<center>
<pre>
 __      __    _  _  ____    __    ____  _____  ____    ____  ____    ____    __    ____  _____  ___ 
(  )    /__\  ( \( )(_   )  /__\  (  _ \(  _  )(  _ \  (  _ \( ___)  (  _ \  /__\  (  _ \(  _  )/ __)
 )(__  /(__)\  )  (  / /_  /(__)\  )(_) ))(_)(  )   /   )(_) ))__)    )(_) )/(__)\  )(_) ))(_)( \__ \
(____)(__)(__)(_)\_)(____)(__)(__)(____/(_____)(_)\_)  (____/(____)  (____/(__)(__)(____/(_____)(___/

</pre>
<form name=form>
<table border=2 cellpadding=5>
<tr>
<td colspan=2 align=middle>¿Tipo de Dados?</td>
<td colspan=2 align=middle>¿Cuantos dados se van a lanzar?</td>
</tr>
<tr>
<td valign=top align=middle>
<p><input type=radio name=sides onclick="dado = 3">3 Caras
<p><input type=radio name=sides onclick="dado = 4">4 Caras 
<p><input type=radio name=sides onclick="dado = 5">5 Caras
<p><input type=radio checked name=sides onclick="dado = 6">6 Caras
<p><input type=radio name=sides onclick="dado = 8">8 Caras
</td>
<td valign=top align=middle>
<p><input type=radio name=sides onclick="dado = 10">10 Caras
<p><input type=radio name=sides onclick="dado = 12">12 Caras
<p><input type=radio name=sides onclick="dado = 20">20 Caras
<p><input type=radio name=sides onclick="dado = 30">30 Caras
<p><input type=radio name=sides onclick="dado = 100">100 Caras
</td>
<td valign=top align=middle>
<p><input type=radio checked name=number onclick="dados = 1">1 
<p><input type=radio name=number onclick="dados = 2">2
<p><input type=radio name=number onclick="dados = 3">3
<p><input type=radio name=number onclick="dados = 4">4
<p><input type=radio name=number onclick="dados = 5">5
</td>
<td valign=top align=middle>
<p><input type=radio name=number onclick="dados = 6">6
<p><input type=radio name=number onclick="dados = 7">7
<p><input type=radio name=number onclick="dados = 8">8
<p><input type=radio name=number onclick="dados = 9">9
<p><input type=radio name=number onclick="dados = 10">10
</td>
</tr>
<tr>
<td align=middle colspan=4>
<input type=button value="Lanzar" name=button onclick="tira_dados(dado, dados)">
<input type=text size=10 name=text>
</td>
</tr>
</table>
</form>
<table border=1 bordercolor="white" bgcolor="black">
<td align="left"><font color="white" size=1>
<pre>
````````````````````````_iTFTFYIcAKAYi_````````````````````````
````````````````````_ii__________iiFIXRBI_`````````````````````
```````````````````_i__````````____iTYXRHX_````````````````````
`````````````````_Ti__``````````____iTIKHhhY_``````````````````
````````````````_iT__``````____ii_iiTYAKBHHHF``````````````````
````````````````_TTi_````__ii___iFTFIIXERHHHI_`````````````````
````````````````_TYTi_____iiiYIcIIAXKKERBBBBi``````````````````
`````````````````iIFTi___iTFYYcAAXKKKRBBBBRA_``````````````````
``````````````````_YIYYYIcAAXXXRBBHHhHHBRET_```````````````````
````````````````````_cREKAcIccXRBHHhhHHBT``````````````````````
``````````````````````TXXXXXKXKERHBHHRc_```````````````````````
```````````````````````_FFTFFFFYIXKKEc_````````````````````````
```````````````````````______i_iFTiTIA_````````````````````````
```````````````````````iT_``____TTiicK_````````````````````````
`````````````````````_i_iTIF_`____cAcYTi_``````````````````````
```````````__iiTTFcYYF__TIYAXIFAKKKEEF_iXEcXRATiTFFT_``````````
`````````_iiiiiiTYAXBA_iiTAAccXEEXRKEAFicHhHY____TFYIF_````````
```````____`__iFIIcXEKF____iYFi_icITTiYXBBRF_________FcF```````
``````___````__FcXAXRRHBAT____``___iiYBHRBXi````______FcT``````
``````_i_``___iYAAAKRRHHHRc_i______FXBHHERXi````__iii_YXF``````
``````TYFTi_iTYAXXKBHHhNNdddBIYTFTRhHHHHHHBF_____iiFIAEEA_`````
``````FcIFTiiFIAXKBNdNBXAAIcKEKKKhddNNNNNhNAii___iiFAERRX_`````
``````TIYi________TAcFYFFTTii___`````_iTYKF__________FXKI``````
``````_Ti________iiiIRRAAcIYFFFii_____________`__ii_iYAAi``````
``````iT__``________icREAcAccIIYFiii__________``_iTTFcAAY``````
``````TF___ii_______iiFXBHREKXAIIYYFTTii______ii__iTFYXKT``````
``````_FTiiiiTTFFFYIccAXKEBHHBRXXcccIIYYYYFFFFFFFFFTFYAI```````
``````_TiiiiTTFYIIcAXXXXERBhNNhBEKKXXAIIIIIIYFFFFFTTTFIF```````
```````_iTYIIcAXKERRRRBHhNddqqqdNhhHHHBRRKXXAAccIIIIIcc_```````
```````_TAEBBHhhhhhhhhNNNNhhHHhddqqdddddddNhhHHHHHHHHBI````````
````````_TIEHNNNNhhNhHHHHHRRRBHhNNNNHhNdddNdNNNNNNHXYF_````````
````````````````TBRXIIIIcAERRREHHHEXKRHHHhHRXAT_```````````````
````````````````TBXTiTFFIXEEEKKRREAAXKRHHhBXYi_````````````````
`````````````````__``__TIAAAcIIFFFYYIAKKAYT_```````````````````
``````````````````````_iTFFTiiFFi________``````````````````````
```````````````````````_______T__`_`_``````````````````````````
```````````````````````````````````````````````````````````````
```````````````````````````````````````````````````````````````
</pre>
</td>
<td align="left"><font color="white" size=3>
La forma de generar un número aleatorio puede variar según el programador no es la mas dogmática pero es la forma mas sencilla.<br><br>
<hr style="color: #0056b2;" />
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
<br>
var dado = 6;<br>
var dados = 1;<br>
function tira_dados(dado, dados) {<br>
var lanza = 0;<br>
for (loop=0; loop &lt; dados; loop++) {<br>
// Crea un numero aleatorio del tipo de dado y la cantidad que usemos<br>
lanza = lanza + Math.round(Math.random() * dado) % dado + 1;<br>
}<br>
document.form.text.value = lanza;<br>
}<br>
&lt;/SCRIPT&gt;<br><br>
<hr style="color: #0056b2;" />
Por defecto el programa se inicia con 1D6, pero podemos indicar al programa que empiece por otra cantidad de Caras y otra cantidad de Dados modificando "checked" y escribirlo en otra linea, tanto para el número de Caras como para la Cantidad de dados iniciales.<br><br>
&lt;input type=radio checked name=sides onclick="dado = 6"&gt;6 Caras
</td>
</table>
</center>
<p><center>
<font face="arial, helvetica" size="-2">imprimiryjugar.com<br>
by <a href="http://www.imprimiryjugar.com/index.php?action=post;topic=559.0">Yuyu C.C. 2013 Creando videojuegos </a></font>
<p>
</center>
</BODY>
</HTML>

No aconsejaría pasar al ejemplo del inicio si antes no queda claro como funciona este HTML, pero cada uno sabe hasta donde puede llegar y como quiere hacerlo.

Con lo aquí expuesto hay material para ir haciendo pruebas mas que suficientes, para ir cogiendo el hilo a esto de programar “fácil”.

Si os sigue interesando continuamos… y sino con lo expuesto tenéis mas que suficiente para crear un juego del estilo “Elige tu propia Aventura”, intentare hacer uno muy fácil con los conocimientos que hemos adquirido.

<>

Es evidente que para archivos de ejemplos concretos es mejor incluir todo en una sola pagina, pero para proyectos grandes sera necesario recurrir a archivos complementarios, sin ser esto obligatorio.

Veamos como resuelven en una sola pagina con javascript un lanzador de dados los de Wizars D&D.
enlace.- http://www.wizards.com/dnd/dice/dice.htm

La cuestión a la que yo me quería referir era mas bien la reutilización de código, me explico:

He creado una serie de Html’s

Alea.js   script que genera 6D aleatorios Heroquest.
Inicio     Html que carga unas frames con los enlaces correspondientes a pagina1, 2, 3.
page1   Html que lanza una llamada a Alea.js
page2   Html un selector (sin terminar de implementar, solo del 1 al 3)
page3   Html que lanza una llamada a Alea.js

lógicamente todos los archivos incluidos en una única carpeta.

Las ventajas son varias, el código por pagina es mas sencillo, se puede reutilizar ya que si creamos una “pagina3.html” tan solo debemos incluir la llamada a la función y hace mas fácil su mantenimiento, supongamos que debemos cambiar el dado y poner otro de 12 caras por ejemplo, tan solo seria necesario cambiar el random del archivo Alea.js.

de esta forma, con recurrir a las correspondientes llamadas obtengo un numero aleatorio (o números) con el resultado de una tirada de 6D de Heroquest.

Así puedo disponer de varios lanzadores sin tener que escribir mas código.

Alea.js

Código: [Seleccionar]
/*Esta Funcion cada vez que es llamada devulve el resultado de 
seis dados de Heroquest, para lograr esto con solo un "Dado" incluimos el 
codigo en un bucle FOR que repite la operacion xx cantidad de veces, las 
variables Calaberas,Escudos y CNegras acumulan el resultado para luego 
presentar en pantalla el resultado obtenido.*/
//
			function clickMe()
			{
			Calaberas = 0;
			Escudos = 0;
			CNegra = 0;
			Cadena = 0;
for (i=0; i<6; i=i+1){
			aleatorio = Math.floor(Math.random() * 6);
//Cadena = "Jugada numero" + i +"--aleatorio  " + aleatorio +"<br>"
//document.write(Cadena)
if (aleatorio == 0) {
Calaberas = Calaberas + 1
//document.write("(00) C1 " + Calaberas +"<BR>")
}
if (aleatorio == 1) {
Calaberas = Calaberas + 1
//document.write("(00) C2 " + Calaberas +"<BR>")
}
if (aleatorio == 2) {
Calaberas = Calaberas + 1
//document.write("(00) C3 " + Calaberas +"<BR>")
}
if (aleatorio == 3) {
Escudos = Escudos + 1
//document.write("(*'*) E1 " + Escudos +"<BR>")
}
if (aleatorio == 4) {
Escudos = Escudos + 1
//document.write("(*'*) E2 " + Escudos +"<BR>")
}
if (aleatorio == 5) {
CNegra = CNegra + 1
//document.write("(xx) N0 " + CNegra +"<BR>")
}
//Fin de los condicionales y suma elementos Calabera,Escudos y CNegra
}
//Fin del bucle for las variables ya tienen los datos de los seis dados lanzados.
// Preparo las variables y se monta el contenido para el TextArea que las contendra.
cosa= ("(00)-----------------(00)\n" + "(m)  CALABERA   (m)" +"\n               " + Calaberas +"\n"+"\n");
cosa1= ("(**)-----------------(**)\n" + "(**)  ESCUDOS   (**)" +"\n               " + Escudos +"\n"+"\n");
cosa2= ("(xx)-----------------(xx)\n" + "(--)   C.NEGRA     (--)" +"\n               " + CNegra +"\n"+"\n");
// Creamos el boton y la TextArea
document.write("<INPUT TYPE='button' VALUE='Hazme Clic' onClick='clickMe();'>");
document.write("<textarea name='runningtotal' style='color: green'; background-color:'black' cols='23' rows='16'>"+"      6D Heroquets\n"+ cosa + cosa1 + cosa2 + '</textarea>');
			document.clear();
			document.close();
			}//Fin Function

Inicio.html

Código: [Seleccionar]
<html>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<head>
		<title>Empezando a programar muy fácil</title>
		<script language="JavaScript" src="Alea.js">
		var resultado= "0"
		</script>
			<frameset COLS="350,*,2*">
				<frame name="frame1" src="pagina1.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
				<frame name="frame2" src="pagina2.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
				<frame name="frame3" src="pagina3.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
			</frameset>
	</head>
	<body>
	</body>
</html>

pagina1.html

Código: [Seleccionar]
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Pagina 1</title>
		<script language="JavaScript" src="Alea.js"></script>
</head>
<body bgcolor="#ff9999">

Iniciamos lanzador Heroquest-->

	<form1 method="post" action="" name="form1">
		<input type="button" value= "Pulsa" onclick="clickMe()">
	</form1>
</body>
</html>

pagina2.html

Código: [Seleccionar]
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Pagina 1</title>
</head>
<body bgcolor="#9999ff">

<form2 NAME= "FormA">
	<SELECT id="SelectBox">
		<option selected>--- Elige opci&oacute;n ---</option>
		<option value="0">1
		<option value="1">2
		<option value="2">3
		<option value="3">4
		<option value="4">5
		<option value="5">6
		<option value="6">7
		<option value="7">8
		<option value="8">9
		<option value="9">10
		<option value="10">11
		<option value="11">12
	</SELECT>
</form2>

	<input type="button" value= "Pulsa" onclick="LinkUp()">

	<script language="JavaScript">
		function LinkUp(){
			var x=document.getElementById("SelectBox").selectedIndex;
			var y=document.getElementById("SelectBox").options;
			alert("Index: " + y[x].index + " con valor  " + y[x].text);
				if(y[x].index == 1){
					window.location="pagina1.html"}
					// Fin de la condicional if
				if(y[x].index == 2){
					window.location="pagina2.html"}
					// Fin de la condicional if
				if(y[x].index == 3){
					window.location="pagina3.html"}
		} // Fin de la funcion LinkUp
	</script>

<br>
<br>
Ambos lanzadores se apoyan en Alea.js de forma que solo escribimos una vez el codigo.
</body>
</html>

pagina3.html

Código: [Seleccionar]
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Pagina 1</title>
		<script language="JavaScript" src="Alea.js"></script>
</head>
<body bgcolor="#00fff" fontcolor="#000000">

Aquí otro lanzador HQ...

	<form3>
		<input type="button" value= "Pulsa" onClick="clickMe()">
	</form3>
</body>
</html>

Y esa era la cuestión, reutilizar el código aunque estoy completamente de acuerdo que para pequeños ejemplos el código es mucho mas legible en una sola pagina.

Seguramente se tenga que depurar mucho mas el código este lo realice para este ejemplo. He visto que no funciona correctamente en algunos tipo de navegador, pero sirve para el ejemplo.

<>

En realidad lo puede hacer cualquiera con los datos aquí expuestos. Decir que lo aquí expuesto es la idea general y como es un proyecto en curso estara dispuesto a posibles modificaciones para su mejora.

Pero para que nos hagamos una idea del proyecto y cada cual pueda modificarlo al gusto os dejo el codigo y las imagenes si no usais AsciiArt ya que estas estan incluidas en el codigo.

si usamos AsciiArt tendremos que realizar un cambio en el codigo:

<script>
//var Calabera =”<td><h6><pre><font color=#F9F9F9><br></h6></pre>”
//var CNegra=”<td><h6><pre><font color=#FFFFFF><br></h6></pre>”
//var Escudo=”<td><h6><pre><font color=#FFFFFF>ll<br></h6></pre>”
var Calabera=”<td><img src=’hq-01.png’>”
var CNegra=”<td><img src=’hq-04.png’>”
var Escudo=”<td><img src=’hq-03.png’>”
</script>

Como se puede apreciar hay uns dobles barras ( // ) que evitan que las variables obtengan un valor Ascii, por tanto si queremos usar Ascii debemos colocar las dobles barras a las imagenes y de esta forma se asigna el valor de las variables a imagenes o Ascii segun nos convenga.

Si usamos imagenes, estamos obligados a incluir estas en la carpeta donde tenga el proyecto para que el programa las encuentre y ejecute segun demanda.

Por si alguien se anima las imagenes, basta arrastrar y soltar en la carpeta donde tengamos el proyecto y dar el mismo nombre que utilizado en el codigo.

Cuando lanzamos el programa nos pedira que introduzcamos una serie de datos:

El Numero de dados.- No hay limite puedes lanzar los que quieras.
El Numero de Caras.- No hay limite puede elegir las caras que quieras.
El tipo de Dados.- (Por implementar, el usuario elige los dados de un juego a elegir)

Aviso a navegantes.- De momento lo estoy trasteando y quiero implementar el selector de Tipo de Dados para que cambie la imagen segun el juego seleccionado, de momento solo tiene las imagenes del HQ.

No tiene implementado un control de errores que tenga en cuenta las caras y el tipo de juego elegido, de forma que si poneis mas caras del dado al no tener el selector implementado, las imagenes no acompañan al resultado, pero OJO el resultado numerico es completamente valido.

Para que podais trastear con el programa os dejo el codigo en un unico Html.

Código: [Seleccionar]
<html>
	<head>
			<title>MULIN ASCII</title>

		<SCRIPT language="JavaScript"></SCRIPT>
	</head>
	<body>
		<div>
			<table>
				<tr>
					<td valign=top>
						<h1>Mulin Acsii</h1>						
						<p>
							<form action="" method="POST" onsubmit="mostrar_dados();return false;">
								<p><b>Cantidad de dados: </b>
								<input type="text" name="cantidad" id="cantidad" value="6"><input type="submit" value="Crear">
								<b>  Numero de caras: </b>
								<input type="text" name="cantidad" id="caras" value="6"><input type="submit" value="Elegir">
								<b>  Tipo de juego: </b>
								<select name="miSelect">
								<option value="1">Heroquest
								<option value="2">Doom
								<option value="3">Otro
								</select></p> 
							</form>
						</p>
						<p>
							<div id="dados">

							</div>

<script>							
// var Calabera ="<td><h6><pre><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><font color=#F8F8F8>@@</font><font color=#F5F5F5>@@</font><font color=#F7F7F7>@@</font><font color=#F8F8F8>@@</font><font color=#F8F8F8>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><br><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><font color=#F3F3F3>@@</font><font color=#949494>@@</font><font color=#6C6C6C>@@</font><font color=#707070>@@</font><font color=#A1A1A1>@@</font><font color=#F4F4F4>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><br><font color=#F9F9F9>@@</font><font color=#F8F8F8>@@</font><font color=#9C9C9C>@@</font><font color=#A7A7A7>@@</font><font color=#F7F7F7>@@</font><font color=#F4F4F4>@@</font><font color=#9E9E9E>@@</font><font color=#ADADAD>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><br><font color=#F9F9F9>@@</font><font color=#F8F8F8>@@</font><font color=#818181>@@</font><font color=#F6F6F6>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><font color=#F0F0F0>@@</font><font color=#8D8D8D>@@</font><font color=#F8F8F8>@@</font><font color=#F9F9F9>@@</font><br><font color=#F9F9F9>@@</font><font color=#F8F8F8>@@</font><font color=#989898>@@</font><font color=#D9D9D9>@@</font><font color=#E6E6E6>@@</font><font color=#DDDDDD>@@</font><font color=#D2D2D2>@@</font><font color=#A3A3A3>@@</font><font color=#F8F8F8>@@</font><font color=#F9F9F9>@@</font><br><font color=#F9F9F9>@@</font><font color=#F8F8F8>@@</font><font color=#959595>@@</font><font color=#9D9D9D>@@</font><font color=#929292>@@</font><font color=#909090>@@</font><font color=#ACACAC>@@</font><font color=#A5A5A5>@@</font><font color=#F8F8F8>@@</font><font color=#F9F9F9>@@</font><br><font color=#F9F9F9>@@</font><font color=#F8F8F8>@@</font><font color=#BFBFBF>@@</font><font color=#757575>@@</font><font color=#BCBCBC>@@</font><font color=#B4B4B4>@@</font><font color=#727272>@@</font><font color=#CECECE>@@</font><font color=#F8F8F8>@@</font><font color=#F9F9F9>@@</font><br><font color=#F9F9F9>@@</font><font color=#F8F8F8>@@</font><font color=#E1E1E1>@@</font><font color=#757575>@@</font><font color=#707070>@@</font><font color=#767676>@@</font><font color=#858585>@@</font><font color=#F5F5F5>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><br><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><font color=#F5F5F5>@@</font><font color=#A0A0A0>@@</font><font color=#9C9C9C>@@</font><font color=#A1A1A1>@@</font><font color=#A7A7A7>@@</font><font color=#F7F7F7>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><br><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><font color=#F8F8F8>@@</font><font color=#D9D9D9>@@</font><font color=#D9D9D9>@@</font><font color=#F5F5F5>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><font color=#F9F9F9>@@</font><br></h6></pre>"
//var CNegra="<td><h6><pre><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><font color=#FEFEFE>xx</font><font color=#FEFEFE>xx</font><font color=#FEFEFE>xx</font><font color=#FFFEFE>xx</font><font color=#FFFFFE>xx</font><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><br><font color=#FFFFFF>xx</font><font color=#FEFEFE>xx</font><font color=#EBEBEB>xx</font><font color=#979693>xx</font><font color=#6A6965>xx</font><font color=#6A6A66>xx</font><font color=#9D9C99>xx</font><font color=#F0EFEF>xx</font><font color=#FEFFFF>xx</font><font color=#FFFFFF>xx</font><br><font color=#FFFFFF>xx</font><font color=#E6E6E5>xx</font><font color=#5D5C59>xx</font><font color=#56544E>xx</font><font color=#9A9387>xx</font><font color=#979084>xx</font><font color=#53504B>xx</font><font color=#6D6C68>xx</font><font color=#F3F3F2>xx</font><font color=#FFFFFF>xx</font><br><font color=#FEFEFE>xx</font><font color=#8E8D8B>xx</font><font color=#44433F>xx</font><font color=#928B7F>xx</font><font color=#B7AE9E>xx</font><font color=#A59D8F>xx</font><font color=#8B867B>xx</font><font color=#44433F>xx</font><font color=#A2A19E>xx</font><font color=#FEFEFE>xx</font><br><font color=#FEFEFE>xx</font><font color=#62615D>xx</font><font color=#454440>xx</font><font color=#7A756C>xx</font><font color=#A29A8D>xx</font><font color=#9E978B>xx</font><font color=#68645E>xx</font><font color=#45433F>xx</font><font color=#72716D>xx</font><font color=#FFFFFF>xx</font><br><font color=#FEFEFE>xx</font><font color=#5F5E5A>xx</font><font color=#454440>xx</font><font color=#8D8981>xx</font><font color=#716F68>xx</font><font color=#7C7972>xx</font><font color=#86837B>xx</font><font color=#45443F>xx</font><font color=#73726E>xx</font><font color=#FEFEFE>xx</font><br><font color=#FFFFFF>xx</font><font color=#8A8986>xx</font><font color=#44433F>xx</font><font color=#8B877F>xx</font><font color=#807D75>xx</font><font color=#838078>xx</font><font color=#7A7770>xx</font><font color=#44433F>xx</font><font color=#A19F9D>xx</font><font color=#FFFFFF>xx</font><br><font color=#FFFFFF>xx</font><font color=#E0DFDE>xx</font><font color=#565551>xx</font><font color=#686660>xx</font><font color=#5D5B55>xx</font><font color=#615F59>xx</font><font color=#56544F>xx</font><font color=#686763>xx</font><font color=#F0F0EF>xx</font><font color=#FFFFFE>xx</font><br><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><font color=#E3E3E2>xx</font><font color=#8C8C89>xx</font><font color=#676662>xx</font><font color=#6A6966>xx</font><font color=#9B9A97>xx</font><font color=#EEEEED>xx</font><font color=#FEFEFE>xx</font><font color=#FFFFFF>xx</font><br><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><font color=#FFFFFD>xx</font><font color=#FFFFFE>xx</font><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><font color=#FFFFFF>xx</font><br></h6></pre>"
//var Escudo="<td><h6><pre><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><br><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#A5A5A5>ll</font><font color=#898989>ll</font><font color=#828282>ll</font><font color=#848484>ll</font><font color=#828282>ll</font><font color=#7D7D7D>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><br><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#5A5A5A>ll</font><font color=#6B6B6B>ll</font><font color=#000000>ll</font><font color=#1F1F1F>ll</font><font color=#000000>ll</font><font color=#2E2E2E>ll</font><font color=#D7D7D7>ll</font><font color=#FFFFFF>ll</font><br><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#5C5C5C>ll</font><font color=#515151>ll</font><font color=#000000>ll</font><font color=#000000>ll</font><font color=#000000>ll</font><font color=#010101>ll</font><font color=#D7D7D7>ll</font><font color=#FFFFFF>ll</font><br><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#6B6B6B>ll</font><font color=#010101>ll</font><font color=#000000>ll</font><font color=#000000>ll</font><font color=#111111>ll</font><font color=#080808>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><br><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#9A9A9A>ll</font><font color=#6B6B6B>ll</font><font color=#555555>ll</font><font color=#000000>ll</font><font color=#292929>ll</font><font color=#585858>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><br><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#585858>ll</font><font color=#000000>ll</font><font color=#000000>ll</font><font color=#010101>ll</font><font color=#AAAAAA>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><br><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#BDBDBD>ll</font><font color=#0F0F0F>ll</font><font color=#222222>ll</font><font color=#5A5A5A>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><br><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#C9C9C9>ll</font><font color=#797979>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><br><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><font color=#FFFFFF>ll</font><br></h6></pre>" 
var Calabera="<td><img src='hq-01.png'>"
var CNegra="<td><img src='hq-04.png'>"
var Escudo="<td><img src='hq-03.png'>"
</script>          
							<script type="text/javascript">
								var dados_mostrados;
								var num_caras;
								function mostrar_dados(){
									dados.innerHTML = "";
									var contenido = "";
									var figura = "";
									dados_mostrados = document.getElementById('cantidad').value;
									num_caras = document.getElementById('caras').value;
									contenido += "<table border= '1' bordercolor='silver' bgcolor='white'>"
									for(var i=1;i<=dados_mostrados;i++){
									    var alea= (Math.floor(Math.random()* num_caras)+1);
										if (alea == 1){figura=Calabera};
										if (alea == 2){figura=Calabera};
										if (alea == 3){figura=Calabera};
										if (alea == 4){figura=Escudo};
										if (alea == 5){figura=Escudo};
										if (alea == 6){figura=CNegra};
										contenido += "<div class='contenedor_dado' id='contenedor_dado_"+i+"'><form action='#'>";
										contenido += "<label for='checkbox_"+i+"'>"+figura+""+alea+"</label>";
										contenido += "<input type='checkbox' id='checkbox_"+i+"'></form>";
										contenido += "</td></div>";
									} 
									contenido += "<div style='clear:both'></div>";
									contenido += "</table>"
									dados.innerHTML = contenido;
									document.getElementById("dados").style.display="block";
									document.getElementById("botones").style.display="inline";
								}
								function actualizar_dados(){
									for(var i=1;i<=dados_mostrados;i++){
										var alea= (Math.floor(Math.random()* num_caras)+1);
										if (alea == 1){figura=Calabera};
										if (alea == 2){figura=Calabera};
										if (alea == 3){figura=Calabera};
										if (alea == 4){figura=Escudo};
										if (alea == 5){figura=Escudo};
										if (alea == 6){figura=CNegra};
										if(document.getElementById("checkbox_"+i).checked){
											var contenido = "";
											contenido += "<label for='checkbox_"+i+"'>"+figura+""+alea+"</label>";
											contenido += "<input type='checkbox' id='checkbox_"+i+"' checked></form>";

											document.getElementById("contenedor_dado_"+i).innerHTML = contenido;
										}
									}
								}
								mostrar_dados();
							</script>
						</p>
						<div style="clear:both"></div>
						<div id="botones" style="display:inline">
						<button onclick="mostrar_dados()">Volver a tirar todos</button> <button onclick="actualizar_dados()">Volver a tirar seleccionados</button>
						</div>
						<br/>
	</body>
</html> 

y de momento eso es todo, con este unico Html podemos crear un Multi-Lanzador-Interactivo, este es un proyecto que ya creé en su momento llamado MuLin, pero ahora escrito en javascript.

El titulo del hilo se deberia cambiar por el de “programar barato”, sin mas herramientas que un block de notas y un navegador podemos crear programas para todas las plataformas Windows, Linux, Mac y otras como Android, de nuevo el limite está en nuestra imaginación.

Para quien solo quiera ver como funciona, de nuevo subi el programa al servidor gratuito que estoy utilizando para estas guias, por lo que de nuevo advertir de que los Banners no los puedo controlar.

<>

Cambiado el lanzador Mulin-JS de servidor, la verdad es que esto es otra cosa.

Este lanzador nos permite lanzar cualquier tipo de dados.

La filosofía de ¿cuantas dados y cuantas caras? Se muestra en este lanzador que le permite al usuario crear su propio dado, elegir las caras que desea que tenga el dado y cuantos de ellos quiere lanzar en la tirada.

MulinJS viene dotado con unos Sets de dados por defecto, ( 1d6, Catan, Heroquest, Memoir44, Poker, Runebound, para el set de 9 dados Descent 2 edición y el Doom, también hay una solapa Otros para crear nuestros propios dados. )

Crear un lanzador que fuera valido para todos los sistemas operativos es realmente complicado, al menos que se este respaldado por una compañía dedicada al sector. La mejor forma de hacer lo mas extensible una aplicación para varios sistemas operativos es crear la misma para una plataforma online, de esta forma abarcamos todos los S.O. Incluido Android, el secreto reside en el tipo de navegador que utilicemos ya que debe permitir utilizar Javascript.

Cuando lanzamos dados de los set incluidos, contar los resultados de 1000 dados por ejemplo puede resultar prácticamente imposible, por ese motivo MulinJS incluye un botón Resultados, este nos mostrara el global de los resultados obtenidos en el lanzamiento evitando que nos perdamos cuando el numero de dados es muy grande.

Como extra incluí un par de set de dados de juegos que tienen dados diferentes como puede ser el caso del  Descent 2  que pone en juego hasta 9 dados diferentes de seis caras o el Doom.

Este tipo de dados esta incluido en fase de experimentación y tienen ciertas restricciones ya que no ofrece resultados o para que nos entendamos mejor no programe la aplicación para que cortaran cada una de las caras y de que tipo de potencia etc etc es cada cara .

Pero como set básico esta implementado y funcionando, hay un pequeño truco que podemos hacer y que contare mas adelante para incluir varios lanzadores en una sola HTML.

Este realmente es el lanza todo, si tenéis seleccionado Otros, podéis lanzar el número de dados ilimitados y las caras ilimitadas que deseemos.

Tanto si queremos lanzar 100 dados de 9 caras, como si queremos tirar 5 dados de 20 caras, tan solo debemos rellenar los campos y Crear el set, no hay limite en este aspecto.

Lo mejor es probarlo por uno mismo y como es totalmente online podéis probar con los diferentes sistemas operativos, recordar que el secreto está en el navegador utilizado, lo he probado con Mozilla-Firefox, y Chrome en Windows, Linux y Android en un par de Tablets hacer y Samsung, con teléfonos móviles todavía no se como ira y dependerá del sistema operativo Android que posea el teléfono, amen del navegador utilizado.

  MULINJS Enlace.-
http://yuyusub.xp3.biz/datos/AsciiMulin/JSMulin.html

MulinJS está en su versión Beta 1 de prueba  y puede estar sujeto a cambios para su mejora.

Saludos y P&P

<>

DungeonTHML
http://yuyusub.xp3.biz/datos/DungeHTML/inicio.html

Continuando con la programación “fácil” de video-juegos he decidido crear un pequeño programa con los datos de una Gruta como ya había mencionado en otro hilo.

El héroe debe recoger la espada para enfrentarse al Malo, y con ello conseguir salir de la gruta. Este código es muy sencillo y os puede servir como plantilla o como punto de partida para poder mejorar o cambiar lo que deseéis.

El juego lo dividí en fases:

Movimiento.-

Una vez que prepare el Html para que apareciera el personaje, debía poder moverme por las diferentes habitaciones lo que me supuso crear un algoritmo valido para el movimiento.

Crear un Pathfinding para 9 casillas no parecía muy lógico, ademas las casillas no estaban divididas en cuadrados, es una imagen por lo que el movimiento es a través de X e Y.

¿Cómo…mover al héroe?

Un ejemplo.
Si colocamos al héroe en la “casilla 1” solo puede coger una dirección. El resultado seria (4S) que significa que solo hay una salida al Sur desde la “casilla origen” y que va a la habitación 4.

De esta forma y por direcciones ya disponemos de todo el recorrido del juego, ya que al héroe lo podemos mover con unas flechas de dirección ( N, S, E, O ) dependiendo de donde se encuentre..

1 hab >> hab 4(S)
4 hab >> hab 5(E), hab 7(S) hab 1(N)

esto viene a decir que desde la Habitación 1 puede ir a la Habitación 4 al Sur, o que desde la Habitación 4 puede ir a tres sitios diferentes según pulse el jugador las teclas de dirección.

Como lo que voy a usar son botones para que el jugador elija la dirección, con los resultados de las 9 “casillas” se puede traducir a direcciones.

Norte> (4>1) o (5>2) o (6>3) o (7>4) o (8>5) o (9>6) comprobar en el tablero de arriba que todos los Nortes nos llevan a la habitación indicada dependiendo de la “casilla” origen del héroe.

A nivel de código, si un jugador pulsa Norte y estamos en una habitación cuyo origen coincida con
los valores asignados, el código nos llevara a otra habitación, de lo contrario el movimiento estará prohibido y no se moverá.

Con este método se puede ampliar el recorrido teniendo en cuenta la dirección y el número de casilla asignado al nuevo elemento.

Por ejemplo si queremos continuar por la derecha (en la imagen de arriba esta cerrada, pero imaginamos que la Casilla 6, dejara continuar hacia Este ) tendiéramos que:

La habitación 6 debe tener apuntados 3-Norte (porque puede ir a la habitación 3 al Norte), 9-Sur, 5-Oeste y la nueva dirección 10-Este, por lo que en este caso, en la dirección ESTE debo dejar pasar al héroe a esa nueva casilla.

De forma que si estoy en la “casilla 6” y muevo hacia al Este iré a la “nueva casilla 10” y a esta la puedo dar las oportunas direcciones para continuar el camino o acabar ahí el movimiento.

Este sistema que nos proporciona  una habitación de origen y destino circunstancia que aprovecharemos para colocar mas objetos por las habitaciones, monstruos, tesoros o lo que deseemos.

Explicando el código.

Voy a dar por entendido que la mayoría sabemos interpretar las sentencias mas básicas así como condicionales, bucles etc, etc, no obstante intentare exponer el código de la forma mas sencilla y para saber como funciona, en este caso aplicado al movimiento que funciona de la siguiente manera:

      function Norte(n){
switch(n)
{
case 4:
heroe.style.top=50;
heroe.style.left=50;
origen=1;
tehabita(origen);
mensajes.innerHTML = hoja;
refresco();
break;

Cuando el jugador pulse sobre el botón NORTE, se genera una llamada a Norte(número) que a su vez se coteja con SWITCH(número), si el número de la habitación(n) coincide con algunos de los casos, se ejecuta el código.

Movemos al Héroe a las coordenadas x-left e y-top, cambiamos las variable origen para situar al Héroe en el nuevo origen.

tehabita(origen); lanza otra llamada a el texto que coincida con el Origen y por lo tanto la habitación correspondiente.

Ahora hay que introducir el texto de la habitación al programa y para ello ( mensajes.innerHTML = hoja; ) que colocara el texto en una <TEXAREA> identificada como “mensajes”.

Por ultimo refresco la variable origen con su nueva situación para que este disponible la nueva circunstancia en el juego.

De esta forma se realizan las llamadas al movimiento para cualquier “casilla” donde se encuentre el Héroe, que posicionan al héroe en el tablero principal e incluyen un texto de la habitación que ocupa para ser mostrado en una área de texto, refrescamos los nuevos datos otorgados al héroe y sale de la subrutina.

Aquí el codigo completo para el archivo: Mover.js

Código: [Seleccionar]
//-----------------------------------------------
//++++++++++++++++++++++++++++++++++++++++++++++++

function refresco(){
n=origen;
//console.log("Refresco de origen  " + origen);
}
/////////////////////////////////////////////////////////////NORTE
		function Norte(n){
//console.log("Norte valor de origen  " + origen);

switch(n)
{
case 4:
			heroe.style.top=50;
			heroe.style.left=50;
			origen=1;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 5:
			heroe.style.top=50;
			heroe.style.left=150;
			origen=2;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 6:
			heroe.style.top=50;
			heroe.style.left=250;
			origen=3;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 7:
			heroe.style.top=150;
			heroe.style.left=50;
			origen=4;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 8:
			heroe.style.top=150;
			heroe.style.left=150;
			origen=5;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 9:
			heroe.style.top=150;
			heroe.style.left=250;
			origen=6;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
default:
alert("Ir hacia el Norte.\nNo puedes tomar ese camino.");
}
}
/////////////////////////////////////////////////////////////SUR
		function Sur(n){
//console.log("Sur valor de origen  " + origen);
switch(n)
{
case 1:
			heroe.style.top=150;
			heroe.style.left=50;
			origen=4;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;

case 2:
			heroe.style.top=150;
			heroe.style.left=150;
			origen=5;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 3:
			heroe.style.top=150;
			heroe.style.left=250;
			origen=6;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 4:
			heroe.style.top=250;
			heroe.style.left=50;
			//mensajes.innerHTML = "Habitacion 7";
			origen=7;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 5:
			heroe.style.top=250;
			heroe.style.left=150;
			origen=8;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 6:
			heroe.style.top=250;
			heroe.style.left=250;
			origen=9;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
default:
alert("Ir hacia el Sur.\nNo puedes tomar ese camino.")
}
}
/////////////////////////////////////////////////////////////ESTE
		function Este(n){
//console.log("Este valor de origen  " + origen);
switch(n)
{
case 4:
			heroe.style.top=150;
			heroe.style.left=150;
			origen=5;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 5:
			heroe.style.top=150;
			heroe.style.left=250;
			origen=6;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
default:
alert("Ir hacia el Este.\nNo puedes tomar ese camino.")
}
}
/////////////////////////////////////////////////////////////OESTE
		function Oeste(n){
//console.log("Oeste valor de origen  " + origen);
switch(n)
{
case 5:
			heroe.style.top=150;
			heroe.style.left=50;
			origen=4;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
case 6:
			heroe.style.top=150;
			heroe.style.left=150;
			origen=5;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			refresco();
			break;
default:
alert("Ir hacia el Oeste.\nNo puedes tomar ese camino.")
}
}

Si se observa detenidamente el codigo, podemos comprobar que se repite el mismo esquema en todos los casos y tan solo modificamos los datos con el texto y la habitación de origen en cada caso.

Y con este codigo ya podemos mover al Héroe por todo el recorrido programado o el que se pueda ampliar ya que pdemos seguir poniendo habtaciones de forma ilimitada.

Hay cierto codigo > //console.log(“Oeste valor de origen  ” + origen); que aparece con dobles barras y por eso no se ejecuta pero tiene su porque.

Hay ciertos navegadores, que nos permiten incluir al navegador una “Consola Web” y es ahí donde podemos depuerar el codigo y nos ayudara enormemente para saber como se comporta el código, no dudeis en experimentar con la consola, nos aporta una información muy importante para desarrollar proyectos. Podeis probar como aporta informacion a la Consola Web, borrando las dobles barras o mejor aun rescribiendo alguna con los datos que os interesen.

Luego continuaré con el Texto.js

<>

Textos.-

Los textos se aplican a cada habitación de forma individual, el texto que prepare es muy básico y se puede mejorar como cualquier cosa del programa.

Recordaros que el video-juego es muy sencillo, es solo una plantilla preparada para el propósito de ayudarnos a entender como es el proceso de creación de un video-juego, pero muy muy simple.

Los textos son extremadamente sencillos, según la llamada a la función, tehabita(origen), compara el número “origen” en la caja de selección y devuelve el texto correspondiente a cada habitación en la variable “hoja”.

Los textos se presentan en una <texarea> y se reescriben cuando ocurre algún evento, como puede ser un objeto que el héroe recoge de una habitación.

Los textos de los objetos como la Espada, el Libro, solo son llamados cuando el héroe recoge o usa esos objetos  y  los textos están incluidos en otro archivo que veremos mas tarde y llamado Objetos.

Centrándonos en el texto, podríamos mejorar sensiblemente el código si para cada caso, utilizamos un número aleatorio y generamos una respuesta diferente para cada habitación.

function tehabita(origen){
//console.log(“habitaciones call  ” + origen);
switch(origen)
{
case 1:
alea= (Math.floor(Math.random()* 2)+1);

if (alea==0){
hoja=”Habitacion 1\n\nUna oscura y mugrienta estancia es todo lo que te rodea.\n\nAl Sur hay una salida.”
}
if (alea==1){
hoja=”Habitacion 1\n\nUna sucia y mugrienta mazmorra es todo lo que te rodea.\n\nAl Sur hay una salida.”
}
if (alea==2){
hoja=”Habitacion 1\n\nUna mugrienta mazmorra es todo lo que te rodea.\n\nAl Sur hay una salida.”
}
break;

Con el código anterior podemos dar respuestas diferentes para cada caso de habitación, lo que puede mejorar la retorica del texto, aunque el peso del texto en el juego no es primordial, dará una sensación menos repetitiva.

Para mejorar algunos aspectos, incluí unas referencias en un archivo CSS, este tipo de archivos incluye una mejorar gráfica sustancial en las paginas Html.

Así por ejemplo, podemos actuar sobre ciertos objetos como el caso del espíritu de la gruta.

En el Html
<img id=”Malo” src=”images/Malo.png” onmousemove=”ocultar_imagen(id)”>

En el CSS
.Malo {
position:absolute;
border:none;
cursor: pointer;
visibility: hidden;
}

En ambos casos se refieren al mismo objeto( el Malo es la imagen del fantasma ) y estas referencias nos servirán para mover y ocultar objetos del juego.

En otros casos no servirá para dar una apariencia gráfica, como sera el caso de la <texarea> que contiene el texto del juego.

Cada elemento de forma independiente puede ser modificada en el Css para obtener diferentes resultados dependiendo del objeto que deseemos modificar.

Códigos para textos y css.

Código textos.js

Código: [Seleccionar]
function tehabita(origen){
//console.log("habitaciones call  " + origen);
switch(origen)
{
case 1:
hoja="Habitacion 1\n\nUna sucia y mugrienta mazmorra es todo lo que te rodea.\n\nAl Sur hay una salida."
//alert("Habitacion 1 texto")
break;

case 2:
hoja="Habitacion 2\n\n\n\nUna sucia y mugrienta mazmorra es todo lo que te rodea.\n\nAl Sur hay una salida."
//alert("Habitacion 2 texto")
break;

case 3:
hoja="Habitacion 3\n\n\n\nUna sucia y mugrienta mazmorra es todo lo que te rodea.\n\nAl Sur hay una salida."
//alert("Habitacion 3 texto")
break;

case 4:
hoja="Habitacion 4\n\nUn largo pasillo al Oeste con varias habitaciones.\n\nTambien hay salidas hacia el Norte y Sur."
//alert("Habitacion 4 texto")
break;

case 5:
hoja="Habitacion 5\n\nEl Salon central puedes elegir cualquier direccion."
//alert("Habitacion 5 texto")
break;

case 6:
hoja="Habitacion 6\n\nUn largo pasillo al Este con varias habitaciones.\n\nAl Norte y Sur hay salidas."
//alert("Habitacion 6 texto")
break;

case 7:
hoja="Habitacion 7\n\nOtra estancia con una unica salida hacia el Norte."
//alert("Habitacion 7 texto")
break;

case 8:
hoja="Habitacion 8\n\nSalida principal de la Gruta, necesitas la Llave para salir del laberinto."
//alert("Habitacion 8 texto")
break;

case 9:
hoja="Habitacion 9\n\nOtra estancia con una unica salida hacia el Norte."
//alert("Habitacion 9 texto")
break;
}
		}

y el código para estilo.css

Código: [Seleccionar]
#dungeon{
  position: relative;
  top:0px;
  left:0px;
}
.heroe {
  position:absolute;
  border:none;
}
.Espada {
  position:absolute;
  border:none;
  cursor: pointer;
  visibility: hidden;
}
.Espados {
  position:absolute;
  border:none;
  visibility: hidden;
}
.Llave {
  position:absolute;
  border:none;
  visibility: hidden;
}
.Libro {
  position:absolute;
  border:none;
  visibility: hidden;
}
.Libromo {
  position:absolute;
  border:none;
  visibility: hidden;
}
.Teleport {
  position:absolute;
  border:none;
  cursor: pointer;
  visibility: hidden;
}
.Telepo {
  position:absolute;
  border:none;
  visibility: hidden;
}
.Malo {
  position:absolute;
  border:none;
  cursor: pointer;
  visibility: hidden;
}
.mensajes {
  display: inline;
  float: left;
  width: 200px;
  height: 300px;
  margin-top: 5px;
  text-align: center;
  vertical-align: middle;
padding: 7px 10px;
border: 2px solid #666666;
background-color: #eeeeee;
}
#Mochila {
  display: inline;
  float: left;
  width: 150px;
  height: 300px;
  margin-top: 5px;
  text-align: center;
  vertical-align: middle;
padding: 7px 10px;
border: 2px solid #666666;
background-color: #eeeeee;
}
.Pespada {
  position:absolute;
  border:none;
  cursor: pointer;
}
.Plibro {
  position:absolute;
  border:none;
  cursor: pointer;
}
.Ptelepo {
  position:absolute;
  border:none;
  cursor: pointer;
}
.Algo {
  position:relative;
  border:2px solid #666666;;
  cursor: pointer;
  visibility: visible;
}
.segundo {
  position:relative;
  border:2px solid #666666;;
  cursor: pointer;
  visibility: visible;
}

Continuara con Objetos, ya queda poco.

<>

Los Objetos.-

Los objetos están representados por ciertas imágenes que pondremos en juego y que cada una de ellas tendrá su importancia en cada momento, así por ejemplo sin la Espada no podremos enfrentarnos al Espíritu de la gruta o sin tele-transporte no podremos encontrar la llave.

Pero para iniciar el juego solo necesitamos dos de ellos visibles, el Malo y la Espada por lo tanto lo que realmente hace esta parte del código es colocar los objetos en el tablero de juego y según sea visibles o no, el jugador podrá actuar con ellos.

IA Inteligencia Artificial

La IA en este juego es muy simple, por un lado y para contabilizar los puntos obtenidos, pongo en marcha un cronometro y dependiendo del tiempo que el jugador tarde en recoger los objetos ese tiempo transcurrido se restara al valor del objeto, esa sera la puntuación que aparezca en la correspondiente <texarea> de la Mochila.

Por otra parte está el Combate, que se soluciona con una simple tirada de dados por parte de el programa, el resultado más alto gana, ya sea el jugador o el monstruo, si es el jugador el vencedor puede continuar el juego, pero, si es el monstruo, le quita todos los objetos obtenidos, pone sus marcadores a cero y vuelve a empezar.

Observando el código.

// Objetos para poner en el mapa
function colocar(){
//colocar heroe en salida
heroe.style.top=50;
heroe.style.left=50;
origen=1;
tehabita(origen);
mensajes.innerHTML = hoja;
alea= (Math.floor(Math.random()* 5)+1);
//////////////////////////////////////////
if (alea == “1”){
Espada.style.top=250;
Espada.style.left=50;
document.getElementById(“Espada”).style.visibility = “visible”                habitObjeto=7;
Malo.style.top=250;
Malo.style.left=250;
habitMalo=9;
document.getElementById(“Malo”).style.visibility = “visible”
};
/////////////////////////////////////////

El código es prácticamente el mismo que el del script Mover.js, pero con la diferencia que una vez colocado el Héroe en la Salida  genera un numero aleatorio (alea) y dependiendo del resultado el Malo y la Espada pueden aparecer en diferentes habitaciones.

Un poco de Mates, si tengo 9 casillas, como voy a usar una para el Héroe, me restan 8, como el Malo ocupara otra casilla diferente a la del Héroe tendré 7 y la permuta de 7! me permita crear una considerable cantidad de posibilidades de salida, yo solo he usado 5 pero podría tener muchas mas.

Para saber en que habitación esta cada objeto hay un par de variables que tienen este caso en cuenta, (habitMalo) que nos servirá para saber si el Héroe y el Malo están en la misma habitación y por lo tanto si hay Combate, y (habitObjeto) que nos servirá para saber si el Héroe puede recoger el objeto si se encuentra en la misma habitación donde haya aparecido el objeto.

Código Objetos.js

Código: [Seleccionar]
//-----------------------------------------------
//++++++++++++++++++++++++++++++++++++++++++++++++
// aleatorio llave
function colocarLlave(){
			alea= (Math.floor(Math.random()* 150)+1);
if(alea<51){alea=50};
if(alea<100 && alea>51){alea=150};
if(alea<150 && alea>101){alea=250};
			Llave.style.top=alea;
			alea= (Math.floor(Math.random()* 150)+1);
if(alea<51){alea=50};
if(alea<100 && alea>51){alea=150};
if(alea<150 && alea>101){alea=250};
			Llave.style.left=alea;
document.getElementById("Llave").style.visibility = "visible"
}
// Objetos para poner en el mapa
function colocar(){
//colocar heroe en salida
			heroe.style.top=50;
			heroe.style.left=50;
			origen=1;
			tehabita(origen);
			mensajes.innerHTML = hoja;
			alea= (Math.floor(Math.random()* 5)+1);
//////////////////////////////////////////
						if (alea == "1"){
			Espada.style.top=250;
			Espada.style.left=50;
document.getElementById("Espada").style.visibility = "visible"
habitObjeto=7;
			Malo.style.top=250;
			Malo.style.left=250;
habitMalo=9;
document.getElementById("Malo").style.visibility = "visible"
};
/////////////////////////////////////////
						if (alea == "2"){
			Teleport.style.top=50;
			Teleport.style.left=250;
habitObjeto=3;
document.getElementById("Teleport").style.visibility = "hidden"
			Espada.style.top=50;
			Espada.style.left=250;
habitObjeto=3;
document.getElementById("Espada").style.visibility = "visible"
			Malo.style.top=50;
			Malo.style.left=150;
habitMalo=2;
document.getElementById("Malo").style.visibility = "visible"
};
/////////////////////////////////////////
						if (alea == "3"){
			Teleport.style.top=50;
			Teleport.style.left=150;
habitObjeto=2;
document.getElementById("Teleport").style.visibility = "hidden"
			Espada.style.top=50;
			Espada.style.left=150;
habitObjeto=2;
document.getElementById("Espada").style.visibility = "visible"
			Malo.style.top=250;
			Malo.style.left=50;
habitMalo=7;
document.getElementById("Malo").style.visibility = "visible"
};
/////////////////////////////////////////
						if (alea == "4"){
			Teleport.style.top=150;
			Teleport.style.left=150;
habitObjeto=5;
document.getElementById("Teleport").style.visibility = "hidden"
			Espada.style.top=150;
			Espada.style.left=150;
habitObjeto=5;
document.getElementById("Espada").style.visibility = "visible"
			Malo.style.top=250;
			Malo.style.left=150;
habitMalo=8;
document.getElementById("Malo").style.visibility = "visible"
};
//////////////////////////////////////////
						if (alea == "5"){
			Teleport.style.top=150;
			Teleport.style.left=250;
habitObjeto=6;
document.getElementById("Teleport").style.visibility = "hidden"
			Espada.style.top=150;
			Espada.style.left=250;
habitObjeto=6;
document.getElementById("Espada").style.visibility = "visible"
			Malo.style.top=250;
			Malo.style.left=50;
habitMalo=7;
document.getElementById("Malo").style.visibility = "visible"
};
}
//Repartir objetos 

Cada objeto del juego permite una booleana(si/no) que veremos en el ultimo script llamado Acciones, donde realmente se gesta el juego y las decisiones que se deben tomar.

Tan solo resta el script acciones y el html de inicio.

<>

Acciones.-

Este script es donde el programa genera las decisiones oportunas para los diferentes casos y encuentros.

function Inicio(){

if (fin==false){

colocar();

reloj();

document.getElementById(“Algo”).style.visibility = “hidden”;

};

if (fin==true){

document.getElementById(“Algo”).style.visibility = “visible”

clearInterval(segundero);

window.location.reload();

};

};

Este código pertenece al botón que aparece en el programa y como se puede observar realiza una de las dos propuestas.

if (fin==false)

Si el juego empieza llama a la función colocar(), esta incluida en el script Objetos.js y colocara la Espada y al Malo en el tablero de juego.

Luego llama a la función Reloj() que pone en marcha el cronometro para descontar a los puntos obtenidos.

Y por ultimo oculta el botón de Inicio hasta que acabe la partida.

if (fin==true)

la primera sentencia muestra el botón Inicio, la segunda para el Reloj y la tercera recarga la pagina, lo que supone poner todo a cero como al inicio del juego, dejando este preparado para jugar.

El resto está todo incluido en una única función que controla el resto de los encuentros combates y resultados de los mismos.

La función function ocultar_imagen(id), recoge todos los casos posibles que puedan ocurrir en el juego, de manera que si por ejemplo nos encontramos con el Malo y tenemos la Espada se producirá un combate.

Una vez superado el Combate, leemos el Libro que deja en el tablero de juego una imagen del Tele-transporte, el cual debemos atravesar para conseguir la Llave que nos permita Salir y por tanto termina la partida.

Observando el Código

//pone en juego la Espada

if (habitObjeto==origen&& teletras==false){

document.getElementById(“Espada”).style.visibility = “hidden”

document.getElementById(“Espados”).style.visibility = “visible”

mensajes.innerHTML = hoja +”\n\n\n\nENCONTRASTE UN OBJETO.”+”\nLA ESPADA TAL\n\nCon esta Espada ya te puedes enfrentar al Espíritu de la gruta.”

Pespada.innerHTML=100-cont;

cuenta=Pespada.value;

laespada=true;

};

Para poder coger la espada el Héroe debe estar en la misma habitación donde este el objeto y que el Tele-transporte este oculto, este ultimo se utiliza para que no se repita el código cuando ya posees la Espada y por un casual pudieras entrar en la misma habitación donde la cogiste..

Si se cumplen las condiciones la Espada se oculta y se hace visible la de nuestra Mochila, por lo tanto es bien sencillo darse cuenta de que en realidad hay 2 imágenes, una que se coloca en el tablero de juego(Espada) y otra que esta en nuestra Mochila con el nombre(Espados), y de esta forma aparecen y desaparecen todos los objetos en el juego.

Para los textos de los objetos encontrados, incluyo en mensajes, la variable(hoja) que contiene el texto de la habitación donde se encuentra el Héroe y le adjunto una coletilla de texto que indica el objeto encontrado, esto es extensible para el resto de objetos.

Ahora viene la puntuación que obtiene el jugador, para este caso la Espada vale 100 puntos, menos los segundos trascurridos hasta que es localizada por eso (100-cont) que es la variable que contiene los segundos contados desde el inicio del juego.

Esta linea puede resultar algo confusa, pero tiene su lógica, resulta que cuando acumulo cifras en un área de texto <textarea>, el programa lo guarda como una cadena literal y no como una cifra, lo cual supone un problema cuando quiera sumar las puntuaciones parciales, para obtener el total de puntos obtenidos, de forma que los paso a una variable (cuenta) que luego las convertirá a cifras reales, para que se puedan sumar y obtener el resultado global.

Por ultimo cambio el valor de la booleana a (true) que para este caso significa que ya poseo la Espada y que de esta manera ya puedo enfrentarme al monstruo.

De esta forma colocando las booleanas puedes avanzar en el juego ya que el código solo filtra los datos del Héroe, donde se encuentra, que objetos posee y que cosas hay en la habitación.

El resto de casos dependerá  de las booleanas y el Combate lo vemos ahora.
Código Combate.

//encuentro COMBATE

if (habitMalo==origen && laespada==true){

switch(e)
{

case 1:

//heroe gana

document.getElementById(“Malo”).style.visibility = “hidden”

Libro.style.top=Malo.style.top;

Libro.style.left=Malo.style.left;

document.getElementById(“Libromo”).style.visibility = “visible”

document.getElementById(“Teleport”).style.visibility = “visible”

mensajes.innerHTML = “” +”\n\nMonstruo ataca con “+ale2+”\n\nHumano ataca con “+ale1+”\n\n\n\n*** VENCISTE ***.”+”\n\nAhora debes atravesar el Teletransporte para encontrar\n\n LA LLAVE”
;
teletras=true;

laespada=false;

Plibro.innerHTML=90-cont;

break;

case 2:

//heroe pierde

heroe.style.top=50;

heroe.style.left=50;

origen=1;

refresco();

document.getElementById(“Libro”).style.visibility = “hidden”;

document.getElementById(“Libromo”).style.visibility = “hidden”;

document.getElementById(“Espada”).style.visibility = “hidden”;

document.getElementById(“Espados”).style.visibility = “hidden”;

document.getElementById(“Teleport”).style.visibility = “hidden”;

document.getElementById(“Telepo”).style.visibility = “hidden”;

Pespada.innerHTML = “000”;

Plibro.innerHTML = “000”;

Ptelepo.innerHTML = “000”;

laespada=false;

teletras=false;

llavero=false;

fin=false;

colocar();

mensajes.innerHTML = “” +”\n\nMonstruo ataca con “+ale2+”\n\nHumano ataca con “+ale1+”\n\n\n\n*** PIERDES ***.”+”\n\nIntentalo de nuevo\n\nMueve al Heroe con los botones de direccion y coge los objetos con el puntero del raton.”

break;

default:

}

}

Este código puede parecer muy largo pero lo resumo de la siguiente manera, la (Case2) ocurre cuando pierdes el combate con el Malo, por lo tanto, lo único que hace es dejar todo a cero y devolver imágenes booleanas etc etc. al punto de partida para poder continuar el juego desde cero.

Para la (Case1) el código refleja lo siguiente:
1. Oculto el Malo porque he ganado.
2. Le doy al Libro la misma coordenada Top, que la que tenia el Malo.
3. Le doy al Libro la misma coordenada Left.
4. Muestro el Libro en la Mochila. Ya que al aparecer en el mismo lugar lo lee al momento.
5. Muestro el Teletransporte en el tablero de juego.
6. Coloco el texto con el resultado del combate.
7. Cambio la booleana del Teletransporte.
8. Cambio la booleana de la Espada ya que el combate no se volverá a repetir.
9. Paso el valor obtenido por conseguir el Libro restando la penalización de tiempo.

Mas de uno se estará preguntando ¿ y donde esta el combate ?

Pues si os fijáis al principio de la función encontramos esto:

var ale1= (Math.floor(Math.random()* 5)+2);

var ale2= (Math.floor(Math.random()* 5)+1);

if(ale1 >= ale2){e=1};

if(ale1 < ale2){e=2};

El ale1 corresponde al Héroe y no hace falta ser un lince para ver que cuenta con cierta ventaja ya que le sumo 2 en lugar de, 1 que le sumo al monstruo.

Reconozco que se puede mejorar y mucho, pero de esta forma es mas fácil seguir el código.

La caja de selección solo tiene dos opciones llegado el caso ya que el empate también favorece al jugador, por tanto si el jugador gana ({e=1}) y si pierde vale ({e=2}).

Código: [Seleccionar]
//-----------------------------------------------
//++++++++++++++++++++++++++++++++++++++++++++++++
function Inicio(){
	if (fin==false){
		colocar();
		reloj();
		document.getElementById("Algo").style.visibility = "hidden";
	 };
	 if (fin==true){
        document.getElementById("Algo").style.visibility = "visible"
		clearInterval(segundero);
		window.location.reload();
	};
};

function ocultar_imagen(id){
var ale1= (Math.floor(Math.random()* 5)+2);
var ale2= (Math.floor(Math.random()* 5)+1);
if(ale1 >= ale2){e=1};
if(ale1 < ale2){e=2};
		if (llavero==true){
			cuenta=parseFloat(Pespada.value);
			cuenta=cuenta+parseFloat(Plibro.value);
			cuenta=cuenta+parseFloat(Ptelepo.value);
			document.getElementById("Llave").style.visibility = "hidden"
			mensajes.innerHTML = "\n\n*****************\n( FIN DE PARTIDA )"+"\n*****************\nPuntos obtenidos\n "+cuenta+" Puntos.\n"+"*******"+"\n*****"+"\n***"+"\n**"+"\n*"+"\n*****************"+"\n*****************"+"\n*****************";
			document.getElementById("Algo").style.visibility = "visible"
			fin=true;
			clearInterval(segundero);
		};
//pone en juego el Teletransporte
		if (habitObjeto==origen && teletras==true){
			document.getElementById("Teleport").style.visibility = "hidden"
			document.getElementById("Telepo").style.visibility = "visible"
			mensajes.innerHTML = hoja +"\n\n\n\n* TELETRANSPORTE *";
			colocarLlave();
			Ptelepo.innerHTML=80-cont;
			llavero=true;
		};
//pone en juego la Espada
		if (habitObjeto==origen&& teletras==false){
			document.getElementById("Espada").style.visibility = "hidden"
			document.getElementById("Espados").style.visibility = "visible"
			mensajes.innerHTML = hoja +"\n\n\n\nENCONTRASTE UN OBJETO."+"\nLA ESPADA TAL\n\nCon esta Espada ya te puedes enfrentar al Espiritu de la gruta."
			Pespada.innerHTML=100-cont;
			cuenta=Pespada.value;
			laespada=true;
		};
//encuentro COMBATE
		if (habitMalo==origen && laespada==true){
				switch(e)
					{
					case 1:
					//heroe gana
					document.getElementById("Malo").style.visibility = "hidden"
					Libro.style.top=Malo.style.top;
					Libro.style.left=Malo.style.left;
					//document.getElementById("Libro").style.visibility = "visible"
					document.getElementById("Libromo").style.visibility = "visible"
					document.getElementById("Teleport").style.visibility = "visible"
					mensajes.innerHTML = "" +"\n\nMonstruo ataca con "+ale2+"\n\nHumano ataca con "+ale1+"\n\n\n\n*** VENCISTE ***."+"\n\nAhora debes atravesar el Teletransporte para encontrar\n\n LA LLAVE"
					teletras=true;
					laespada=false;
					Plibro.innerHTML=90-cont;
					break;
					case 2:
					//heroe pierde
					heroe.style.top=50;
					heroe.style.left=50;
					origen=1;
					refresco();
					document.getElementById("Libro").style.visibility = "hidden";
					document.getElementById("Libromo").style.visibility = "hidden";
					document.getElementById("Espada").style.visibility = "hidden";
					document.getElementById("Espados").style.visibility = "hidden";
					document.getElementById("Teleport").style.visibility = "hidden";
					document.getElementById("Telepo").style.visibility = "hidden";
					Pespada.innerHTML = "000";
					Plibro.innerHTML = "000";
					Ptelepo.innerHTML = "000";
					laespada=false;
					teletras=false;
					llavero=false;
					fin=false;
					colocar();
					mensajes.innerHTML = "" +"\n\nMonstruo ataca con "+ale2+"\n\nHumano ataca con "+ale1+"\n\n\n\n*** PIERDES ***."+"\n\nIntentalo de nuevo\n\nMueve al Heroe con los botones de direccion y coge los objetos con el puntero del raton."
					break;
					default:
					}
		}
};

Poco mas, cuando consigues la llave se hace un recuento de puntos, se para el reloj y aparece el botón de inicio que permite recargar la pagina como si de un juego nuevo se tratase.

Por lo tanto solo queda el Html para acabar.

<>

El inicio Html

El Html es de lo mas sencillo teniendo en cuenta que deben aparecer todos los objetos, marcos, textos, contadores etc , que el juego va a necesitar.

Código: [Seleccionar]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo de Dungeon</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Mover.js"></script>
<script type="text/javascript" src="textos.js"></script>
<script type="text/javascript" src="Objetos.js"></script>
<script type="text/javascript" src="acciones.js"></script>
<script>
//variables globales
var origen = 1;
var n=0;
var pasotexto="variable para textos.";
var hoja="vacio";
var habitObjeto=0;
var habitMalo=0;
var contador=0;
var cuenta=0;
var laespada=false;
var teletras=false;
var llavero=false;
var fin=false;
</script>
</head>

<body>

			<div id="dungeon">
				<table border=1>
					<td>
						<img src="images/Fondo.jpg" width="296" hspace="16" height="297" vspace="2"/>
						<img id="heroe" src="images/Hero.png">
						<img id="Espada" src="images/Espada.png" onmousemove="ocultar_imagen(id)">
						<img id="Llave" src="images/Llave.png" onmousemove="ocultar_imagen(id)">
						<img id="Libro" src="images/Libro.png" onmousemove="ocultar_imagen(id)">
						<img id="Teleport" src="images/Telepor.png" onmousemove="ocultar_imagen(id)">
						<img id="Malo" src="images/Malo.png" onmousemove="ocultar_imagen(id)">
</script>
<br>
					</td>
					<td style="vertical-align: top;">
<textarea id="mensajes" rows="5" cols="18" readonly>
*************
**********
********	

LA GUARIDA DEL JUFLIN

Pulsa sobre Inicio y mueve al heroe por el recorrido para conseguir objetos, pasa el raton sobre los objetos para guardarlos en tu mochila.

Por Yuyu C.C.2013-Oct
</textarea>
					</td>

					<td align="center">
						<input type="button" value="N"onclick="Norte(n)" ><br>
						<input type="button" value="O"onclick="Oeste(n)" >
						<input type="button" value="E"onclick="Este(n)" ><br>
						<input type="button" value="S"onclick="Sur(n)" ><br><br><br><br>
						<input type="button" id="Algo" value="Inicio" onclick="Inicio()"/>
					<script>
						n=origen;
						hoja=pasotexto;
						var cont = 0;
					function contaseg(){
						segundo.innerHTML = cont;
						cont=cont+1; 
					}
					function reloj(){segundero =setInterval('contaseg()',1000);}
					</script>
					</td>

<td style="vertical-align: top;" align="center">
<div id="Mochila">
						<img id="Arcon" src="images/Mochila.png">Mochila
<br>
						<textarea name="Pespada" id="Pespada" cols="3" rows="1"></textarea>
						<img id="Espados" src="images/Espada.png"><br><br>

						<textarea name="Plibro" id="Plibro" cols="3" rows="1"></textarea>
						<img id="Libromo" src="images/Libro.png"><br><br>

						<textarea name="Ptelepo" id="Ptelepo" cols="3" rows="1"></textarea>
						<img id="Telepo" src="images/Telepor.png"><br><br>

						<img id="Tempo" src="images/Reloj.png"><textarea name="segundo" id="segundo" readonly style="text-align:center; width:30px; height:30px; font-size:12; font-family:arial,verdana; overflow:auto"></textarea><br><br></div></td>

			</div>
</body>
</html>

No creo necesario explicar cada uno de ellos y seguro que este juego se puede realizar de mil maneras diferentes, y seguro que muchas partes del código que se puedan mejorar, yo he intentado hacer un programa lo mas sencillo posible teniendo en cuenta que el programa en si no es fácil por lo menos para los neófitos, pero para quien se decida a crear uno puede ser un lujo saber que pasos debe tomar y como puede hacerlo.

La metodología lo es todo, si tan importante es saber programar un poco, no menos importante es saber implementar a través de algoritmos las ideas que se nos ocurran.

Otra cosa no menos importante son la ganas, ya puedes ser el mejor programador del mundo mundial que si no pulsas teclas, no escribes código, por lo tanto mucho del arte de programar reside en la constancia y dedicación que le pongamos al asunto.

El juego no pretende mas que mostrarnos como desde un “guión” inicial, fui creando el resto de scripts para su desarrollo, el desarrollo en bloques del programa nos permitirá desarrollar cada uno de ellos independientemente, por lo tanto se puede desarrollar mejor o peor cada uno de ellos sin que el resto sufra modificación o alteración sustancial que lo deje bloqueado.

Claro está que cada maestrillo tiene su librillo, por lo tanto cada cual puede realizar el programa como mejor le convenga, a mi personalmente me gusta declarar las variables al principio del programa y a ser posible incluir un texto explicativo de lo que hace cada parte, de esta forma si años, siglos o lustros mas tarde tengo que retomar el programa, tendré una idea aproximada de que hace cada cosa y porque.

Y poco más, la programación en general te tiene que gustar, como dijo el sabio:

“No entiendes realmente algo a menos que seas capaz de explicárselo a tu abuela.”

Y ese es el motivo por el que hago este tipo de guías, tutoriales o como le queráis llamar, a mi me supone un reto y si además consigo que alguien lo entienda el objetivo está cumplido.

Creo que para empezar a programar es mas que suficiente y además gratis, no hay que Craquear, ni Hackear nada, disponemos de todos los elementos necesarios y este tipo de programación con scripts nos abre unas puertas a otros lenguajes ampliamente utilizados en la actualidad, como C++, PHP, Html5, Java y otros.

Nadie da más, que los que vendemos gratis.

Ya continuare con algo de Poo y pondré unos enlaces para quien desee continuar creando juegos en JavaScript.

Y ya está, si habéis sido capaces de aguantar todo este rollo, tenéis mis bendiciones por aguantarme, si solo os sirvió de entretenimiento también, y si no os enterasteis de nada os aconsejo volverlo a leer todo, si es que el tema os interesa.

Enlace de todo el proyecto.
https://app.box.com/s/yie6ymv4otnr4x6m846p

Saludos y P&P

<>

A medio modo de experimento y reto estoy creando el RiskExpress, casi lo tengo terminado y cuando lo acabe lo subo al servidor gratuito para testear.

lo que pasa con estas cosas es que o las coges del tirón o luego mas tarde no me acuerdo por donde llevaba el programa y hasta que le vuelvo a coger el hilo cuesta.

de momento es muy simple y me quedan un par de bugs por solucionar, pero cuando os lo presente vemos los por menores.

<>

Un saludo

No creo que haga falta explicar como se juega al RiskExpress por lo que imagino que sera más o menos conocido por todos.

Para los que no, a grandes rasgos, consta de en sucesivas tiradas de dados, intentar conseguir el máximo numero de cartas territorio y mucho mejor si son las del mismo continente, con los resultados obtenidos con los dados .

En esta versión de online, esta en versión Alfa, ni si quiera es una Beta, pero es perfectamente jugable y podríamos decir que la fase de desarrollo está concluida a falta de peinar y lavar.

Una vez el programa está en marcha, comenzará el jugador Humano y luego el Ordenador en sucesivos turnos y como ayuda para elegir territorios, las cartas que los representan, podran aparecer con un reborde verde que nos servirá para saber cual podemos elegir, tanto para el humano como para la maquina.

Los puntos obtenidos serán mostrados en el panel de cada contendiente y los botones para lanzar los dados nos permitirán interactuar con la maquina cuando creamos oportuno.

Como ya dije anteriormente a modo de experimento he creado este juego de mesa que sin duda puede ser mejorado, no solo a nivel de programación sino que también a nivel gráfico, por lo que si veis cualquier cosa, que serán muchas, tener en cuenta que es un prototipo y por lo tanto factibles de mejorar.

Como ya sabéis el programa y código es asequible a cualquiera y por lo tanto nada que mencionar a este respecto, si lo deseáis podéis ver el contenido como en otras ocasiones ya mencione.

Y poco más… os presento un RiskExpres online… que lo disfrutéis como yo haciéndolo.

RiskExpress
http://yuyusub.xp3.biz/datos/RiskObject/Prueba.html
<>
Pero, para mi eso no era lo más importante y si ver como se comportaba el código entre bastidores.A modo de experimento cree un primer Html utilizando únicamente divisores (Div), pero observando como se comportaba en diferentes navegadores, ya vi que solo con eso no podría presentar un sistema estable, ya que dependiendo del navegador que corriera el programa las imágenes, botones y demás componentes se desplazaban.

Y si, ya había incluido archivos Css, de forma que operando en su (  position: relative; o absolute ) no conseguía que fuera todo los estable que yo necesitaba, por lo tanto una primera conclusión, es que, cada navegador es de su padre y de su madre, esto no me cogió de sorpresa ya tenia cierta experiencia cuando programe para J2ME para teléfonos móviles, de forma que lo incluí todo en un <table>.

Solventado el problema para que las imágenes y contenido no se desplazaran, empecé con el desarrollo de algoritmos, en un principio cree dos arrays, uno para los dados y otro para las cartas, pero para mi sorpresa cuando recorría el array que contenía las cartas, con un :

for (var i=0; i < 14; i++){
Lista(i).forEach(MirarLista);}

este producía saltos en algunos de sus campos que a día de hoy, no se por que se producen,por lo tanto, relegue el array  para las cartas y cree un objeto Carta, que se comporto de forma mas estable y que es como ahora podéis encontrar si editáis el cogido.

Estos y otros procesos son los que me interesaba ver como se comportaban, otro ejemplo, cuando iniciamos la aplicación, si tenemos la consola de errores abierta, nos dice: (que la variable “turno” no está definida)…. comooooorrrr?. ¿qué es lo que  pasa ahí adentro?…. pues algo muy sencillo, cuando el Html se carga, lo primero que hace es leer la <head> donde le indico los archivos de respaldo que utilizare en el programa y como la variable “turno” está en el <body>, se produce esta incoherencia, la cuestión es que luego funciona porque realmente si esta declarada, como lo suelo hacer al principio del programa, pero en <body>, quizá debería declarar las variables de otra forma pero para que su ámbito sea a nivel global lo hago de esa manera, lo curioso es que solo ocurre con esa variable y no con otras declaradas de la misma forma, raro, raro….

No me enrollo, mas con los bugs, hay unos cuantos más y paso a la IA, de momento el programa podríamos decir que está en pañales, pero leer ya sabe, dotarle de un tanto de inteligencia con un algoritmo MiniMax, tampoco supondría un cambio sustancial ya que conforme avanza el juego las decisiones pueden entrar en un bucle sin fin, ¿qué seria mas importante?, ¿evitar que tu contrincante consiga un continente o que la maquina consiga un territorio de cierto valor superior al de la carta que cierra el continente y que puede suponer una mejor opción durante la partida?, esto implica crear varios minimax que valoren el mejor resultado, pero habría que desarrollar mucho esos algoritmos por no decir que a la hora de la verdad como programador tendrás que dar cierta prioridad a unas u a otras decisiones.

Por ultimo y retomando el tema de la gráfica, para mover cosas por la pantalla creo que seria mucho mejor crear un Canvas o varios, que nos permitieran seleccionar elementos incluidos, pero eso es otra cosa, quizá si se llega a crear algún grupo y se toma la decisión de crear alguna cosa, el planteamiento de grupo, subdividiendo las funciones y dedicándose cada uno algún apartado en concreto mejore sin lugar a dudas el programa como la presentación del mismo.

Y no continuo que vaya rollo que me he soltado, para mi este experimento me sirvió para observar como se comporta JavaScript y los posibles problemas que podría encontrarme si se llegara a realizar un proyecto con mas dimensiones.

Saludos y P&P

Anuncios


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


Archivos

Categorías

  • No hay categorías

Categorías

  • Categorías
    • No hay categorías

A %d blogueros les gusta esto: