Anteriormente Guizero 5.- Controlando la GUI.
En este capítulo vamos a utilizar Guizero para crear un juego. Como el programa que vamos a construir va a ser un poco "complejo" lo vamos a descomponer en varios pasos para crearlo.
El Juego de los Emojis.
En este juego vamos a ver unos emojis en la parte superior y otros en la parte inferior. Tendremos que buscar cual de los emojis de la parte superior, solamente uno, se repite en la parte inferior. Tendremos que poner en juego nuestra memoria visual.
Por ejemplo, en la imagen de arriba el único emoji que está tanto en el cuadro superior como en el cuadro inferior es el emoji amarillo con una mascarilla.
El juego incorpora muchos de los elementos que hemos visto en las últimas semanas, como diferentes tipos de widgets, elementos de diseño, diferentes tipos de comandos y eventos.
Descomponiendo el programa en Tareas más Sencillas.
Puesto que este programa va a ser más elaborado que los de costumbre e involucra múltiples componentes, vamos a descomponerlo en partes más sencillas.
En informática, el proceso de dividir una tarea en etapas más simples que se pueden volver a ensamblar en el programa completo se denomina descomposición.
Para descomponer el programa en partes más pequeñas y sencillas, un programador podría empezar escribiendo los objetivos del programa. Luego podría hacer una lista de todos los recursos que tiene para alcanzar ese objetivo. A continuación, debe resolver todas las etapas que deben completarse para alcanzar el objetivo. Luego debe averiguar como completar cada etapa. Pues eso es lo que vamos a hacer nosotros.
Empecemos pensando lo que el juego necesita:
- Mostrar dos conjuntos de imágenes (emojis) elegidos al azar, y que solo uno esté representado una única vez en cada grupo.
- Permitir al jugador elegir una imagen.
- Mostrar un advertencia que le diga al jugador si la imagen elegida es correcta o incorrecta.
- Mantener la puntuación del jugador.
- Mostrar el tiempo de juego.
El juego lo haremos usando los elementos que hemos visto de Guizero y usando una biblioteca de emojis ya creada que veremos como descargar en un paso posterior.
Diseños en Cuadricula.
Para esta aplicación vamos a usar el Gestor de Geometría GRID. Repasemos en que consiste. En el gestor de geometría GRID los widgets se organizan siguiendo una cuadrícula. Para cada widget que se agregue al contenedor hay que especificar sus coordenadas de cuadrícula, para que GUIZERO sepa donde colocarlo. Esto significa que, al especificar el diseño de la cuadrícula para un contenedor, las coordenadas de la cuadrícula se convierten en un parámetro necesario para cualquier widget alojado en el mismo.
Las coordenadas de la cuadrícula se proporcionan como un parámetro inicial en la forma [x,y], donde x e y son números enteros que comienzan desde el 0. El valor de x representa la columna de la cuadrícula y el valor de y representa la fila. Para familiarizarse con estos parámetros, intenta cambiar las posiciones de los cuadros de colores en el siguiente ejemplo. ¿Puedes predecir la salida antes de ejecutar el código?
from guizero import App, Text, Box
app = App()
box = Box(app, layout="grid", width="fill", height="fill")
rojo = Text(box, bg="red", grid=[0,0])
azul = Text(box, bg="blue", grid=[0,1])
verde = Text(box, bg="green", grid=[1,0])
blanco = Text(box, bg="white", grid=[1,1])
app.display()
El siguiente código usa el diseño de cuadrícula para crear algo que debería ser familiar. ¿Puedes adivinar qué es antes de ejecutar el código?
from guizero import App, PushButton
app = App(layout="grid")
button1 = PushButton(app, text="1", grid=[0,0])
button2 = PushButton(app, text="2", grid=[1,0])
button3 = PushButton(app, text="3", grid=[2,0])
button4 = PushButton(app, text="4", grid=[0,1])
button5 = PushButton(app, text="5", grid=[1,1])
button6 = PushButton(app, text="6", grid=[2,1])
button7 = PushButton(app, text="7", grid=[0,2])
button8 = PushButton(app, text="8", grid=[1,2])
button9 = PushButton(app, text="9", grid=[2,2])
button0 = PushButton(app, text="0", grid=[1,3])
app.display()
Aplicaciones del diseño en cuadricula.
El diseño de cuadrícula tiene muchas aplicaciones y es especialmente útil si necesitas colocar objetos en filas o columnas.
Veamos cómo crear un formulario de entrada de datos utilizando diseños automáticos y de cuadrícula.
La creación de este formulario con el diseño automático (usando el gestor de geometría pack) requeriría:
- crear un cuadro para cada widget de texto y cuadro de texto
- alinear los widgets para que aparezcan a la izquierda
- configurar el ancho del widget de texto para que todos se alineen
from guizero import App, Box, Text, TextBox
app = App()
box_fname = Box(app, width="fill")
lbl_fname = Text(box_fname, text="Nombre", align="left", width=20)
txt_fname = TextBox(box_fname, align="left")
box_sname = Box(app, width="fill")
lbl_sname = Text(box_sname, text="Apellido", align="left", width=20)
txt_sname = TextBox(box_sname, align="left")
box_dob = Box(app, width="fill")
lbl_dob = Text(box_dob, text="Fecha de Nacimiento", align="left", width=20)
txt_dob = TextBox(box_dob, align="left")
app.display()
Al usar el diseño en cuadrícula, el código se vuelve más simple y fácil. No hay que calcular los anchos de los elementos para que todo cuadre.
from guizero import App, Text, TextBox
app = App(layout="grid")
lbl_fname = Text(app, text="Nombre", grid=[0,0])
txt_fname = TextBox(app, grid=[1,0])
lbl_sname = Text(app, text="Apellido", grid=[0,1])
txt_sname = TextBox(app, grid=[1,1])
lbl_dob = Text(app, text="Fecha de Nacimiento", grid=[0,2])
txt_dob = TextBox(app, grid=[1,2])
app.display()
¿Puedes ver las diferencias entre los dos códigos?
Comenzando el Juego.
Ahora es el momento de comenzar a armar el Juego de los Emojis.
Descomposición:
Comenzaremos por descomponer el Juego Emoji en varias etapas, cada una de las cuales aún requerirá una mayor descomposición. Para construir el juego, crearemos:
- Una cuadrícula con Emojis seleccionados al azar.
- Una segunda cuadrícula con botones en los cuales insertaremos un emoji de la primera cuadricula y otros elegidos al azar pero que no se encuentren en la de arriba.
- Una función que sea llamada al presionar el botón y que verifique si se este mostró el emoji correspondiente.
- Un cronómetro de cuenta atrás que le muestre al jugador el tiempo disponible.
- un widget que haga de marcador para conservar la puntuación del juego.
Construyendo una cuadricula de Emojis.
La primera etapa de la descomposición anterior, que es crear la primera cuadrícula que contendrá los emojis elegidos al azar, implica a su vez varias tareas distintas. Por tanto, también deberemos descomponerla en otras tareas más sencillas:
- Crear un directorio donde descargaremos las imágenes de los emojis.
- Poner esos emojis en una lista, mezclarlos aleatoriamente y elegir nueve de ellos.
- mostrar los emojis elegidos en la cuadrícula.
Conseguir y cargar los Emojis en la lista.
Para crear el juego necesitamos unos Emojis. Usaremos los Emojis que se usaron para Twitter. Para ello descarga el archivo emojis.zip desde el enlace https://rpf.io/fl-guis-emojis, abre el archivo zip y copia la carpeta con los emojis en el mismo directorio donde tengas el código del programa.
El juego deberá elegir nueve emojis al azar y organizarlos en una cuadrícula. Una forma sencilla de hacer esto es poner todos los emojis en una lista y mezclarlos aleatoriamente.
El siguiente código crea una lista aleatoria de elementos, cada uno con el formato ruta/nombre_emoji. La ruta es la ubicación de los emojis en tu computadora; le dirá al código que carga los emojis dónde encontrarlos.
import os
from random import shuffle
# Establece la ruta a la carpeta del emoji en tu computadora.
emojis_dir = "emojis"
# Crea una lista de las ubicaciones de las imágenes de los emojis.
emojis = [os.path.join(emojis_dir, f) for f in os.listdir(
emojis_dir) if os.path.isfile(os.path.join(emojis_dir, f))]
# Baraja los emojis
shuffle(emojis)
print(emojis)Empezamos diciendo al ordenador que importe las librerías necesarias. Después establecemos en la variable emojis_dir el nombre del directorio donde están los emojis. (esta carpeta está en el mismo directorio que la aplicación principal). Luego usando compresión de listas vamos a crear una nueva lista con la referencia a cada uno de los emojis.
Con os.listdir(emojis_dir) obtenemos el nombre de todos los archivos y directorios (que son los nombres de los emojis) que están presentes en la carpeta emojis_dir. Ahora bien solamente nos interesan aquellos que efectivamente sean archivos, con lo que con os.path.isfile() comprobamos si la ruta especificada es un archivo regular y si es el caso entonces, lo agregamos finalmente a la lista.
Una vez tenemos la lista con todos los emojis, para que no estén siempre en el mismo orden, la barajamos pasándosela como parámetro al método shuffle().
Seleccionamos nueve emojis y los mostramos.
A continuación, el código debe elegir nueve emojis y organizarlos en una cuadrícula. Para esta primera etapa, el juego solo necesita mostrar una imagen de cada emoji.
Nota: Intenta crear una cuadrícula de emojis tu mismo, antes de mirar el código a continuación.
El siguiente código crea una lista de widgets de imágenes, cada uno con diferentes coordenadas de cuadrícula dentro de la aplicación. Finalmente, asigna un emoji de la lista de emojis a cada imagen en la cuadrícula.
import os
from random import shuffle
from guizero import App, Box, Picture
# Establece la ruta a la carpeta del emoji en tu computadora.
emojis_dir = "emojis"
# Crea una lista de las ubicaciones de las imagenes de los emojis.
emojis = [os.path.join(emojis_dir, f) for f in os.listdir(
emojis_dir) if os.path.isfile(os.path.join(emojis_dir, f))]
# Baraja los emojis
shuffle(emojis)
raiz = App("Juego de emojis")
# Crea una caja que será el contenedor de las cuadrículas
pictures_box = Box(raiz, layout="grid")
# Crea una lista vacía a la cual se añadirán las imágenes de los emojis.
imagenes = []
for x in range(0, 3):
for y in range(0, 3):
# Pone las imágenes en la lista.
imagen = Picture(pictures_box, grid=[x, y])
imagenes.append(imagen)
# Por cada una de las imagenes en la lista.
for imagen in imagenes:
# hace que la imagen sea un emoji aleatorio.
imagen.image = emojis.pop()
raiz.display()
Para asignar las coordenadas a cada widget imagen utilizamos dos bucles "for". Ambos recorren el rango de 0 a 2. Uno asigna su valor a la variable "x" y el otro a la variable "y".
Para asignar a cada widget Picture una imagen, primero introducimos todos los widget creados (ya con sus coordenadas) en una lista. Posteriormente asignamos la imagen a cada uno mediante la función integrada de Python, .pop(), la cual si no se le asigna ningún argumento selecciona el último elemento de la lista y luego lo elimina de la misma.
Si no te ha quedado claro, como funciona el método .pop() mira el siguiente código para aclararlo un poco.
test = [1,2,3,4,5]
print(test.pop())
# Imprime la lista "test" después de haber eliminado el último elemento.
print("La nueva lista después de haber usado pop() : ", test, "\n")
Desafios.
- Intenta adaptar el código para que se muestre una cuadrícula de 4 x 4 en la que se visualicen 16 emojis.
- Intenta volver a escribir las dos últimas líneas del código que asigna las imágenes a cada widget sin utilizar el método .pop(). Compara ambos códigos el original con .pop() y el que hayas escrito. ¿Es más largo o más complicado?
Añadiendo los botones con las Imágenes.
En esta parte vamos a completar la segunda tarea que nos marcamos al descomponer el problema original, que es añadir los botones que contendrán las imágenes.
En el juego de los Emojis hay dos cuadrículas. Uno superior, que contiene 9 imágenes de Emojis y otro inferior que contiene 9 botones, que se pueden pulsar, con otro tantos Emojis. Solamente un Emoji se repite en ambas cuadrículas y el objetivo del juego es adivinar cual es. (Con 9 emojis no es tarea difícil pero podemos complicarlo mucho si ponemos una cuadricula de 6 x 6 con 36 imágenes distintas y ponemos un tiempo finito para encontrarlo)
Una forma de asegurarnos que haya uno y solamente un Emoji coincidente, es dibujar ambas cuadrículas primero y luego insertar el mismo Emoji en ambas. Para hacer esto primero crearemos una cuadrícula con los botones de los Emojis y luego modificaremos tanto esta cuadrícula como la que creamos antes para agregar el Emoji correspondiente.
Creando una cuadrícula con botones que contengan los Emojis.
Puedes crear una cuadrícula de botones emoji usando el mismo método que en el paso anterior para agregar las imágenes, pero esta vez usando el widget PushButton en lugar de Picture.
Tendrás que añadir las siguientes líneas de código en el orden correcto para que el programa funcione.
from guizero import PushButton
buttons_box = Box(game_box, layout="grid")
boton = PushButton(buttons_box, grid=[x,y])
botones.append(button)
for boton in botones:
boton.image = emojis.pop()
Intenta adaptar el código tu mismo antes de mirar su implementación en el código inferior.
import os
from random import shuffle
from guizero import App, Box, Picture, PushButton
# Establece la ruta a la carpeta del emoji en tu computadora.
emojis_dir = "emojis"
# Crea una lista de las ubicaciones de las imagenes de los emojis.
emojis = [os.path.join(emojis_dir, f) for f in os.listdir(
emojis_dir) if os.path.isfile(os.path.join(emojis_dir, f))]
# Baraja los emojis
shuffle(emojis)
raiz = App("Juego de emojis")
# Crea una caja que será el contenedor de las cuadrículas
pictures_box = Box(raiz, layout="grid")
# Crea una caja que será el contendor de los botones
buttons_box = Box(raiz, layout="grid")
# Crea una lista vacia a la cual se añadirán las imagenes de los emojis.
# Primero crearemos los objetos, los métemos en la lista y luego le añadimos
# las imagenes.
imagenes = []
botones = []
for x in range(0, 3):
for y in range(0, 3):
# Pone las imagenes en la lista.
imagen = Picture(pictures_box, grid=[x, y])
imagenes.append(imagen)
# Pone los botones en la lista.
boton = PushButton(buttons_box, grid=[x,y])
botones.append(boton)
# Por cada una de las imagenes en la lista.
for imagen in imagenes:
# hace que la imagen sea un emoji aleatorio.
imagen.image = emojis.pop()
for boton in botones:
# hace que la imagen dentro del botón sea un emoji aleatorio.
boton.image = emojis.pop()
raiz.display()Puesto que las dos cuadrículas son muy similares, es importante asegurarse de que las variables se nombren de forma clara. En el ejemplo hemos separado en una cuadrícula los botones con emojis de la cuadrícula con las imágenes de emojis. Esta cuadricula se llama buttons_box y la cuadricula de las imágenes picture_box. De manera similar, la lista que contiene los PushButton se llama "botones" y la lista de que contiene los Picture se llama "imagenes". Esto hará que el código sea más intuitivo de leer y reducirá el riesgo de que se confundan las listas u otros objetos.
Para hacer que el código sea más eficiente, se asignan coordenadas a los PushButtons utilizando el mismo conjunto de bucles for que antes.
Agregar el Único Emoji Coincidente en ambas cuadrículas.
A continuación debemos asegurarnos de que ambas cuadrículas tenga un Emoji coincidente, es decir que sea el mismo en ambas. Para hacer esto tenemos que cambiar una de las imágenes y uno de los botones por un Emoji que sea el mismo en las dos cuadrículas. Este Emoji se llama emoji_coincidente y se selecciona de nuevo de la lista de Emojis.
Dedica algún tiempo a revisar el código a continuación, que debe agregarse al final del programa. ¿Puedes averiguar qué está haciendo?
# importa la función randint
from random import randint
# escoge un nuevo emoji
emoji_coincidente = emojis.pop()
# selecciona un número al azar
imagen_aleatoria = randint(0,8)
# Cambia una de las imagenes de forma aleatoria por el emoji seleccionado.
imagenes[imagen_aleatoria].image = emoji_coincidente
boton_aleatorio = randint(0,8)
# Cambia uno de los botones de forma aleatoria por el mismo emoji que seleccionamos anteriormente.
botones[boton_aleatorio].image = emoji_coincidente
Este código utiliza una función aleatoria de la biblioteca de Python llamada randint, que selecciona aleatoriamente un número entero dentro de un rango dado; en este caso, el rango es 0–8.
Luego, el programa elige una imagen y un botón y les da a ambos el mismo emoji para mostrar. Esto garantiza que las cuadrículas tengan un emoji en común.
¿Puedes identificar qué emoji es el que se repite en ambas cuadrículas?
Eventos basados en el tiempo.
Descubre como Guizero trata los eventos basados en el tiempo y como añadir un cronómetro regresivo al juego.
La siguiente etapa en el proyecto del juego es añadir un temporizador. Es este punto veremos como funciona Guizero y por qué configurar un temporizador no es sencillo.
Dentro del juego queremos establecer una función que cuente hacia atrás un número preestablecido de segundos y le diga al jugador cuando se le acabe el tiempo de juego. Antes de agregar esto a la aplicación, trata de intentar crear un script en python normal que cuente 10 segundos sin usar ningún elemento de Guizero. Si no estás familiarizado con la función "sleep" de python, es posible que quieras leer sobre ella antes de intentar esta tarea.
Una forma de realizar lo anterior sería:
from time import sleep
def cuenta_atras(t):
while t > 0:
print(t)
t -= 1
sleep(1)
cuenta_atras(10)
Utilizamos un bucle while para realizar la misma operación hasta que la variable de tiempo t llega a cero. Esa operación repetida imprime el valor de t, reduce el valor en 1 y luego 'duerme' el programa durante 1 segundo.
Añadiendo el contador a Guizero.
Ahora vamos a intentar añadir este contador regresivo a una aplicación de Guizero.
from guizero import App, Text
from time import sleep
def cuenta_atras(t):
while t > 0:
text.value = int(text.value) - 1
sleep(1)
app = App()
text = Text(app, text=10)
cuenta_atras(10)
app.display()
Cuando intentes ejecutar este código, es posible que observes que tu código parece haberse congelado y la aplicación no funciona; el valor en el cuadro de texto no se actualiza. Intente agregar un PushButton a tu aplicación y vuelva a ejecutar la función de cuenta regresiva. Cuando hagas esto, deberías notar que ya no puede interactuar con el botón.
¿Por qué no puedes utilizar bucles while en Guizero?
La razón por la que la función de cuenta_atras hace que tu aplicación deje de funcionar está relacionada con la forma en que guizero le indica a Python que ejecute la aplicación. Cada aplicación que ha creado hasta ahora en este curso siempre ha incluido la línea
Esta línea crea un bucle infinito que espera que ocurran eventos (como un usuario que presiona un botón o escribe en un cuadro de texto). Esto es lo que permite que tu aplicación permanezca abierta y permite que un usuario interactúe con ella tantas veces como quiera.
Si interrumpes tu programa sin cerrar tu aplicación (por ejemplo, presionando ctrl+c), puede ver que el valor en el cuadro de texto habrá cambiado. Esto muestra que la función de cuenta regresiva ha estado funcionando pero la propiedad de valor del texto no se ha actualizado.
Esto se debe a que cuando agregas bucles while a tu código, evitas que el bucle .display() actualice tu aplicación. Es por eso que parece congelado o incluso podría bloquearse. Del mismo modo, tu aplicación no puede actualizarse mientras el programa está inactivo, por lo que usar sleep() evita que su aplicación se actualice.
Funciones que gestionan el tiempo en Guizero.
Afortunadamente, guizero tiene sus propias funciones integradas que se pueden usar para crear contadores y temporizadores que no dependan de bucles while.
Por ejemplo, .repeat() le indica a un widget que llame repetidamente al mismo comando. Este método requiere que especifique el tiempo de retraso entre las repeticiones y el comando que se está llamando.
El siguiente código seguirá aumentando el tamaño de fuente de un texto cada medio segundo llamando repetidamente a la función de aumento, que le indica al widget de texto que incremente el tamaño de fuente.
from guizero import App, Text
def aumentar():
text.text_size = int(text.text_size) + 1
app = App("textsize")
text = Text(app, text="bigger")
text.repeat(500, aumentar)
Añadiendo la Cuenta Atrás.
En este paso vamos a añadir un contador a nuestro juego usando un método de Guizero.
En el juego de los Emojis que estamos creando, los jugadores tienen 30 segundos para ver cuantas coincidencias pueden obtener. Para poder habilitar esta función crearemos un widget que cuente de forma regresiva desde el 30 y luego reinicie el juego.
Creando el temporizador.
Existen varias formas de crear un temporizador sin usar un bucle "while". Si quieres intentar un desafío, prueba a diseñar el tuyo propio antes de seguir leyendo. Puedes encontrar útil la información de Guizero.
Crearemos el temporizador usando el método .repeat(). Este método te permite llamar repetidamente a un comando y especificar un tiempo de retraso entre cada llamada.
Para empezar, crearemos el temporizador usando un widget de texto, configurando la propiedad .value en "Preparado" cuando comience el juego. Puedes cambiar este mensaje por el que a ti te parezca mejor. Esto debe hacerse una vez al comienzo del juego, por lo que el siguiente código lo podemos insertar después de crear las dos cuadriculas, pero antes de llamar a la función principal "iniciar_ronda"
# Añadir en las caracteristicas_adicionales
caracteristicas_adicionales = Box(app)
temporizador = Text(caracteristicas_adicionales, text="Preparado.")
A continuación debe iniciarse el temporizador. Para hacer esto, establecemos el valor inicial y le ordenamos al temporizador que cuente hacia atrás. El siguiente código le dice al temporizador que realice una cuentea regresiva diciéndole que llame repetidamente una función, que llamaremos contador, cada 1.000 milisegundos. El temporizador debe comenzar después de dibujar las cuadriculas y preparar la ronda por lo que el código también debe insertarse después de la función iniciar_ronda() y antes de display().
# inicia el temporizador
temporizador.value = 30
temporizador.repeat(1000, contador)
El temporizador está llamando repetidamente a la función contador, por lo que esta función debe definirse. Mire el siguiente código y mira si puedes averiguar cómo funciona la función.
def contador():
temporizador.value = int(temporizador.value) - 1
if int(temporizador.value) == 0:
# resetea el temporizador
temporizador.value = 30
Cada vez que se llama a esta función (en este caso, cada segundo), reduce el valor del temporizador en 1 y luego verifica si es igual a 0. Si es así, establece el valor del temporizador en 30 para comenzar de nuevo.
¿Y que sucede si se acaba el tiempo?
Hasta ahora cuando se acaba el tiempo el temporizador se reinicia. Estaría bien que informáramos al jugador de que se ha acabado el tiempo en vez de simplemente reiniciarlo. Podríamos establecer varias opciones: que se acabe el juego o que empiece una nueva partida etc. Tomate un tiempo para decidir que quieres que haga el juego cuando el tiempo termine.
from guizero import warn
def contador():
temporizador.value = int(temporizador.value) - 1
if int(temporizador.value) == 0:
temporizador.cancel(contador)
# resetea el temporizador
resultado.value = "JUEGO TERMINADO"
warn("GAME OVER", "El tiempo se ha agotado")
temporizador.value = 30
# resetea el resultado
resultado.value = ""
# Comienza una nueva ronda
iniciar_ronda()
#resetea el contador
temporizador.repeat(1000, contador)
Cuando el tiempo se agota una ventana emergente avisa al jugador. El temporizador se cancela y luego se reinicia y comienza una nueva ronda del juego. Todo esto se inicia cuando dentro de la función contador() el valor del temporizador es igual a cero. Ten en cuenta que primero hay que cancelar el temporizador, para evitar tener dos temporizadores funcionando al mismo tiempo.
La ventana emergente se creó utilizando Guizero Alerts. Estos te permiten crear ventanas emergentes que se activan cuando ocurre un evento en una aplicación. Incluso se pueden crear ventanas emergentes que hagan una pregunta al usuario y devuelvan diferentes valores según su respuesta.
Manteniendo el Marcador.
El último paso que vamos a añadir a el juego es un marcador. Vamos a ver como crear un widget que mantenga la puntuación que alcance el jugador.
Un marcador debe mostrar la cantidad de coincidencias correctas que encuentra el jugador, mostrar este valor y reiniciarse cuando se agota el tiempo. Comenzaremos agregando un widget para mostrar un marcador, luego identificaremos dónde necesitamos cambiar el código para indicarle al juego que actualice el marcador.
Añadiendo el Marcador.
Colocaremos el marcador en la parte inferior del juego, debajo del cronómetro. Tu puedes colocar el marcador donde quieras. Para crear el marcador, utilizaremos un widget Text y actualizaremos su valor cada vez que el jugador obtenga un punto al descubrir el Emoji coincidente.
from guizero import Box, Text
marcador = Box(raiz)
etiqueta = Text(marcador, text="Puntuación", align="left")
puntuacion = Text(marcador, text="0", align="left")
app.display()
El lugar donde insertes este código depende de dónde desees que se muestre tu marcador. Para ponerlo en la parte inferior, agregaré este código en la parte final; Sin embargo, ten cuidado: si haces esto, tu marcador puede estar debajo de la parte visible de la aplicación. Para aumentar un poco el tamaño y que se muestre correctamente añadiremos el argumento height=550 al crear la aplicación.
# Inicia la aplicación
raiz = App("Juego de emojis", height=550)
Actualizando el Marcador.
Vamos a actualizar el marcador cada vez que el jugador acierte. Esto significa modificar la función coincide_Emoji() agregando una nueva línea que le diga al programa que sume uno a la puntuación cada vez que se pulse el Pushbutton del Emoji coincidente.
def coincide_emoji(coincide):
if coincide:
resultado.value = "Correcto"
puntuacion.value = int(puntuacion.value) + 1
else:
resultado.value = "Falso"
iniciar_ronda()
Reiniciando la puntuación
Finalmente necesitamos restablecer la puntuación cuando se agote el tiempo y termine la ronda. Para restablecer el marcador tenemos que establecer el valor de la puntuación de nuevo a cero.
Lee tu código para tratar de identificar dónde agregarías esta línea antes de seguir leyendo.
Esta línea se puede incluir en la función contador(). Esto se debe a que esta función realiza un seguimiento de cuánto tiempo queda y le indica al juego que se reinicie cuando se agote el mismo.
¡Enhorabuena! Con esto hemos terminado la construcción del juego y también el curso de Guizero.
