すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

Java JavaFXで簡単なGUI版じゃんけんゲームを作成してみた!

JavaFX - じゃんけんゲームの実行結果

おはようございます、すずしんです。

最近あまりプログラミングをしていませんでしたので…。
久しぶりにJavaのプログラミングをしてみました。

何のプログラムを作成しようかと悩んだのですが…。
どうせなら、GUI付きのプログラム(JavaFX)で作成してみようと思い立ちました。
そして、あまり難しくなさそうなテーマを扱おうということで…。
今回は、簡単な「じゃんけんゲームを作成してみることにしました。

じゃんけんゲームの仕様

今回作成することにしたじゃんけんゲームの仕様は以下のような感じです。

  • コンピュータの手・自分の手・じゃんけんの結果を表示するラベルと、自分の手を選ぶためのボタン(グー・チョキ・パー)から構成される。
  • いずれかの手のボタンを押すと、コンピュータがランダムな手を選びじゃんけんをする。
  • じゃんけんをした時、コンピュータの手・自分の手・じゃんけんの結果を表示する。

じゃんけんゲームのプログラム作成

それでは、ここから実際にじゃんけんゲームを作成していきます。
今回のじゃんけんゲームでは、「Janken.fxml」「janken.css」「JankenController.java」「Janken.java」の4つのファイルを作ります。

Janken.fxmlの作成

Janken.fxmlでは、じゃんけんゲームの画面(GUI)を作成します。
SceneBuilderを使いながら、仕様に沿ってラベルとボタンを配置していきます。
ラベルとボタンの細かい部分は特に指定していませんので、自由に決めてもらって構いませんよ。
自分にとって分かりやすい画面になっていれば問題無いです。

とりあえず、私の場合は以下のような画面構成にしてあります。

JavaFX - じゃんけんゲーム

参考までに、私が作成したJanken.fxmlのコードを載せておきますので…。
もし同じ画面にしたい場合には利用してくださいね。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="240.0" prefWidth="360.0" stylesheets="@janken.css" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.suzushin7.sample.janken.JankenController">
  <columnConstraints>
      <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" />
      <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" />
      <ColumnConstraints halignment="CENTER" hgrow="SOMETIMES" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints vgrow="SOMETIMES" />
    <RowConstraints vgrow="SOMETIMES" />
    <RowConstraints vgrow="SOMETIMES" />
    <RowConstraints vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <Label fx:id="cpuHandLabel" text="コンピュータの手: -" GridPane.columnSpan="3" />
      <Label fx:id="myHandLabel" text="あなたの手: -" GridPane.columnSpan="3" GridPane.rowIndex="1" />
      <Label fx:id="resultLabel" text="結果: -" GridPane.columnSpan="3" GridPane.rowIndex="2" />
      <Button onAction="#putOutRockHand" text="グー" GridPane.rowIndex="3" />
      <Button onAction="#putOutScissorsHand" text="チョキ" GridPane.columnIndex="1" GridPane.rowIndex="3" />
      <Button onAction="#putOutPaperHand" text="パー" GridPane.columnIndex="2" GridPane.rowIndex="3" />
   </children>
</GridPane>

janken.cssの作成

janken.cssでは、画面に表示するGUI部品の基本的な設定を行います。
ここでは、フォントサイズを20px、ボタンの推奨幅を100pxにしています。

.button, .label {
    -fx-font-size: 20px;
}

.button {
    -fx-pref-width: 100px;
}

JankenController.javaの作成

続いて、コントローラークラスとして「JankenController.java」を作成します。

cpuHandLabel・myHandLabel・resultLabelは、それぞれコンピュータの手・自分の手・じゃんけんの結果を表示するためのラベルです。
putOutRockHand()・putOutScissorsHand()・putOutPaperHand()は、それぞれ自分の手をグー・チョキ・パーとしてじゃんけんをするメソッドです。
これらはdoJanken()メソッドで処理しています。

doJanken()メソッドでは、ラベルの更新メソッドであるupdateLabels()を呼び出しています。
引数として、自分の手(myHand)と相手の手(cpuHand)を渡しています。
この際に、新規の相手の手はgetCpuHand()で取得しています。

updateLabels()では、自分の手・相手の手・じゃんけんの結果を各ラベルに表示させます。
じゃんけんの結果については、getResult()メソッドを使って取得しています。

package jp.suzushin7.sample.janken;

import java.net.URL;
import java.util.Random;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;

public class JankenController implements Initializable {
    private final Random random = new Random();
    private final String[] hands = {
        "グー", "チョキ", "パー"
    };
    
    @FXML private Label cpuHandLabel;
    @FXML private Label myHandLabel;
    @FXML private Label resultLabel;
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
    
    }
    
    @FXML
    private void putOutRockHand() {
        doJanken(0);
    }
    
    @FXML
    private void putOutScissorsHand() {
        doJanken(1);
    }
    
    @FXML
    private void putOutPaperHand() {
        doJanken(2);
    }
    
    private void doJanken(int myHand) {
        updateLabels(myHand, getCpuHand());
    }
    
    private int getCpuHand() {
        return random.nextInt(3);
    }
    
    private String getResult(int myHand, int cpuHand) {
        int r = (myHand - cpuHand + 3) % 3;
        return (r == 2) ? "あなたの勝ち!" : ((r == 1) ? "あなたの負け!" : "あいこ!");
    }
    
    private void updateLabels(int myHand, int cpuHand) {
        cpuHandLabel.setText("コンピュータの手: " + hands[cpuHand]);
        myHandLabel.setText("あなたの手: " + hands[myHand]);
        resultLabel.setText("結果: " + getResult(myHand, cpuHand));
    }
}

Janken.javaの作成

最後に、メインクラスとなるJanken.javaの作成をします。

ここでは、単純にFXMLLoaderを使ってJanken.fxmlをロード、そしてSceneにセットするくらいです。
このアプリケーションのタイトルは「じゃんけん」としてみました。
…そのままですね!

package jp.suzushin7.sample.janken;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Janken extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {        
        Parent root = FXMLLoader.load(getClass().getResource("Janken.fxml"));
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        
        primaryStage.setTitle("じゃんけん");
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        Application.launch(args);
    }
}

じゃんけんゲームの実行結果

それでは、早速プログラムを実行してみます。

プログラムが実行されると、まず以下のような画面が表示されます。

JavaFX - じゃんけんゲーム

この画面上にある、グー・チョキ・パーのいずれかのボタンをクリックすると、コンピュータとじゃんけんができます。
じゃんけん後は、コンピュータの手・自分の手・じゃんけんの結果が画面上に表示されます。
ちなみに、コンピュータはランダムな手を選びますので、じゃんけんをする度に結果が変わります。

JavaFX - じゃんけんゲームの実行結果

ひとこと

今回は、JavaFXを使って簡単なじゃんけんゲームを作成してみました。
JavaFX入門用の題材としては、このじゃんけんゲームはちょうど良いのではないでしょうか?
もし良かったら、あなたもじゃんけんゲームを作成して遊んでみてくださいね。