//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]}; } } };
La biblioteca de funciones se crea con la siguiente variable, está vacia, y necesita rellenarse de datos.
var Croupier = {};
Croupier.cartasNuevas = function (){}
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")}; }
//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")}; }
var Croupier = {}; var mano = []; var manoCroupier = []; var puntos = 0, punto2 = 0; var partMaq = 0, partJug = 0;
Pulsa para mandar a Resultados//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 FMaurizh6>h3>\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+") ";} };
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(); };
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"); };
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"); };
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." }; };
//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; };
if(punto2 < puntos && punto2 <= 21 && puntos < 22){ manoCroupier[manoCroupier.length] = this.cartas [Math.floor(this.cartas.length * Math.random ())]; this.cartas.splice(manoCroupier,1); }
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>"; }
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;
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>h3>\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+"h6>"; };
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> h3>\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+"h6>"; ////////////////////////////////////////////////////////////////////// // /// // 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()'>"; };
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); } }
< ?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>
< ?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>
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