Un simple jeu de ciseaux-papier-pierre avec JavaFX et SceneBuilder
Est-ce que ça va se faire en été? C'est le 10e calendrier de l'Avent
introduction
Cette fois, je voudrais faire un simple jeu de ciseaux pierre-papier avec le titre. J'espère que vous le lirez avec la reconnaissance de la suite de l'article d'introduction JavaFX que j'ai posté plus tôt.
environnement
-macOS Sierra 10.12.6 -Eclipse Oxygen 4.7.3a (e (fx) clipse installé par plug-in) -Scene Builder2.0
Processus de création réel
Cette fois, la différence par rapport à l'article précédent est l'élément qui utilise des images pour créer des packages autres que l'application.
Image de ce que vous voulez faire
Le déroulement du jeu créé cette fois est supposé être le suivant.
- Écran de veille
- Démarrez le jeu (attendez l'entrée avec "Saisho is Goo, Janken ...")
- Recevez les commentaires du joueur et accédez à l'écran de résultats Janken 4.1 Aller à l'écran de veille
Image préparée par Janken
Cette fois, je l'ai emprunté à un site de matériel gratuit.
Structure du package dans le projet
--application: les sources liées à l'interface graphique FX sont ici --game: Le traitement de ce Janken va ici --pic: Je vais mettre une image de la main de Janken. Goo: Rock.png, Choki: Scissors.png, Par: Papaer.png
Opérations dans SceneBuilder
Opérez dans SceneBuilder.
Comme préparation préliminaire, créez un projet JavaFX avec eclipse en utilisant la même procédure que la dernière fois.
Le nom du projet doit être "JankenFX". (Ça peut être n'importe quoi)
Une fois le projet généré, réécrivez partiellement Main.java dans le package d'application.
Scene scene = new Scene(root,400,400);
La ligne qui est
Scene scene = new Scene(root, 500 ,400);
Réécrivez dans. C'est tout pour la préparation.
Une fois la préparation terminée, ouvrez Form.fxml avec SceneBuilder.
Au début, il n'y a rien au centre, cliquez donc sur Panneau de bordure en bas à gauche de l'écran et définissez Pref width sur 500 et Pref Height sur 400 dans Layout sur le côté droit de l'écran. À ce stade, vous devriez voir un panneau blanc au centre de l'écran.
Je vais coller l'image de l'état lorsque le travail dans ce Scene Builder sera terminé en premier.
Les opérations effectuées pour chaque emplacement de BorderPane sont les suivantes.
-
Top --Label: Écrivez une phrase en fonction du titre et de la progression "Label_text" est écrit en fxid.
-
Center -HBox: Les pièces à l'intérieur du HBox sont disposées uniformément horizontalement. L'alignement dans les propriétés est défini sur CENTRE. Dans HBox --ImageView (à gauche): dessine votre propre main de Janken. J'écris "image_player" dans fxid. --ImageView (à droite): dessine la main de Janken de l'adversaire. J'écris "image_enemy" dans fxid.
-
Left --Label: j'écris "vous" dans le texte des propaties pour que je puisse l'identifier comme le mien.
-
Right --Label: J'ai écrit "Ai" dans le texte des propaties pour que je puisse dire que c'est la main de l'autre partie.
-
Bottom --HBox: Explication omise Dans HBox --Bouton (OK): Un bouton pour faire avancer l'écran de jeu. fxid est "button_OK" et On Action est "onOKClicked". --Button (Goo): C'est un bouton pour mettre la main avec Janken. fxid est "button_Rock" et On Action est "onRockClicked". --Button (Choki): C'est un bouton pour tendre la main avec Janken. fxid est "button_Scissors" et On Action est "onScissorsClicked". --Button (par): C'est un bouton pour mettre la main avec Janken. fxid est "button_Paper" et On Action est "onPaperClicked".
Le Form.fxml qui a été utilisé et rempli jusqu'à présent est le suivant.
Form.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.image.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="500.0"
xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="application.FormController">
<bottom>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<children>
<Button fx:id="button_OK" mnemonicParsing="false" onAction="#onOKClicked" text="OK" />
<Button fx:id="button_Rock" mnemonicParsing="false" onAction="#onRockClicked" text="Goo" />
<Button fx:id="button_Scissors" mnemonicParsing="false" onAction="#onScissorsClicked" text="Choki" />
<Button fx:id="button_Paper" mnemonicParsing="false" onAction="#onPaperClicked" text="Par" />
</children>
</HBox>
</bottom>
<top>
<Label fx:id="label_text" alignment="CENTER" prefHeight="80.0" prefWidth="400.0" text="Jeu de Janken" BorderPane.alignment="CENTER">
<font>
<Font size="20.0" />
</font>
</Label>
</top>
<center>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<children>
<ImageView fx:id="image_player" fitHeight="188.0" fitWidth="200.0">
<image>
<Image url="@../pic/Rock.png " />
</image>
</ImageView>
<ImageView fx:id="image_enemy" fitHeight="188.0" fitWidth="200.0">
<image>
<Image url="@../pic/Rock.png " />
</image>
</ImageView>
</children>
</HBox>
</center>
<right>
<Label text="Ouvert" BorderPane.alignment="CENTER">
<font>
<Font size="15.0" />
</font>
</Label>
</right>
<left>
<Label text="tu" BorderPane.alignment="CENTER">
<font>
<Font size="15.0" />
</font>
</Label>
</left>
</BorderPane>
Création de source dans Eclipse
Il y a deux programmes à créer, l'un consiste à ajouter FormController.java et l'autre à créer Battle.java dans le package du jeu. Je pense que la source créée cette fois est ** une source de gaspillage ** en raison de l'inexpérience de l'auteur. Notez s'il vous plaît.
FormController.java La version réécrite est la suivante.
FormController.java
package application;
import java.util.Random;
import game.Battle;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
public class FormController {
@FXML private Button button_OK;
@FXML private Button button_Rock;
@FXML private Button button_Scissors;
@FXML private Button button_Paper;
@FXML private Label label_text;
@FXML private ImageView image_player;
@FXML private ImageView image_enemy;
private Battle battle= new Battle();
private final Image ROCK= new Image("pic/Rock.png ");
private final Image SCISSORS= new Image("pic/Scissors.png ");
private final Image PAPER= new Image("pic/Paper.png ");
private int hand_player;
private int hand_enemy;
private int result; //Tenir le résultat de Janken dans int
private Random rand= new Random(); //Générer aléatoirement la main de l'adversaire
//Progression 1(En attente de l'entrée de Janken)Progressez à des moments autres que
@FXML
public void onOKClicked() {
if(battle.getPhase() != 1){
battle.nextPhase();
draw();
}
}
@FXML
public void onRockClicked() {
if(battle.getPhase() == 1) {
hand_player= 1;
hand_enemy= rand.nextInt(3)+ 1;
result= battle.battle(hand_player, hand_enemy, battle.getPhase());
battle.nextPhase();
draw();
}
}
@FXML
public void onScissorsClicked() {
if(battle.getPhase() == 1) {
hand_player= 2;
hand_enemy= rand.nextInt(3)+ 1;
result= battle.battle(hand_player, hand_enemy, battle.getPhase());
battle.nextPhase();
draw();
}
}
@FXML
public void onPaperClicked() {
if(battle.getPhase() == 1) {
hand_player= 3;
hand_enemy= rand.nextInt(3)+ 1;
result= battle.battle(hand_player, hand_enemy, battle.getPhase());
battle.nextPhase();
draw();
}
}
//Mettre à jour le dessin en fonction de la progression
public void draw() {
switch (battle.getPhase()) {
case 0:
label_text.setText("Jeu de Jaken");
image_player.setImage(ROCK);
image_enemy.setImage(ROCK);
break;
case 1:
label_text.setText("Saisho est Goo, Janken...");
break;
case 2:
image_player.setImage(changeImage(hand_player));
image_enemy.setImage(changeImage(hand_enemy));
switch (result) {
case 1:
label_text.setText("Vous gagnez! !!");
break;
case 2:
label_text.setText("Tu as perdu...");
break;
case 3:
label_text.setText("C'est Aiko!");
default:
break;
}
break;
default:
break;
}
}
//Mettre à jour l'image de la main de Janken
private Image changeImage(int hand) {
switch (hand) {
case 1:
return ROCK;
case 2:
return SCISSORS;
case 3:
return PAPER;
default:
return ROCK; //exception
}
}
}
Vient ensuite Battle.java, qui traite Janken.
Battle.java
package game;
//Classe qui traite Janken
public class Battle {
private int phase; //Tenez la progression du jeu
//Progression 0 sur la création d'objet:Initialiser sur le premier écran de veille
public Battle() {
this.phase= 0;
}
//Traitez le courrier indésirable. 1 si vous gagnez,2 si vous perdez,Renvoie 3 pour Aiko
public int battle(int p, int e, int phase) { //p:Ma main, e,La main de l'adversaire
if(phase==1) { //Progression 1:Fonctionne uniquement en attendant l'entrée
//La main de Janken est goo:1,Choki:2,Par:3
if(p==1) {
if(e==1) return 3;
else if(e==2) return 1;
else if(e==3) return 2;
}
else if(p==2) {
if(e==1) return 2;
else if(e==2) return 3;
else if(e==3) return 1;
}
else if(p==3) {
if(e==1) return 1;
else if(e==2) return 2;
else if(e==3) return 3;
}
}
return -1; //exception
}
//Passez à l'étape suivante. Mettre à jour à 0 lorsque la phase atteint 3
public void nextPhase() {
phase++;
if(phase>2)phase= 0;
}
//Récupérateur de progrès
public int getPhase() {
return phase;
}
}
Une fois que vous avez créé les deux classes ci-dessus et copié et collé l'image de la main de Janken dans le package pic, vous avez terminé. Vive le bon travail.
En fait bouger
-
Écran initial
-
Écran d'attente d'entrée
-
Résultat: appuyez sur le bouton OK pour revenir à 1.
en conclusion
Cette fois, à la place d'une extension du précédent Hello World, j'ai créé un jeu Janken en utilisant une classe dans un autre package et en lisant des images. Nous vous serions reconnaissants si vous pouviez l'utiliser comme matériel de pratique en changeant l'image à utiliser ou en modifiant la mise en page avec SceneBuilder.
Merci d'avoir lu jusqu'ici.
Recommended Posts