パソコン作法

情報系の紹介をします

Javaでミニゲームを作ろう 5:じゃんけんゲームを作ろう 中編

それでは今回も、じゃんけんゲームの作っていきましょう。前編をご覧になっていない方はこちらをクリックしてください。

pcdiary.hateblo.jp

f:id:PCDiary:20180721180655p:plain

ジョン:それじゃあ、今回は「手の選択画面」を作って、前回に作成したスタート
    ボタンと連動させてみよう。

1.「手の選択画面」を作ろう

f:id:PCDiary:20180815235030p:plain

今から、この画面を作り、「タイトル画面」のスタートボタンと連動させます。。以下のソースコードをコピペしてください。

package janken;

import java.awt.Font;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class Janken extends JFrame implements ActionListener {
JPanel p=new JPanel();
JLabel label = new JLabel[5];
JButton
button = new JButton[4];

public static void main(String[] args) {
Janken frame=new Janken("じゃんけんゲーム");
frame.setVisible(true);
}

Janken(String title){
int x;
setTitle(title);
setBounds(100,100,300,250);
setSize(1000,800);
setLocationRelativeTo(null);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
p.setLayout(null);

for(x=0; x<label.length; x++){
label[x] = new JLabel();
label[x].setFont(new Font("MS ゴシック", Font.BOLD, 60));
p.add(label[x]);
if (x > 0) {
label[x].setFont(new Font("MS ゴシック", Font.BOLD, 30));
}
}

for(x=0; x<button.length; x++){
button[x] = new JButton();
button[x].setFont(new Font("MS ゴシック", Font.BOLD, 32));
button[x].addActionListener(this);
p.add(button[x]);
}

button[0].setText("スタート");
button[1].setText("グー");//1
button[2].setText("チョキ");
button[3].setText("パー");
label[0].setText("じゃんけんゲーム");
button[0].setBounds(340, 470, 300, 100);
label[0].setBounds(250, 10, 700, 400);

getContentPane().add(p);
}

@Override
public void actionPerformed(ActionEvent e) {
String cmdName=e.getActionCommand();//2

if("スタート".equals(cmdName)){
button[0].setBounds(0,0,0,0);
button[1].setBounds(200,400,200,200);
button[2].setBounds(400,400,200,200);
button[3].setBounds(600,400,200,200);
label[0].setText("手を選んでね");
label[0].setBounds(300,10,700,400); }
}
}

前編で紹介したコードに緑色部分を追加しました。

実行すると以下の画面が出てくるはずです。

f:id:PCDiary:20180815235024p:plain

スタートボタンを押してみてください。すると、次の画面に移ります。

f:id:PCDiary:20180905230128p:plain

それでは、メソッドの説明をしていきます。すべて過去の記事で説明しているので、簡単に解説します。

//1を見てください。ここでは、3つのボタンの名前をそれぞれ「グー、チョキ、パー」と設定しています。これらのボタンが、「手の選択画面」に出てきます。

また、

f:id:PCDiary:20180905230128p:plain

f:id:PCDiary:20180815235030p:plain

のようにボタンにイラストを追加するには、ImageIconクラスを使います。しかし、イラストは自分で書くか、ネットで拾ってこなければいけないので注意してください。

 

イラストを用意できたら、button[3].setText("パー");の下あたりに次のコードを追加してください。

ImageIcon icon1 = new ImageIcon("/Users/Owner/Documents/グー.png);
ImageIcon icon2 =new ImageIcon("/Users/Owner/Documents/チョキ.png");
ImageIcon icon3 =new ImageIcon("/Users/Owner/Documents/パー.png"); button[1].setIcon(icon1);
button[2].setIcon(icon2);
button[3].setIcon(icon3);

ここで、重要な注意点があります。それは上のコードで、/Users/Owner/Documents/グー.pngというように書いてあるところです。

これは、貼り付けたい画像が保存してあるところまでのパスで、人によってそれぞれ変わります。設定方法がわからない方は、「java ImageIcon パス」で検索してみてください。

次に//2を見てください。「String cmdName=e.getActionCommand();」のcmdNameは、押したボタンの名前を格納する変数でしたね。スタートボタンを押したら、この変数に「スタート」という文字列を格納します。

そして、「if("スタート".equals(cmdName)){~}」では、”スタート”と”cmdName”(つまり"スタート")が等しいので、{ }にある下のコードを実行します。

  1. button[0].setBounds(0,0,0,0);
  2. button[1].setBounds(200,400,200,200);
  3. button[2].setBounds(400,400,200,200);
  4. button[3].setBounds(600,400,200,200);
  5. label[0].setText("手を選んでね");
  6. label[0].setBounds(300,10,700,400); 

上のコードでは次のような操作が行われています。

  1. スタートボタンを消す。
  2. 「グー」ボタンを配置する。
  3. 「チョキ」ボタンを配置する
  4. 「パー」ボタンを配置する。
  5. 「じゃんけんゲーム」の名前を「手を選んでね」に変更する。
  6. 「手を選んでね」の文字位置を調整する。

 

ちなみに「タイトル画面」と「手の選択画面」は同じウィンドウです。ボタンの配置や文字を変化させて、違うウィンドウに入れ替わっているように見えるだけです。

 

まとめ

今回は「手の選択ボタン」を作って「タイトル画面」と連動させることができました。次回は、「勝敗画面」を作って「じゃんけんゲーム」を完成させます。