Autor Tema: Programa un juego sencillo con Yuyu  (Leído 9878 veces)

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Programa un juego sencillo con Yuyu
« en: 07 de Octubre de 2013, 12:13:38 pm »
Con el permiso de los asistentes y para dar un impulso al proyecto, voy a proponer algo que sin llegar a ser programación de video-juegos, nos va acercar mucho al mundo de la programación.

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....

vosotros diréis....




« Última modificación: 07 de Octubre de 2013, 12:15:55 pm por Yuyu »

Desconectado entofol

  • Veterano
  • *****
  • Mensajes: 142
Programa un juego sencillo con Yuyu
« Respuesta #1 en: 07 de Octubre de 2013, 18:19:46 pm »
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....

vosotros diréis....

Qué grande eres, Yuyu.
Me recuerda a mi "primera conversacional" que era una interminable lista de IFs sí o no ¬¬
Mejoré bastante después de aquello (y leer algunos manuales).
 
Código: [Seleccionar]
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>Empezando a programar muy fácil</head>
<br>
<body>
<p>PARA LA SECCIÓN DE VIDEO-JUEGOS DESARROLLADO EN <a href="http://www.imprimiryjugar.com">imprimiryjugar.com</a></p>
<p>POR YUYU @ 2013</p>
<pre>
¶¶¶¶¶¶¶¶¶¶¶111ø¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶$111ø¶¶¶¶¶¶¶¶¶¶
¶¶¶¶¶¶¶¶¶¶L¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶øL¶¶¶¶¶¶¶¶¶¶
¶¶¶¶¶¶¶¶¶!¶¶¶¶¶¶¶¶177111111171¶¶¶¶¶¶¶¶!$¶¶¶¶¶¶¶¶
¶¶¶¶¶¶¶¢Z¶¶¶¶¶¶111111111111111111$¶¶¶¶¶Zo¶¶¶¶¶¶¶
¶¶¶¶¶¶7y¶¶¶¶¶$¢$¶o1111111111111¶¶¢ø¶¶¶¶¶y7¶¶¶¶¶¶
¶¶¶¶¶øT¶¶¶$11111111111111111111111111ø¶¶¶To¶¶¶¶¶
17¶¶¶aø¶¶¶1111111111111111111111117711$¶¶$a¶¶¶
´´´´´¶¶¶¶111111111111111111111111117111¶¶¶¶
´´´´´¶¶¶¶111111111111111111111111111111¶¶¶¶
´´´´´´¶¶¶1o¶¶¶¶¶ø11111111111111¢¶¶¶¶¶ø1¶¶¶
´´´´´´¶¶¶111111ø¶¶¶ø11111111o¶¶¶$111111¶¶¶
´´´´´´´¶¶ø11111111111111111111111117117¶¶
´´´´´´´´¶¶o117ø$¢11111¶11¶71111¢$ø7111¶¶
´´´´´´´´´¶¶111o711111¶¶¶¶111117o111¶¶¶
´´´´´´´´´´¶¶¶¶111111111111111111¢¶¶¶¶
´´´´´´´´´´´´´´¶¶¶¶¶¶oooooo¶¶¶¶¶¶
´´´´´´´´´´´´´¶¶$¶øø$¶¶¶¶¶¶¶øø¶$ø¶
´´´´´´´´´´´¶¶ø¢¶øo¢¢¢ooo¢øøøøø¶¢ø¶¶
´´´´´´´´´´¶¶$o¢ø¶o¢øøøøøøø¢øøø¢¶¶oø¶¶¶
´´´´´´´´´¶1¶$¢øøøøøøø¢øøø¢¢øøøøøø¢¶¶oø¶
´´´´´´´´´¶¶¶¶¶¶¶¶øoooooooooo¢oø¶¶¶¶¶¶¶¶
´´´´´´´´´´´´´´´´´¶¶¶øø$¶¶$øø¶¶¶
´´´´´´´´´´´´´´´´´¶¶¶¶¶¶$¢¶¶¶¶¶¶
´´´´´´´´´´´´´´´´´¶¶¶¶¶¶¢1¶¶¶¶¶¶
´´´´´´´´´´´´´´´´´¶¶¶¶¶¶¶¢¶¶¶¶¶¶
´´´´´´´´´´´´´´´´´´¶¶¶¶¶11¶¶¶¶¶                                     
</pre>
<br />
<pre>________________________________________________</pre>
<p><em>Hola. Soy la encargada de explicarte qué estás haciendo aquí</em> - se oyó mientras la imagen aparecía fantasmagórica sobre la pared.</p>
</body>
</html>
« Última modificación: 07 de Octubre de 2013, 18:24:15 pm por entofol »
____/\____/\___________________

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Programa un juego sencillo con Yuyu
« Respuesta #2 en: 08 de Octubre de 2013, 12:17:39 pm »
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.

Saludos....

Desconectado entofol

  • Veterano
  • *****
  • Mensajes: 142
Programa un juego sencillo con Yuyu
« Respuesta #3 en: 08 de Octubre de 2013, 12:32:19 pm »
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.
Para dejar constancia de que: gracias Yuyu
____/\____/\___________________

Desconectado Danzabia

  • Experimentado
  • ****
  • Mensajes: 89
Programa un juego sencillo con Yuyu
« Respuesta #4 en: 08 de Octubre de 2013, 18:12:48 pm »
Interesante, tambien tienes razón.

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #5 en: 10 de Octubre de 2013, 18:19:18 pm »
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.

Saludos.

Desconectado entofol

  • Veterano
  • *****
  • Mensajes: 142
Re: Programa un juego sencillo con Yuyu
« Respuesta #6 en: 12 de Octubre de 2013, 12:11:04 pm »
Intersante. El javascript a mí me interesa bastante.
De hecho, todo lo que se relaciona con cargar contenido en un html ya estático me pica la curiosidad.

Más, más.

Aquí, después de buscar información en la web, te pongo una modificación:

Código: [Seleccionar]
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Empezando a programar muy fácil</title>
</head>
<body>
<p>PARA LA SECCIÓN DE VIDEO-JUEGOS DESARROLLADO EN <a href="http://www.imprimiryjugar.com">imprimiryjugar.com</a></p>
<p>POR YUYU @ 2013</p>
<pre>
EL ASCII DE PUKA IBA AQUÍ. LO QUITO PARA GANAR ESPACIO
</pre>
<br />
<pre>________________________________________________</pre>
<p><em>Hola. Soy la encargada de explicarte qué estás haciendo aquí</em> - se oyó mientras la imagen aparecía fantasmagórica sobre la pared.</p>
<p><em>Lo primero que tendrás que hacer es elegir un número al azar</em>. Pulsa el botón para elegir uno.</p>
<form>
<input type="button" value = "Elige un número al azar" onClick="clickMe(numeroelegido)";><input name="numeroelegido" readonly="true" size="2"><br>
</form>
<script language="JavaScript">
function clickMe(aleatorio)
{
//document.close();
aleatorio.value = Math.floor(Math.random() * 99) + 1;
//document.write("<INPUT TYPE='button' VALUE='Hazme Clic' onClick='clickMe();'>");
}
</script>
</body>
</html>

Me gusta más el estilo de generar el número dentro del mismo html (y aunque sé que se desaconseja) he puesto el javascript incrustado para que sea más fácil de leer.
Algo que no sabía es para que funcione ha de ir dentro de un formulario ¬¬ ay, ay, pero una vez sabido, ya está.
« Última modificación: 12 de Octubre de 2013, 12:12:48 pm por entofol »
____/\____/\___________________

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #7 en: 14 de Octubre de 2013, 13:12:52 pm »
Muy buena Entofol, brillante esa propuesta.
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.

Saludos




Desconectado ximocm

  • Administrador
  • Veterano
  • *****
  • Mensajes: 1569
    • Imprimir y Jugar
Re: Programa un juego sencillo con Yuyu
« Respuesta #8 en: 14 de Octubre de 2013, 21:43:18 pm »
+1

Javascript es un estandar algo aleatorio gracias a M$ que estan intentando "arreglar" y eso echa para atras. Pero si la pretension del curso es sentar unas bases y se ponen ejemplos muy utiles para la aficion, lo veo un gran acierto ;-)
"Matar jugando al rol es tan absurdo como el suicidio por arruinarse en el Monopoly"

Desconectado Danzabia

  • Experimentado
  • ****
  • Mensajes: 89
Re: Programa un juego sencillo con Yuyu
« Respuesta #9 en: 15 de Octubre de 2013, 02:25:10 am »
Me pongo al asunto. 8D

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #10 en: 15 de Octubre de 2013, 13:13:26 pm »
Gracias por ese +1

En justa compensación quiero mejorar el lanzador que se incluia al final de la pagina principal y que era muy muy basico.

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 class="contenido">
<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.

enlace.- http://galeon.com/juegomesa/JSMulin.html

Saludos y P&P

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #11 en: 16 de Octubre de 2013, 13:49:27 pm »
Que curioso.. pensaba hacer un juego y acabe haciendo un lanzador de dados online.

Las ventajas de crear un programa online son varias, ya que puedo hacer accesible el mismo a todo tipo de plataformas .

En esta ocasión no dejo código podéis extraer el codigo >Herramientas >Desarrollador web>Código fuente de la pagina.

El listado de archivos:

JSMulin.html   El html que contiene el código y gestión de datos.
 Carpetas :
jsM -- Carpeta que contiene los script's de los dados correspondientes.
images -- Carpeta que contiene las imágenes de los dados.

Depurados errores e incluidos unos cuantos dados de juegos.

Enlace.- http://galeon.com/juegomesa/MulinJs/JSMulin.html

Como ya sabéis está en un servidor gratuito y no puedo manejar los banners.

Saludos y P&P

« Última modificación: 16 de Octubre de 2013, 16:31:46 pm por ximocm »

Desconectado ximocm

  • Administrador
  • Veterano
  • *****
  • Mensajes: 1569
    • Imprimir y Jugar
Re: Programa un juego sencillo con Yuyu
« Respuesta #12 en: 16 de Octubre de 2013, 16:33:03 pm »
Muy bueno. Te he modificado el enlace ya que ponia .htm en vez de .html :-D
"Matar jugando al rol es tan absurdo como el suicidio por arruinarse en el Monopoly"

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #13 en: 17 de Octubre de 2013, 17:03:26 pm »
Muy bueno. Te he modificado el enlace ya que ponia .htm en vez de .html :-D

Muchas gracias Ximocm, si no fuera por ti la mitad de las veces colocaba mal el enlace, que despistado sorry.

No tengo mucho tiempo, pero sigo trasteando el código.

Si alguien se molesto en comprobar el lanzador, comprobara que si elegimos lanzar mas de 10 o 12 dados, la pantalla se alarga de forma horizontal para incluir todos los dados, de forma que si lanzamos 100, 300, 500 dados, la pantalla se hace interminable y desde luego contar las figuras casi imposible.

Había que dar una solución a este problema y decidí incluir algo de CSS para solventar la presentación, que si bien se podía haber solucionado con <TABLE><TD><TD> MUCHOS <TD></TABLE> , esto podía llegar a ser un trabajo de chinos y con mucha demasiada programación extra, por no decir inviable.

El resultado:


ahora un contenedor CSS, se encarga de que todos los dados estén en una sola ventana, y ademas incluí un nuevo botón (Resultados) que llama a un alert y nos muestra el resultado total de los dados obtenidos.

Con tiempo lo comparto, ahora no me va a dar tiempo.

Saludos P&P

Desconectado ximocm

  • Administrador
  • Veterano
  • *****
  • Mensajes: 1569
    • Imprimir y Jugar
Re: Programa un juego sencillo con Yuyu
« Respuesta #14 en: 17 de Octubre de 2013, 17:35:32 pm »
Si alguien se molesto en comprobar el lanzador, comprobara que si elegimos lanzar mas de 10 o 12 dados, la pantalla se alarga de forma horizontal para incluir todos los dados, de forma que si lanzamos 100, 300, 500 dados, la pantalla se hace interminable y desde luego contar las figuras casi imposible.

Hombre, yo he mirado el lanzador pero es posible que otros se pierdan en los banners de arriba :-D :-D :-D

Yo no me preocuparia en poner tanto dado, porque no creo que se usen tantos en un juego normal. Eso si, cada vez pinta mejor.
"Matar jugando al rol es tan absurdo como el suicidio por arruinarse en el Monopoly"

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #15 en: 18 de Octubre de 2013, 01:21:20 am »
Hombre, yo he mirado el lanzador pero es posible que otros se pierdan en los banners de arriba :-D :-D :-D

Yo no me preocuparia en poner tanto dado, porque no creo que se usen tantos en un juego normal. Eso si, cada vez pinta mejor.

XDXDXDXD Vaya flotadores que portan la señoras....

Bromas a parte....

Modificado y mejorado, esta en plan Beta para su testeo, lo de los banners como ya sabéis no lo puedo evitar, lo dejamos una temporada a prueba.


Creo que de momento se puede dejar así, la verdad es que pienso que comparado con otros lanzadores conocidos, podemos decir que hemos subido un renglón.

Si merece ya lo subiré a otro servidor gratuito que uso donde los banners, por lo menos, se pueden cerrar.

Enlace.- http://galeon.com/juegomesa/MulinJs/JSMulin.html

Saludos y P&P
« Última modificación: 18 de Octubre de 2013, 10:23:23 am por Yuyu »

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #16 en: 18 de Octubre de 2013, 13:28:19 pm »
Ok, hasta aquí todo muy bonito pero....

Yo cuando juego al Runebound utilizo los dados del juego y dos dados de diez caras....

Perfecto no hay problema, ya hice alusión en una respuesta anterior a la reutilización de código que esta vez la haré extensible al programa.

Para hacer esto cada usuario se puede adaptar un sencillo Html:

Código: [Seleccionar]
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Adaptando Juegos</title>
<frameset  ROWS="300,300,*">
<frame name="frame1" src=" http://galeon.com/juegomesa/MulinJs/JSMulin.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="frame2" src=" http://galeon.com/juegomesa/MulinJs/JSMulin.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
</head>
<body>
</body>
</html>

El resultado es:


de esta forma divido en dos la pantalla y tengo todos los dados necesarios en una sola pagina, podéis copiar y pegar el código en un block de notas, guardar con el nombre que mas os guste y ya tendréis disponible la pagina adaptada para jugar.

El código están simple que casi no merece ser comentado, pero si queréis cambiar el tamaño de las FRAMES, se deberá cambiar <frameset  ROWS="300,300,*"> colocando los valores que creáis convenientes.

Pero... ¿y si juego al Avanzado Heroquest y necesito 2 lanzadores de dados HQ y un par de dados de 12 caras?

pues mas de lo mismo:
Código: [Seleccionar]
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Adaptando Juegos</title>
<frameset  ROWS="200,200,200">
<frame name="frame1" src=" http://galeon.com/juegomesa/MulinJs/JSMulin.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="frame2" src=" http://galeon.com/juegomesa/MulinJs/JSMulin.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="frame3" src=" http://galeon.com/juegomesa/MulinJs/JSMulin.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
</head>
<body>
</body>
</html>

lo único que hice fue incluir un FRAME mas, el resultado :


cierto es que el servidor no ayuda mucho con sus banners, pero como ya dije eso no lo puedo controlar ya que es el servidor quien las incluye y no puedo eliminarlas por ser un servicio gratuito, intentare pasar el programa a otro servidor para ver como se comporta.

Y poco más con respecto a MuliJS, espero que os pueda servir o por lo menos pueda servir de salvaguarda por si en una partida, por lo que sea no tenemos dados.

Sobre navegadores es cierto que no todos interpretan el programa, con los que he probado funcionan bien, y en Android también (solo probé con un Samsung Galaxy Tab3 y un Acer Iconia B1) por lo tanto se agradecería si lo probáis con otros que lo expusierais por aquí, aunque para que funcione el secreto sera el navegador que utilicemos, independientemente del sistema operativo que tengamos ya que en Linux, Windows y Mac también puede funcionar.

Y esto es to, esto es to, amigos...

Saludos y P&P

Desconectado ximocm

  • Administrador
  • Veterano
  • *****
  • Mensajes: 1569
    • Imprimir y Jugar
Re: Programa un juego sencillo con Yuyu
« Respuesta #17 en: 21 de Octubre de 2013, 20:09:01 pm »
Vaya trabajo impresionante. Se ven las posibilidades con pocos pasos aunque aprender todo esto en cuatro mensajes me parece un poco complicado. Luego te pongo un enlace por el tema del host. :-D
"Matar jugando al rol es tan absurdo como el suicidio por arruinarse en el Monopoly"

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #18 en: 22 de Octubre de 2013, 01:10:01 am »
Vaya trabajo impresionante. Se ven las posibilidades con pocos pasos aunque aprender todo esto en cuatro mensajes me parece un poco complicado. Luego te pongo un enlace por el tema del host. :-D

Que razón tienes, quien espere aprender a programar videojuegos con estos datos es cierto que lo va a tener difícil, la primera parte es más asequible a todos los que no programamos y se puede hacer algo sencillo en plan "Elige tu propia Aventura".

Para crear programas más complejos, deberemos tener conocimientos avanzados en programación y eso no se puede aprender con cuatro códigos mal puestos y mucho menos en dos días.

Pero también puede servir para saber donde esta el limite de cada uno, si estos cuatro códigos nos superan, es mejor dedicarse a otra cosa, la petanca puede llegar a ser un juego apasionante.

Saludos y P&P

Desconectado ximocm

  • Administrador
  • Veterano
  • *****
  • Mensajes: 1569
    • Imprimir y Jugar
Re: Programa un juego sencillo con Yuyu
« Respuesta #19 en: 22 de Octubre de 2013, 08:38:42 am »
Que razón tienes, quien espere aprender a programar videojuegos con estos datos es cierto que lo va a tener difícil, la primera parte es más asequible a todos los que no programamos y se puede hacer algo sencillo en plan "Elige tu propia Aventura".

Creo que esa senda que marcaste es la idonea, puedes hacer un librojuego y ademas ya estan los conocimientos para crear  un lanzador de dados para algunos que lo requieran.

Citar
Para crear programas más complejos, deberemos tener conocimientos avanzados en programación y eso no se puede aprender con cuatro códigos mal puestos y mucho menos en dos días.Pero también puede servir para saber donde esta el limite de cada uno, si estos cuatro códigos nos superan, es mejor dedicarse a otra cosa, la petanca puede llegar a ser un juego apasionante.

Si, hacer un juego de petanca en 3D y con fisicas debe ser apasionante :-D :-D :-D
Nadie tiene limites aparte del tiempo, si consigues que alguien le pique el gusanillo de la programacion. En cuanto consigas hacer una cosa, ya empiezas a aprender otros lenguajes que te lo permitan hacer mejor y ya no paras.
"Matar jugando al rol es tan absurdo como el suicidio por arruinarse en el Monopoly"

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #20 en: 25 de Octubre de 2013, 17:41:13 pm »
Un saludo atod@s.

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.-



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

Saludos y P&P

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #21 en: 25 de Octubre de 2013, 19:31:38 pm »

DungeonTHML



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
« Última modificación: 26 de Octubre de 2013, 13:14:42 pm por Yuyu »

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #22 en: 27 de Octubre de 2013, 11:59:56 am »
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 class="Malo" 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. Saludos

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #23 en: 28 de Octubre de 2013, 12:31:14 pm »

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.

Un saludo

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #24 en: 28 de Octubre de 2013, 17:17:58 pm »
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.

Un saludo

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #25 en: 28 de Octubre de 2013, 18:50:14 pm »
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 class="heroe" id="heroe" src="images/Hero.png">
<img class="Espada" id="Espada" src="images/Espada.png" onmousemove="ocultar_imagen(id)">
<img class="Llave" id="Llave" src="images/Llave.png" onmousemove="ocultar_imagen(id)">
<img class="Libro" id="Libro" src="images/Libro.png" onmousemove="ocultar_imagen(id)">
<img class="Teleport" id="Teleport" src="images/Telepor.png" onmousemove="ocultar_imagen(id)">
<img class="Malo" id="Malo" src="images/Malo.png" onmousemove="ocultar_imagen(id)">
</script>
<br>
</td>
<td style="vertical-align: top;">
<textarea class="mensajes" 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" class="Norte" value="N"onclick="Norte(n)" ><br>
<input type="button" class="Oeste" value="O"onclick="Oeste(n)" >
<input type="button" class="Este" value="E"onclick="Este(n)" ><br>
<input type="button" class="Sur" value="S"onclick="Sur(n)" ><br><br><br><br>
<input type="button" class="Algo" 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 class="Arca" id="Arcon" src="images/Mochila.png">Mochila
<br>
<textarea name="Pespada" id="Pespada" cols="3" rows="1"></textarea>
<img class="Espados" id="Espados" src="images/Espada.png"><br><br>

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

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

<img class="Tempo" 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

Desconectado ximocm

  • Administrador
  • Veterano
  • *****
  • Mensajes: 1569
    • Imprimir y Jugar
Re: Programa un juego sencillo con Yuyu
« Respuesta #26 en: 29 de Octubre de 2013, 09:43:54 am »
No esta nada mal el ejemplo, se puede decir que es como un juego de aventuras o librojuego avanzado y ahi se puede desplegar mucha creatividad :-D

El servidor no esta mal, hasta la publicidad que me aparecio salio rebotando como un dado :D :D :D (modo ironico off)

Cuando puedas prueba el otro que te di, no tiene publucidad ninguna.

Bien, ahora falta que en este hilo se sigan colgando cosas hechas por otros usuarios aprendidas en el curso....
"Matar jugando al rol es tan absurdo como el suicidio por arruinarse en el Monopoly"

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #27 en: 30 de Octubre de 2013, 10:25:59 am »
Cuando puedas prueba el otro que te di, no tiene publucidad ninguna.

Bien, ahora falta que en este hilo se sigan colgando cosas hechas por otros usuarios aprendidas en el curso....

Pues el servidor que me recomendaste es el mismo que ya tenia, suelo utilizar otros diferentes antes de pasar al servidor : http://www.freewebhostingarea.com/ que ofrece hasta 5G de almacenamiento ilimitado en tiempo y con la una propaganda controlada, aunque rebote por la pantalla, pero por lo menos se puede cerrar, cosa que no ocurre con la mayoría como ya vimos con el Galeon, que además es coloca banners de pornografía, cosa que no se hasta que punto es legal.

No es mi intención crear cursillos de JavaScript, solo aporto unas ideas y creo unas pequeñas directrices para quien lo desee pueda tener un punto de partida que no necesariamente debe coincidir con lo aquí expuesto.

Mi intención era mas bien, demostrar que se puede programar barato y de forma efectiva, por eso los programas los subo algún servidor para que quede constancia de que funcionan y como se suele decir "el movimiento se demuestra andando".

Ojo, que JavaScript no es la panacea en lo que a programación se refiere, tiene serias dificultadas cuando entramos con el tratamiento de archivos de acceso secuencial por ejemplo y otro no menos importante, es que nunca se ejecuta en el servidor, por lo tanto se debe cumplimentar con otros cuando tenemos que tratar con bases de datos o necesitamos que realice alguna acción en el lado del servidor. Yo intente incluir al dungeon un marcador de mejores puntuaciones, pero sin incluir algo de PHP no puedo.

De todas formas sigo pensando que mas barato imposible, hoy en día estamos en un mundo ampliamente volcado en la red y saber manejarse con cierta soltura, nos proporciona una cierta ventaja en este mundo de las tecnologías de la información y comunicación.

Vaya rollo que me he soltado..... pero no creo faltar a la verdad, aunque la verdad es el punto de vista que tenemos cada uno de nosotros, de lo que realmente percibimos del mundo real que nos rodea.

Saludos y P&P


Desconectado Danzabia

  • Experimentado
  • ****
  • Mensajes: 89
Re: Programa un juego sencillo con Yuyu
« Respuesta #28 en: 30 de Octubre de 2013, 18:13:45 pm »
Sencillamente genial y probando.

Chicos, ando un tanto liado con el trabajo, voy a ver si tengo un poco más de tiempo para ponerme al día.

Saludos.

Desconectado entofol

  • Veterano
  • *****
  • Mensajes: 142
Re: Programa un juego sencillo con Yuyu
« Respuesta #29 en: 08 de Noviembre de 2013, 21:43:38 pm »
Todavía ni lo he acabado de leer... os dejo esta prueba de que lo haré, lo haré (qué década, qué década XD)
____/\____/\___________________

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #30 en: 09 de Noviembre de 2013, 11:49:04 am »
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.

Saludos if Print && Play  XDXD

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
RiskExpress by Yuyu
« Respuesta #31 en: 10 de Noviembre de 2013, 23:45:10 pm »
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


Un saludo

Desconectado ximocm

  • Administrador
  • Veterano
  • *****
  • Mensajes: 1569
    • Imprimir y Jugar
Re: Programa un juego sencillo con Yuyu
« Respuesta #32 en: 12 de Noviembre de 2013, 00:40:19 am »
Tengo el pc un poco ocupado con el backup de 500GB, asi que apenas puedo hacer nada. No he respondido antes porque queria verificar algunas cosas que igual no estan correctas. Da la casualidad que tengo el juego, lo he jugado y pensaba hacer una futura version (cuando termine lo que tengo pendiente). :-D

Basicamente tiras los dados, eliges una carta y selecciona los dados de una linea de esa carta. Despues tiras el resto intentando completar una linea cada vez, apartando esos dados al conseguirla. Asi como esta la aplicacion, no sigue el orden, aunque bien se que es una alfa ;-)

A continuacion te pongo las reglas en que me baso... ¿vas a hacer IA?
un saludo



·  Tira  los  7 dados  y,  tras  ver el  resultado, elige  una  de  las cartas de  territorio que quieras conquistar (puede ser una del centro de la mesa o una que cualquier jugador tenga boca arriba frente a si). Para poder elegir una carta debes poder completar los requisitos de una de sus líneas con el resultado de los dados. Retira los dados que completen la línea elegida y ponlos a la derecha de esa carta. Tu objetivo será  completar  todas  las  líneas  de  esa  carta  (solo  deberás  obtener  el  símbolo  en  el  circulo  si  estas intentando reconquistar una carta de cualquier jugador). Solo puedes completar una línea en cada tirada.  La infantería no tiene que ser completada exactamente, un resultado de 7 infanterías, completa una línea con 7 soldados o menos.
 
· Tira los dados que te hayan quedado, deberás completar el resultado de otra de las líneas de la carta elegida. Si lo consigues, retira los dados, déjalos a la derecha de la carta y continúa tirando los dados sobrantes.  Si  no  lo  consigues,  retira  uno  de  los  dados  (déjalo  en  un  extremo  de  la  zona  de  juego, separado de la carta que estas intentando conquistar para que no se mezclen) y continúa con el resto. Continúa tirando y retirando dados hasta que se acaben o consigas completar todas las filas.
 
·  Si  completaste  todas  las  filas,  has  conquistado  esa  área  del  continente.  Coge  la  carta  y  ponla  boca arriba en frente de ti. Si en ese momento tienes todas las cartas de un continente, pon todas ellas boca abajo frente a ti, los demás jugadores ya no podrán intentar reconquistártelas.  
 
· Si no conseguiste completar todas las filas, tu turno acaba, pero deja los dados que están a la derecha de la carta. El siguiente jugador puede elegir tomar los 7 dados e intentar conquistar una carta de su elección, o tomar sólo los dados sobrantes (todos los que no estén a la derecha de la carta) y continuar con la conquista que había comenzado (y no finalizado) el jugador anterior aprovechándose de las filas completadas.
"Matar jugando al rol es tan absurdo como el suicidio por arruinarse en el Monopoly"

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #33 en: 12 de Noviembre de 2013, 13:33:41 pm »
Como experimento no intente recrear el juego tal y como fue creado, aunque corrígeme si me equivoco por que ahora de memoria no lo recuerdo, creo que si en tu primera tirada de dados conseguías las figuras necesarias para conseguir un territorio, esto podía ser factible y es como ahora está el programa, de hecho el turno pasa al siguiente jugador o maquina.

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

Desconectado ximocm

  • Administrador
  • Veterano
  • *****
  • Mensajes: 1569
    • Imprimir y Jugar
Re: Programa un juego sencillo con Yuyu
« Respuesta #34 en: 19 de Noviembre de 2013, 09:41:33 am »
Yo creo que la IA es algo secundario cuando se dispone de la posibilidad online. En caso contrario seria indispensable :-D
"Matar jugando al rol es tan absurdo como el suicidio por arruinarse en el Monopoly"

Desconectado Yuyu

  •  
  • Veterano
  • *
  • Mensajes: 979
  • Como no sabían que era imposible lo hicieron.
    • YuyuWeb
Re: Programa un juego sencillo con Yuyu
« Respuesta #35 en: 20 de Noviembre de 2013, 16:53:01 pm »
Podría parecer que el programa no está dotado de IA y sin embargo no es así.

La IA gestiona todas las cartas del juego.

La IA gestiona el resultado obtenido en los dados.

La IA gestiona las puntuaciones obtenidas del jugador como de la maquina.

La IA gestiona cuando el jugador o la maquina no obtuvieron territorios en sus respectivas jugadas pasando el turno.

La IA gestiona los turnos de juego y valora cuando el jugador o la maquina se hacen con una carta de territorio.

La IA muestra tanto al usuario como en el turno de la maquina, las cartas de territorio que pueden elegir,  mostrando un reborde de diferente color para las cartas mas favorables con los resultados obtenidos.

La IA repasa la lista de elementos de las cartas disponibles en cada ronda para que el jugador y la maquina pueda elegir el caso mas favorable.

La IA ademas debe ser capaz de gestionar los datos resultantes tanto para el jugador como para la maquina, mostrando en sus marcadores los resultados de forma independiente.

La IA gestiona los puntos obtenidos del jugador como de la maquina y debe ser capaz de descontar los puntos de ambos cuando la carta territorio es reconquistada.

La IA es capaz de saber sobre que carta de territorio se pulso y asignar al jugador o maquina la carta que anteriormente fue seleccionada.

Hay unas cuantas cosas más, pero lo que esta claro, es que no es la IA del DeepBlue, es una inteligencia artificial "muy sencilla", que no debería confundirse con la inexistencia de la misma.

Otra cosa es que no haga lo que nosotros deseamos, pero es bien sencillo de arreglar, basta con editar el código y cambiar los algoritmos que deseemos por otros diseñado por nosotros, ya que todo el programa esta disponible a todos los usuarios que lo deseen.

Saludos y P&P

Desconectado ximocm

  • Administrador
  • Veterano
  • *****
  • Mensajes: 1569
    • Imprimir y Jugar
Re: Programa un juego sencillo con Yuyu
« Respuesta #36 en: 22 de Noviembre de 2013, 08:31:17 am »
La IA repasa la lista de elementos de las cartas disponibles en cada ronda para que el jugador y la maquina pueda elegir el caso mas favorable.

Solo estoy de acuerdo en este punto, cuando el pc elige para la maquina la carta mas favorable. Lo demas es un asistente o reglas implementadas.

Ya lo comentamos en el otro post, cuando me preguntaste si 22 manzanas tenia IA y yo decia que no. Para mi, ese concepto lo aplico cuando el PC toma decisiones o sustituye a un jugador humano.

Por ejemplo, no se puede mover en diagonal y el programa no te lo permite. Eso es una restriccion. Elegir una carta como la mas favorable para jugar o determinar cual es el mejor movimiento para una ficha es una decision :-D

Y asi a lo bestia, la IA debe sustituir a un oponente humano, moviendo elementos, tomando decisiones, buscando la mejor estrategia ganadora, etc. Bueno, ese es tan solo mi punto de vista.... ;-)
"Matar jugando al rol es tan absurdo como el suicidio por arruinarse en el Monopoly"

 

anything