Máquina de azar en processing.js
Siguiendo con las entregas sobre la utilización de la librería processing.js, vamos a abordar la implementación de un juego en el que utilizamos la interacción con el ratón, la función random() y una variable semáforo para simular una máquina de azar.
En este caso, aprovecharemos una la variable semáforo que se va decrementando para ver en pantalla los cambios en los valores de x,y,z que almacenarán los valores aleatorios y que conformarán la combinación final de la máquina de azar. Controlaremos los premios en la variable monedes y el resultado de la última jugada en la variable missatge. Con ello inicializamos variables y definimos el setup:
// Global variables
var tamx = 640;
var tamy = 480;
var semaforo=150;
var monedes=3;
var x=0;
var y=0;
var z=0;
var missatge="";
// Setup Processing Canvas
void setup() {
size(tamx, tamy);
background(0,0,0);
cursor(CROSS);
}
La función draw será la encargada de mostrar los resultados y controlaremos la parada de pantalla mediante el valor de la variable semáforo. En este caso, en vez de utilizar un semáforo binario (interruptor de dos valores), he optado por usar un valor decreciente para que se vea en pantalla el cambio de valor en la combinación y que se vayan fijando los valores resultados uno a uno. Bajando desde 150, la variable x se redefinirá 50 veces hasta quedar fijada, la variable y 100 veces y la z 150 veces.
if (semaforo>100){x=floor(random(0,10));}
if (semaforo>50) {y=floor(random(0,10));}
if (semaforo>0) {z=floor(random(0,10));}
Evidentemente, el resultado de la jugada viene determinado por el valor final y por tanto utilizamos el valor de semaforo 0 para procesar el resultado. Simplemente miraremos si existe una pareja de valores para dar un premio menor o si existe coincidencia de los tres valores para un premio mayor. Es interesante ver que la instrucción && se corresponde con un AND lógico y el || con un OR lógico.
if (semaforo==1){
if (x==y && y==z){
monedes+=50;
missatge="¡Tres iguals! Has guanyat 50 monedes";
}else if (x==y || x==z || y==z){
monedes+=5;
missatge="¡Dos iguals! Has guanyat 5 monedes";
}else{
missatge="Sense premi!";
}
Añadiendo las instrucciones de pintado de elementos en pantalla y el fundamental decremento de valor en nuestra variable semáforo, nos queda la función principal completa de la siguiente manera manera:
void draw(){
if (semaforo>0){
//Pintar fondo
background(0,0,0);
//Generar nou valors
if (semaforo>100){x=floor(random(0,10));}
if (semaforo>50) {y=floor(random(0,10));}
if (semaforo>0) {z=floor(random(0,10));}
//Dibuixar iconos
noStroke();
fill(255,255,255);
rect(tamx/4 - 25,tamy/2 - 50, 50,100);
rect(2*tamx/4 - 25,tamy/2 - 50, 50,100);
rect(3*tamx/4 - 25,tamy/2 - 50, 50,100);
fill(255,0,0);
textSize(40);
text(x,tamx/4,tamy/2) ;
text(y,tamx/2,tamy/2) ;
text(z,3*tamx/4,tamy/2) ;
//Comprovar si tens premi
if (semaforo==1){
if (x==y && y==z){
monedes+=50;
missatge="¡Tres iguals! Has guanyat 50 monedes";
}else if (x==y || x==z || y==z){
monedes+=5;
missatge="¡Dos iguals! Has guanyat 5 monedes";
}else{
missatge="Sense premi!";
}
}
//Dibuixa monedes
fill(255,0,0);
textSize(45);
textAlign(CENTER);
text("MONEDES: "+monedes, tamx / 2, 50);
textSize(20);
text(missatge, tamx / 2, tamy - 50);
//Decrementar semaforo
semaforo-=1;
}
}
Podremos seguir jugando mientras nos queden monedas disponibles, y para relanzar el juego necesitaremos activar el semáforo y restablecer el mensaje de resultado. Para ello usaremos la conocida función mouseClicked() de esta manera:
void mouseClicked() {
if (monedes>0){
semaforo=150;
monedes-=1;
missatge="";
}
}
En conclusión, hemos realizado un sencillo juego que simula una máquina de azar, usando un semáforo extendido y la función random(). Además, se ha ejemplificado el uso de las condiciones lógicas AND y OR. Es evidente que la extensión inmediata del programa pasaría por utilizar imágenes asociadas a los valores resultado y dotar al sistema de una apariencia más interesante, pero la dinámica interna de funcionamiento queda implementada con las instrucciones mostradas. Como es habitual, en los enlaces dispones de la implementación y del código fuente necesario para replicar los ejemplos utilizados.
