Unidad 9 Interfaces gráficas de usuario. JavaFX. Trileros.

Vamos a desarrollar el juego de los trileros. 3 vasos y una bola, deberemos adivinar una vez se mueve este bajo que vaso se encuentra.

Dispondremos de 1 intento, es decir, haremos un click de ratón y si acertamos, nos aparecerá la bola, si fallamos, nos aparecerá una X.

Si tenemos un acierto, en el botón correspondiente que hemos pulsado nos aparecerá el circulo así:

En el caso de fallo así:

Diseño de la vista (Scene Builder)

Para la vista vamos a utilizar los siguientes componentes:

Las propiedades deberéis adivinarlas vosotros, aunque alguna de ellas ya están visibles.

Una vez realizamos una jugada, es decir, pulsamos un botón para tratar de ver si en este esta la bolita, no se deberá permitir pulsar otro botón (los 3 que hay para tratar de averiguar las bolitas).

Por defecto el botón que se llama Actualizar estadísticas está deshabilitado y sólo lo habilitaremos una vez hayamos realizado una jugada.

Este botón realizará una actualización de una tabla llamada usuarios la cual tendrá la siguiente estructura:

CREATE TABLE `usuarios` (
  `id` int NOT NULL AUTO_INCREMENT,
  `nombre` varchar(45) DEFAULT NULL,
  `apellidos` varchar(255) DEFAULT NULL,
  `usuario` varchar(255) DEFAULT NULL,
  `aciertos` int DEFAULT '0',
  `errores` int DEFAULT '0',
  PRIMARY KEY (`id`),
  UNIQUE KEY `usuario_UNIQUE` (`usuario`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

y la respectiva carga inicial:

​x
INSERT INTO `usuarios` VALUES 
(1,'diego','fernandez ruiz','diegofernandez',0,0),
(2,'martin','gomez salinas','martingomez',0,0),
(3,'alvaro','navarro soto','alvaronavarro',0,0),
(4,'carlos','morales ibañez','carlosmorales',0,0),
(5,'sergio','dominguez leiva','sergiodominguez',0,0),
(6,'javier','campos ferrer','javiercampos',0,0),
(7,'adrian','rubio estrada','adrianrubio',7,18),
(8,'lucas','ortega vega','lucasortega',0,0),
(9,'daniel','rojas carrasco','danielrojas',0,0),
(10,'manuel','mendoza perez','manuelmendoza',0,0),
(11,'roberto','santos lorenzo','robertosantos',0,0),
(12,'francisco','delgado miranda','franciscodelgado',0,0),
(13,'victor','blanco nuñez','victorblanco',0,0),
(14,'ivan','torres gil','ivantorres',0,0),
(15,'andres','fuentes molina','andresfuentes',0,0),
(16,'omar','villanueva garcia','omarvillanueva',0,0),
(17,'nicolas','herrera suarez','nicolasherrera',0,0),
(18,'marco','rodriguez bustos','marcorodriguez',0,0),
(19,'alejandro','sierra peralta','alejandrosierra',0,0),
(20,'pablo','castillo arenas','pablocastillo',0,0),
(21,'ricardo','leon esteban','ricardoleon',0,0),
(22,'fernando','luna medina','fernandoluna',0,0),
(23,'rafael','martinez pardo','rafaelmartinez',0,0),
(24,'hugo','mora valenzuela','hugomora',0,0),
(25,'joel','rios solis','joelrios',0,0),
(26,'matias','peña villalba','matiaspena',0,0),
(27,'gonzalo','vargas lucero','gonzalovargas',0,0),
(28,'benjamin','reyes toledo','benjaminreyes',0,0),
(29,'esteban','salas montoya','estebansalas',0,0),
(30,'tomás','guzman alarcon','tomasguzman',0,0);

Cuando se pulse al botón lo que realizaremos es actualizar el usuario, con el usuario que se ha introducido en el campo para ello, incrementaremos el número de aciertos o fallos que haya tenido y deshabilitaremos de nuevo la pulsación del botón.

Veamos en una imagen esta secuencia:

Como podemos observar, cuando pulsemos sobre Mostrar usuarios lo que hará es utilizar un observable. Revisa actividades realizadas.

¿Cómo cambiamos o colocamos una imagen en un botón?

Para cambiar una imagen el procedimiento es similar al de la carga de imágenes. Os dejo un fragmento de código:

xxxxxxxxxx
 File imagenFile = new File("images/error.png");
        Image imagenLogin = new Image(imagenFile.toURI().toString());
        ImageView img = new ImageView(imagenLogin);
        btn.setGraphic(img);
        btn.setDisable(true);

Las imágenes que debéis utilizar son las siguientes:

Para cuando no está la bola, imagen de error y es esta: error64.png

Para cuando hemos acertado, la imagen de la bolita es esta: circle64.png

Encontraréis las mismas en los recursos, en la subcarpeta llamada Trileros.

¿Cómo podemos saber qué botón se ha pulsado?

Dale un vistazo a los getters de los botones y tira de ingenio ;)