Free Web Hosting
Creando juegos de mesa con JavaScript/Css
//1.- Ejemplo de código para crear una baraja.         
 
var Croupier = {};

Croupier.cartasNuevas = function (){

this.cartas = [];
var palos = ["", "", "", ""];
var figuras=["A","2","3","4","5","6","7","8","9","10","j","q","k"];
var valores = [20, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 17];

for (var p = 0; p < palos.length; p=p+1){	
 for (var f = 0; f <= 12; f=f+1){
  this.cartas[this.cartas.length] =
  {figura: figuras[f], palo: palos[p], valor: valores[f]};
		}
	}
};

Creando una Baraja




La biblioteca de funciones se crea con la siguiente variable, está vacia, y necesita rellenarse de datos.

var Croupier = {};

Esta es la funcion encargada de crear una nueva baraja, para ello se apoya en los datos que se le quieran dar a la carta.
Croupier.cartasNuevas = function (){}

Dentro de la función, la primera sentencia hace referencia al objeto cartas, este se crea vacío para contener las cartas creadas. Se debe diferenciar entre el contenedor de objetos Croupier, y el array de las cartas... (this.cartas) que será la encargada de almacenar las mismas.
Croupier.cartasNuevas = function (){
     
     this.cartas = [];

Otra propiedad que generalmente compone una carta será el Palo, para ello se crea el correspondiente array. Aclarar que se está utilizando caracteres ascii extendidos, por lo que puede que no en todos los navegadores pueda funcionar correctamente, en caso de problemas, reemplazar por texto plano entrecomillado, por ejemplo ("O" para Oros, o "E" para Picas).
var palos = ["", "", "", ""];

Las figuras representan al texto de las cartas As para el 1 o JQK, si es otro tipo baraja se puede cambiar.Este array por tanto contiene cada uno de los valores literales que se va asignar a las cartas.
var figuras=["A","2","3","4","5","6","7","8","9","10","j","q","k"];

Para que cada carta tenga un valor numérico se crea el array valores, un ejemplo.- A(As)=20. El valor[0] corresponde a 20 y figuras[0] al "A".
var valores = [20, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 17];	

Una vez aclarados los datos de las cartas, la baraja esta lista para crearse, a nivel código con un par de bucles creamos los naipes de la baraja en el array, cartas[], el primer bucle gira con los palos y el segundo asigna las figuras y los valores.
for (var p = 0; p < palos.length; p=p+1){	
for (var f = 0; f <= 12; f=f+1){
 this.cartas[this.cartas.length] =
  {figura: figuras[f], palo: palos[p], valor: valores[f]};
}
}

Mostrando la Baraja




Ahora que la baraja está creada podemos echar un vistazo al contenido de la misma recorriendo el array para comprobar que todo es correcto. En la biblioteca de funciones Croupier, creamos la función correspondiente, está recorre el array y lo muestra en la consola web.
Croupier.mostrarcartas=function () {

for(var n = 0; n < this.cartas.length;n++){	
 var cosa=this.cartas[n].palo+"/"+this.cartas[n].valor +"/" +this.cartas[n].figura;
  console.log(n+"-"+cosa+"\n")};
	
}

Este es un buen momento para abrir la consola web y comprobar lo creado, en diferentes navegadores, las teclas de acceso rápido pueden diferir sensiblemente, por lo general: CTRL+MAY+(I,J,K), con estas posibles combinaciones se abre la consola web del navegador.
//Se puede copiar/pegar este código, en la solapa Resultados.

var Croupier = {}; Croupier.cartasNuevas = function (){ this.cartas = []; var palos = ["", "", "", ""]; var figuras=["A","2","3","4","5","6","7","8","9","10","j","q","k"]; var valores = [20, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 17]; for (var p = 0; p < palos.length; p=p+1){ for (var f = 0; f <= 12; f=f+1){ this.cartas[this.cartas.length] = {figura: figuras[f], palo: palos[p], valor: valores[f]}; } } }; Croupier.mostrarcartas=function () { for(var n = 0; n < this.cartas.length;n++){ var cosa=this.cartas[n].palo+"/"+this.cartas[n].valor + "/" +this.cartas[n].figura; console.log(n+"-"+cosa+"\n")}; }

Pulsa para mandar a Resultados

Ahora... una vez pulsado sobre "mandar a Resultados", cambiar de solapa a Resultados, y en la consola web del navegador escribir y pulsar "enter":

Croupier.escribePantalla()

La pantalla muestra un juego vacío sin iniciar, hasta que la función Croupier.repartirMano() ejecute el código que muestra el resultado en pantalla. Este puede variar su presentación dependiendo del navegador, se puede de esta manera comenzar a jugar con ella.

Antes de seguir con el código para mostrar en pantalla, se van a incluir los datos que corresponden a dos jugadores con el fin de repartir una mano de cartas a cada uno, el primer jugador será la maquina y el segundo humano.
var Croupier = {};
var mano = [];
var manoCroupier = [];
var puntos = 0, punto2 = 0;
var partMaq = 0, partJug = 0;

La primera linea ya es conocida Biblioteca... La segunda crea un contenedor de cartas para la mano del jugador. La tercera hace lo mismo con la maquina, de ahora en adelante Croupier. La cuarta linea indica donde se almacenarán los "puntos" obtenidos por cada jugador. La quinta linea indica donde se almacenarán las "partidas/rondas" obtenidas por cada jugador.
Este es el código con jugadores, para que el ejemplo funcione debemos crear una baraja, repartir cartas y ver como queda en pantalla. Por este motivo la consola web del navegador debe estar habilitada, para poder introducir simples ordenes y que se ejecuten conforme a lo dispuesto en el código.
//NO copiar/pegar este código, 
utiliza caracteres de escape que no interpretan los navegadores.

var Croupier = {}; var mano = []; var manoCroupier = []; var puntos = 0; var punto2 = 0; var partMaq=0, partJug=0; Croupier.cartasNuevas = function (){ this.cartas = []; var palos = ["", "", "", ""]; var figuras=["A","2","3","4","5","6","7","8","9","10","j","q","k"]; var valores = [20, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 17]; for (var p = 0; p < palos.length; p=p+1){ for (var f = 0; f <= 12; f=f+1){ this.cartas[this.cartas.length] = {figura: figuras[f], palo: palos[p], valor: valores[f]}; } } }; Croupier.repartirMano = function (){ numeroCarta = Math.floor(this.cartas.length * Math.random ()); mano [0] = this.cartas[numeroCarta]; this.cartas.splice(numeroCarta,1); numeroCarta = Math.floor(this.cartas.length * Math.random ()); manoCroupier [0] = this.cartas[numeroCarta]; this.cartas.splice(numeroCarta,1); puntos=0; punto2=0; Croupier.escribePantalla(); }; Croupier.escribePantalla = function (){ //Codigo para mostrar en pantalla document.getElementById('contenido4').innerHTML= "<h3>miniJack-21<h6> by FMauriz\nCartas del Croupier ("+punto2+")<hr>"; for (var i = 0; i <br>Cartas del Jugador ("+puntos+")<br><hr>"; for (var i = 0; i <br><br><h6> partidas ganadas Jug> "+partJug+" Cop>"+partMaq+"<h6>"; //Este es el codigo para mostrar las cartas que hay en la baraja. document.getElementById('contenido4').innerHTML=document.getElementById('contenido4').innerHTML+"<h6> Cartas en la baraja > "; for (var n = 0; n < this.cartas.length; n++){ var cosa=this.cartas[n].palo+"/"+this.cartas[n].valor +"/" +this.cartas[n].figura; document.getElementById('contenido4').innerHTML=document.getElementById('contenido4').innerHTML+" ("+ cosa+") ";} };
Pulsa para mandar a Resultados


La Lógica mínima




Bien la idea es crear un mini-BlackJack.
Para repartir cartas y comenzar una nueva Ronda, la función Croupier.repartirMano() se encarga de obtener una carta al azar para el Croupier y otra, para el jugador humano, pasa la información a sus respectivas manos y elimina las cartas elegidas de la baraja "cartas[]".

A continuación coloca los puntos de ambos a 0, para comenzar una nueva ronda. Por ultimo llama a la función Croupier.escribePantalla() que se encarga de mostrar los datos en pantalla. Esta es la diferencia con el código anterior, el Croupier ya carga los datos y reparte una mano para comenzar la partida.
Croupier.repartirMano = function (){
	
//-->Escoge una carta aleatoria para el jugador.
	numeroCarta = Math.floor(this.cartas.length * Math.random ());
	mano [0] = this.cartas[numeroCarta];
	this.cartas.splice(numeroCarta,1);
	
//-->Escoge una carta aleatoria para el Croupier.			
	numeroCarta = Math.floor(this.cartas.length * Math.random ());
	manoCroupier [0] = this.cartas[numeroCarta];
	this.cartas.splice(numeroCarta,1);			
	
//-->Coloca los marcadores a 0			
	puntos=0;
	punto2=0;
	
//-->Llamada a la función que muestra los resultados en pantalla.	
	Croupier.escribePantalla();	

};

Pero con tan solo este código no es suficiente para poder jugar una partida de forma correcta, el programa debe de ser capaz de valorar jugadas o servir más cartas a los jugadores, la intención es crear un programa lo mas fácil posible y que a la par, sea posible jugar con el.

Resumen:
A.- Se preparan los datos necesarios para crear las cartas de la baraja para el juego. En este caso 52 cartas francesas con valores para el As("A") es de 20 puntos, y 12,14 y 17 para J,Q,K.
B.- Se preparan los datos del Jugador y Croupier, este consta de un contador de puntos y otro contador para las partidas ganadas.
C.- Se crea una baraja de cartas con Croupier.cartasNuevas(), esta función crea una nueva baraja con los datos indicados.
D.- Se reparte una carta a cada uno de ellos con la función Croupier.repartirMano() y se ponen los contadores a 0.
E.- Se muestra en pantalla el estado de la partida, la función encargada es, Croupier.escribePantalla()


Ayuda y más Cartas




Como se puede comprobar, prácticamente casi toda la iteración tiene lugar con la consola web del navegador. Se escribe el comando correspondiente y el ordenador lo interpreta, de forma que una buena idea puede ser crear una Ayuda que de forma resumida muestre los comandos que se van a utilizar.

Para crear una ayuda simple que muestre su resultado en una CajaMensajes se crea la siguiente función.
Croupier.ayuda = function (){
alert("*****(Ayuda de miniJack-21)*****\n\n*Iniciar partida\nEscribir en consola > Croupier.repartirMano() \n\n*Pedir carta\nEscribir en consola > Croupier.mascartas()\n\n*Puntuar o Pasar turno...\nEscribir en consola > Croupier.puntuar()\n\n\nOtras:\n*Nueva Partida\nEscribir en consola > NuevaPartida()\n\nAyuda\nEscribir en consola > Croupier.ayuda()\nSi se desea una nueva baraja...\nEscribir en consola > Croupier.cartasNuevas()\n");
};

Copiando y pegando el código en la consola web se puede ver el resultado de esta función, pero...

Generalmente, cuando se está creando la lógica del juego, todo el trabajo se suele realizar en "consola", de forma que el programador, necesita saber los resultados y comprobar que el código funciona, para cambiar la presentación de pantalla a consola es tan sencillo como cambiar "alert" por "console.log" que mostrara los resultados en la consola del navegador y, que a lo largo del desarrollo nos será de gran ayuda para mostrar datos y detectar errores.
Croupier.ayuda = function (){
console.log("*****(Ayuda de miniJack-21)*****\n\n*Iniciar partida\nEscribir en consola > Croupier.repartirMano() \n\n*Pedir carta\nEscribir en consola > Croupier.mascartas()\n\n*Puntuar o Pasar turno...\nEscribir en consola > Croupier.puntuar()\n\n\nOtras:\n*Nueva Partida\nEscribir en consola > NuevaPartida()\n\nAyuda\nEscribir en consola > Croupier.ayuda()\nSi se desea una nueva baraja...\nEscribir en consola > Croupier.cartasNuevas()\n");
};

Copiando y pegando el código en la consola web se puede ver el resultado.

Una vez visto como se pueden incluir diferentes tipos de ayuda, lo siguiente es poder pedir una carta al Croupier.
La carta debe ser extraída de la baraja de forma aleatoria y colocada en la mano del jugador, el naipe obtenido se borrará de la baraja, por ultimo reescribe la pantalla y también muestra el dato en consola.
Con una carta para cada contendiente, no es suficiente para crear un juego mini-BlackJack, se hace necesario un código que reparta una carta al jugador, para superar la jugada del Croupier y ganar el juego.
La función encargada de repartir cartas al jugador, valora si tiene más de 5 cartas en mano, además de comprobar que en la baraja hay cartas disponibles, en caso contrario, solicita una nueva baraja.
Croupier.mascartas = function (){

 if(mano.length <=5){

  if(this.cartas.length<=0){Croupier.cartasNuevas()};   
 
  var alea= Math.floor(this.cartas.length * Math.random ());

  var newLength = mano.push((this.cartas[(alea)]));

  this.cartas.shift();

  Croupier.escribePantalla();

  return "Su carta gracias...("+(this.cartas.length)+")>en baraja."
 }; 
};

Copiando y pegando el código en la consola web se puede ver el resultado de esta función, pero...

No es el objetivo de esta guía el uso del comando "return", y se aconseja su estudio para un uso correcto. Para este caso he dejado la linea correspondiente para ver un ejemplo de su uso.
De momento solo se reparten cartas al jugador, ¿ y al Croupier?, es lo ultimo que queda para crear el juego, la toma de decisiones por parte del Croupier se basará en una IA muy simple y se encargará de coger cartas si es necesario, a la par que valora la jugada de ambos contendientes.
Se puede decir decir que es un 2 en 1, valora y solicita carta si es necesario.


IA-cabando que es...




La IA no puede ser más simple, con un poco de imaginación se puede mejorar mucho, pero eso lo dejo a cargo de cada usuario, el código utilizado es el mínimo para correr la aplicación con certeza, teniendo en cuenta que como es un black-jack el objetivo es conseguir 21 puntos justos, con las cartas que se tengan en mano, si la puntuación es menor que la del Croupier o el jugador se pasa de 21 puntos, pierde el juego.
//NO copiar/pegar este código, 
utiliza caracteres de escape que no interpretan los navegadores.

Croupier.puntuar = function(){ // Si los puntos del Croupier son menores que los del jugador y // además es menor de 21 y el jugador no se ha pasado. if(punto2 < puntos && punto2 <= 21 && puntos < 22){ manoCroupier[manoCroupier.length] = this.cartas [Math.floor(this.cartas.length * Math.random ())]; this.cartas.splice(manoCroupier,1); } Croupier.escribePantalla(); // Valora los puntos del jugador si se ha pasado if(puntos >21){ document.getElementById('cuerpo').innerHTML= document.getElementById('cuerpo').innerHTML+"<br><br>El Jugador se pasa GANA el Croupier. <br>"; mano =[]; manoCroupier=[]; partMaq=partMaq+1; } else if(puntos ==21 && (punto2>21 || punto2<=20)){ document.getElementById('cuerpo').innerHTML= document.getElementById('cuerpo').innerHTML+"<br><br>El Jugador hace BLACK-JACK *** Bonus x 2. <br>";} // Valora los puntos del Croupier si se ha pasado if(punto2 >21){ document.getElementById('cuerpo').innerHTML= document.getElementById('cuerpo').innerHTML+"<br><br>El Croupier se pasa GANA el Jugador. <br>"; mano=[]; manoCroupier=[]; partJug=partJug+1; } else if (punto2 ==21 && (puntos>21 ||puntos<=20)){ document.getElementById('cuerpo').innerHTML= document.getElementById('cuerpo').innerHTML+"<br><br>El Croupier hace BLACK-JACK *** <br>";} return puntos+" "+punto2; };

La primera parte evalúa los puntos del jugador ("punto") y comprueba que no es mas alta que la del Croupier,("punto2"), en la misma sentencia sumamos una booleana ("&&") que obliga a que el Croupier compruebe que no se haya pasado, y con otra booleana más, comprueba que el jugador no se haya pasado de los 21 puntos.
Una vez pasado el filtro y si cumple las condiciones anteriores, el Croupier extrae una carta aleatoria de la baraja la coloca en la mano del Croupier y por ultimo la borra de la baraja.
if(punto2 < puntos && punto2 <= 21 && puntos < 22){
  manoCroupier[manoCroupier.length] = this.cartas [Math.floor(this.cartas.length * Math.random ())];
  this.cartas.splice(manoCroupier,1);
 }	


Hasta ahora, el código solo pediría cartas, para que tome decisiones necesita los dos siguientes algoritmos, el primero se encarga de comprobar el estado del Jugador y, el segundo del Croupier.
El siguiente código comprueba si el jugador se pasa de 21 puntos, el Croupier gana directamente, pero sino es así, comprueba si el que se ha pasado es el Croupier o si están empatados a 21 puntos, en cuyo caso la ventaja será para el jugador.
Las cartas del jugador y el Croupier se dejan vacías para iniciar una nueva ronda y, se suma la partida ganada a su contador.
Para el caso en el que el jugador haya conseguido black-jack, o lo que es lo mismo, 21 puntos justos, el código evalúa el estado del Croupier ya sea haya pasado ("punto2>21") o con la booleana ("|| punto2<=20") comprobar que es menor de 20, que no supera el 21 del jugador y por panto el Black-Jack.
if(puntos >21){

  document.getElementById('cuerpo').innerHTML=
  document.getElementById('cuerpo').innerHTML+"<br><br>El Jugador se pasa GANA el Croupier. <br>";
 
  mano =[];
  manoCroupier=[];

  partMaq=partMaq+1;

  } else if(puntos ==21 && (punto2>21 || punto2<=20)){

  document.getElementById('cuerpo').innerHTML=
  document.getElementById('cuerpo').innerHTML+"<br><br>El Jugador hace BLACK-JACK *** Bonus x 2. <br>";
}


La segunda parte hace lo mismo que el código anterior, pero en este caso es el Croupier el que comprueba los resultados.
if(punto2 >21){

 document.getElementById('cuerpo').innerHTML=
 document.getElementById('cuerpo').innerHTML+"<br><br>El Croupier se pasa GANA el Jugador. <br>";

 mano=[];
 manoCroupier=[];

 partJug=partJug+1;

} else if (punto2 ==21 && (puntos>21 ||puntos<=20)){

  document.getElementById('cuerpo').innerHTML=
  document.getElementById('cuerpo').innerHTML+"<br><br>El Croupier hace BLACK-JACK *** <br>";}

 return puntos+"   "+punto2;
 

Este es en definitiva el proyecto al completo, de momento solo admite comandos por consola web, pero es completamente operativo, este es un buen momento para probar integro el juego.

Directo a Resultados






Ahora con Imágenes




Para esta sección he utilizado una baraja francesa libre de derechos de autor, que se puede encontrar fácilmente por la red.
Para que las imágenes estén disponibles en el juego, se ha creado una carpeta "Cartas", que contiene los naipes, se han renombrado las cartas para adptarlas al juego y se han cambiado los símbolos "", "", "", "" por literales "c", "s", "h", "d" y de esta forma renombramos las cartas.

El único cambio necesario será Croupier.escribePantalla(), que ahora se encarga de mostrar imágenes, al refrescar la pantalla. Para que no se cruce con el código anterior del Balck-Jack, se han renombrado la funciones colocando un (2) al final de cada una. Si ya se ha practicado con el anterior, los comandos para su puesta en juego son los mismos, con la alteración comentada. Así por ejemplo, si deseamos repartir una nueva mano se deberá escribir en consola:

Croupier.repartirMano2

//NO copiar/pegar este código, 
utiliza caracteres de escape que no interpretan los navegadores.

Croupier.escribePantalla2 = function (){ puntos=0; punto2=0; for (var i = 0; i < mano.length; i++) { puntos = puntos + mano[i].valor; }; for (var i = 0; i < manoCroupier.length; i++){ punto2 = punto2 + manoCroupier[i].valor; }; document.getElementById('contenido4').innerHTML= "<h3>miniJack-21<h6> by FMauriz<h6>\nCartas del Croupier ("+punto2+")<hr />"; for (var i = 0; i < manoCroupier.length; i++){ document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+"<img src=Cartas/"+(manoCroupier[i].palo)+(manoCroupier[i].figura)+".png>"+" "}; document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+"<br><br>Cartas del Jugador ("+puntos+")<br><hr />"; for (var i = 0; i < mano.length; i++){ document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+"<img src=Cartas/"+(mano[i].palo)+(mano[i].figura)+".png>"+" "}; document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+"<br><br><br> <h6> partidas ganadas Jug> "+partJug+" Cop>"+partMaq+""; };


Enviar a Resultados.

A propósito del código, comentar que los contadores de puntos se colocan a 0, para inmediatamente refrescar con los valores que el Jugador y el Croupier llevan en la mano, antes de pasar los datos a pantalla.

Para cargar las imágenes se ha hecho coincidir el Palo y la Figura de cada carta, de forma que el As de diamantes corresponderá a (dA.png), el de corazones a (hA.png) o la Jota de trébol a (cj.png), con esta codificación se hace coincidir el nombre de las imágenes con el de las cartas.

El contenido de las manos de cada jugador dependerá de la cantidad de cartas que cada uno tenga en mano, para consultar la mano se puede recorrer el array con cualquier tipo de bucle. También por medio de la consola se puede realizar una consulta en concreto de un array como es el caso, mano[] o manoCroupier[], son un ejemplo.

console.log("Muestra la primera carta del Jugador "+(mano[0].palo)+(mano[0].figura))

Tan sólo resta que se carguen las imágenes con los datos indicados, por lo que se utiliza la siguiente formula para los elementos img (imagen).

Ej.- (< img src="Cartas/"+(mano[1].palo)+(mano[1].figura)+".png" >)

Como se puede comprobar el src, carga el recurso desde la carpeta "Cartas" que contiene las imágenes de todas las cartas para el juego. Es importante tener especial cuidado con las concatenaciones para que el código funcione como se espera.

La ultima linea del código se encarga de mostrar las partidas ganadas de ambos, Jugador y Croupier, que están a su vez recogidas en las variables, "partJug" , "partMaq", cerrando con esto la pantalla del mini-BlacJack 21.

Resumen:
A.- Se colocan los contadores de puntos a 0 de los dos, Jugador y Croupier.
B.- Se suman los puntos de Jugador y Croupier, recorriendo sus manos.
C.- Se crea la cabecera y se incluye el texto del Croupier con sus "puntos" y una linea.
D.- Se recorre la mano del (manoCroupier[]) y se muestra en pantalla.
E.- Se integra a continuación el texto "Cartas del Jugador", con sus correspondientes "puntos" y otra linea.
F.- Se recorre la mano del Jugador (mano[]), y se muestra en pantalla con imágenes.
G.- Se cierra la presentación con las partidas ganadas.


Y esto es todo amigos, queda código por depurar y otro tanto por mejorar, es muy aconsejable que se practique con lo expuesto, creando variaciones, que darán paso a otros juegos mejores y más complejos, es cuestión de imaginación y practica.

Recordar: Todo el trabajo hasta ahora se realiza en la consola web del navegador, el programa no funcionará sin los comandos adecuados en cada caso y, en caso de intentar lanzarse en un navegador al carecer de chasis html, tampoco funcionará, en la solapa códigos, se han incluido los enlaces para descargar entre otras posibilidades.

Directo a Resultados. Recordar que con Croupier.ayuda2(), se muestra la ayuda del juego.






Dispositivos Táctiles

Hasta ahora todo la iteración con la maquina ha tenido lugar a través de la consola web, afortunadamente con Html5, los navegadores modernos interpretan los "click" del ratón como "touch" en sistemas Android. Antes era mucho más complicado al tener que recurrir a escuchadores del tipo "EventListener", para recoger las pulsaciones del ratón. A continuación se deja enlace que recoge el estado de los navegadores web más utilizados a día de hoy sobre los eventos Touch, para poder determinar si el proyecto debe o no incluir el código para tener en cuenta estos eventos.

enlace.- https://caniuse.com/#feat=touch

Pero con lo visto hasta ahora y sin poder abrir consolas web en sistemas operativos Android, el desarrollador debe tener en cuenta este hecho, y otros, como por ejemplo, los "tooltip" de los que carece este sistema por no disponer de ratón.

Lo interesante de crear webs-App es que cualquier sistema operativo con un navegador relativamente moderno, puede interpretar el codigo y por tanto abarcar todo el abanico de sistemas con un solo programa. ¿Quién da más?.

Por tanto el siguiente paso que se va a dar en este proyecto, tiene que ver con dar la posibilidad a este tipo de sistemas de correr la aplicación, incluyendo unos botones para que recojan los eventos al ser pulsados.

Se puede decir que cazamos dos pájaros de un tiro, por un lado facilitamos el acceso de comandos, ya no es necesaria la consola, ahora el trabajo lo hace un "botón" y por otra parte, los mismos botones dan acceso a dispositivos táctiles, que interpreten los click como touch en sistemas como son los teléfonos móviles y tablets.

El código a incluir es muy sencillo:

//NO copiar/pegar este código, 
utiliza caracteres de escape que no interpretan los navegadores.


Croupier.escribePantalla3 = function (){ puntos=0; punto2=0; for (var i = 0; i < mano.length; i = i+1) { puntos = puntos + mano[i].valor; }; for (var i = 0; i < manoCroupier.length; i = i+1){ punto2 = punto2 + manoCroupier[i].valor; }; document.getElementById('contenido4').innerHTML= "<h3>miniJack-21<h6> by FMauriz<h6> \nCartas del Croupier ("+punto2+")<hr/>"; //////////////////////////////////////////////////// for (var i = 0; i < manoCroupier.length; i = i++){ document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+ ""+" "}; /////////////////////////////////////////////////// document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+ "<br><br>Cartas del Jugador ("+puntos+")<br><hr/>"; //////////////////////////////////////////////////// for (var i = 0; i < mano.length; i = i++){ document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+ "<img src=Cartas/"+(mano[i].palo)+(mano[i].figura)+".png>"+" "}; //////////////////////////////////////////////////// document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+ "<br><br><br><h6> partidas ganadas Jug> "+partJug+" Cop>"+partMaq+""; ////////////////////////////////////////////////////////////////////// // /// // INCLUYENDO BOTONES AL JUEGO /// // /// ////////////////////////////////////////////////////////////////////// /// En esta parte del código es donde se incluyen los botones. /// ////////////////////////////////////////////////////////////////////// document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+ "<input type='buttton' value='Repartir' onclick='Croupier.repartirMano3()'>"; document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+ "<input type='buttton' value='Puntuar' onclick='Croupier.puntuar3()'>"; document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+ "<input type='buttton' value='Cartas.?' onclick='Croupier.mascartas3()'>"; document.getElementById('contenido4').innerHTML= document.getElementById('contenido4').innerHTML+ "<input type='buttton' value='Nueva' onclick='NuevaPartida3()'>"; };


La mayor parte del código ya se ha comentado, repasar la sección "Ahora con Imágenes", donde se explica con más detenimiento.
La parte restante tan sólo incluye unos botones en pantalla, que al hacer clic sobre ellos, lanzarán la correspondiente función según el botón que se pulse.

Como en anteriores ocasiones se han cambiado las funciones incorporando un "3", al final de cada una de ellas, esto tiene como objetivo evitar cruces de código con otros utilizados en este programa.

Directo a Resultados

El gran dilema


Hay varias cosas que se deberían tener en cuenta si la aplicación se destina para dispositivos Android, no todas las funciones de javascript están disponibles, en según que versiones, personalmente me ha sido imposible hacer funcionar los (boder-style) en versiones anteriores a Android-5. A fecha de hoy Android anda por la versión 8 oreo / P.

Lo adecuado para crear websapp para este tipo de sistemas, es realizar una web "responsive", que se adapta a los diferentes tamaños de los dispositivos donde corre el programa, sin la necesidad de incluir soporte gráfico para las imágenes con diferentes tamaños.

¿Usar o no usar bibliotecas de terceros?, actualmente hay disponibles bibliotecas que nos pueden ayudar en el desarrollo de proyectos, algunas de ellas muy especializadas o enfocadas a diseños para dispositivos móviles, como por ejemplo JQuery-movile, otras como Bootstrap también se basan en diseños "responsive" y una vez que se manejen con cierta soltura, pueden ahorrarnos mucho trabajo.

Es por tanto una cuestión personal el uso de estas bibliotecas, ahorran mucho trabajo, pero también exigen como es el caso de JQuery, que se cambie un tanto la sintaxis y puede llevar un cierto tiempo dominarlo correctamente. Es muy aconsejable dominar este tipo bibliotecas con cierto nivel, son muy estables en su puesta en marcha y se ejecutan de igual modo, en todo tipo de dispositivos.

Para este proyecto no se han usado bibliotecas de terceros, es una webApp "responsive", creada íntegramente en Html5-Css-Js, mostrando que se pueden realizar otro tipos de proyectos sin necesidad de apoyarse en esas librerías.

No es intención de esta guía abordar la compilación de websApp a Apk's, hay una buena cantidad de lenguajes y sus respectivos compiladores para crear Apk's, para esta guía se ha utilizado:

Android Studio 3.1.2
Build #AI-173.4720617, built on April 13, 2018
JRE: 1.8.0_152-release-1024-b01 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Linux 4.9.0-6-amd64

Dejo el código utilizado en el programa Risk-Express, teniendo en cuenta que la webApp ha sido importada a la carpeta "asset" y que la pagina de inicio se debe llamar como "index.html".

MainActivity.java
package com.example.yu.riskexpress;

import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private String text;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getSupportActionBar().hide();
        WebView web = (WebView) findViewById(R.id.miVisor);
        web.getSettings().setJavaScriptEnabled(true);
        web.getSettings().setDomStorageEnabled(true);
        web.loadData(text, "text/html; charset=utf-8", "UTF-8");
        web.setWebChromeClient(new WebChromeClient());
        web.setWebViewClient(new MyWebViewClient());
        WebSettings settings = web.getSettings();
        settings.getJavaScriptEnabled();
        web.loadUrl("file:///android_asset/index.html");
        Typeface face=Typeface.createFromAsset(getAssets(),"font/LaurenScript.ttf");

    }

    private class MyWebViewClient extends WebViewClient
    {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return super.shouldOverrideUrlLoading(view, url);
        }
    }


activity_main.xml
< ?xml version="1.0" encoding="utf-8"?>
< android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="89dp">

    < WebView
        android:id="@+id/miVisor"
        android:layout_width="835dp"
        android:layout_height="534dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

< /android.support.constraint.ConstraintLayout>


AndroidManifest.xml
< ?xml version="1.0" encoding="utf-8"?>
< manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yu.riskexpress">

    < uses-permission android:name="android.permission.INTERNET">

    < application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        < activity android:name=".MainActivity">
            < intent-filter>
                < action android:name="android.intent.action.MAIN" />

                < category android:name="android.intent.category.LAUNCHER" />
            < /intent-filter>
        < /activity>
    < /application>

< /manifest>


Nota: se han tabulado los signos iniciales ("<"), para poder mostrar el código, además en Android-Studio, se ha incluido un visor web "WebWiew", para dar soporte a la webapp, en el modo de diseño de la ventana, activity_main.xml






Para probar ejemplos o código es necesario abrir la consola web del navegador. Pulsa CTRL+MAY+(i,k,l) depende de cada navegador.

Resultados

Creando Juegos de Mesa by Yuyu

Este proyecto se comparte como un paquete de aprendizaje y como tal se acoge a las condiciones Creative Commons 3.0 ES.

CC BY-NC-SA 3.0 ES 2018


Códigos y enlaces




Este enlace proporciona acceso a este programa para poder experimentar con el, o, simplemente correrlo fuera de linea.

Guía de Dados, Cartas y Tablas (Cartas)

enlace.- Guía Dados, Cartas y Tablas (Cartas)




Enlaces a programas utilizados en esta guía:

* Black-Jack 21 con ascii

enlace.- BlackJack-Ascii


* Black-Jack 21 con imágenes

enlace.- BlackJack-Img


* Black-Jack 21 con botones

enlace.- BlackJack-Btn




Para el visionado online de este programa:

enlace.- Guía-Cartas




Bug's



El Croupier no se reparte carta.

En ciertas ocasiones, al realizar la llamada para abrir la ventana "Resultados", el Croupier no se reparte carta para si mismo, se aconseja regresar a la ventana anterior y volver a pulsar sobre el enlace.

El 80% de los posibles errores, tiene que ver con la equivocación en la introducción de comandos, en la consola web. Suele ocurrir que se pidan más cartas "Croupier.mascartas()", sin haber llamado antes a puntuar "Croupier.puntuar()", causa por la que la pantalla no está aun refrescada.

El programa está creado íntegramente en Javascript/Css, estando en su estado Beta de desarrollo.




Disclamer:



El autor no se hace responsable del uso de este programa por parte de terceros, de alteraciones que se pudieran producir, tanto en el texto, como en la gráfica, del uso inapropiado del mismo, así como de cualquier modificación en general, sin el expreso consentimiento del autor.

El autor tampoco se hace responsable de la publicidad incluida por el servidor gratuito donde este alojada en ese momento esta aplicación, la utilización de este tipo de servidores gratuitos se hace necesaria para su soporte online.

Las cartas utilizadas son cortesía de Small Stuff's

Cartas




Proyecto:



Si se desea contactar con el autor para cualquier cuestión relacionada con este programa, dar su opinión, o sugerencias, paso a enlazar los foros donde están abiertos hilos al respecto de la aplicación.

Este proyecto se puede seguir en los siguientes foros:

Bgg.- Bgg-forum

Imprimiryjugar.- ImprimiryJugar

LaBsk.- LABSK

Dark-Stone.- DarkStone-foro

Dejo pendiente una entrada en mi pagina personal wordpress.

Pagina personal en wordpress.- Pagina Personal