【Processing】4択×3問のクイズゲーム（クラスを利用）

Question

前提・実現したいこと

processingでクラスを使った4択×3問を作成したいです。
初心者で大変申し訳ないのですが、ヒントをいただけたらと思います。
よろしくお願いいたします。

・スタート画面の表示

■スペイン語で「ありがとう」はどれ？
1.サンキュー
2.グラシアス
3.メルシー
4.ダンケシェン

■世界で１番高い山は？
1.富士山
2.キリマンジャロ
3.エベレスト
4.アコンカグア

■日本三名園ではないものは？
1.偕楽園
2.兼六園
3.後楽園
4.新宿御苑

・問題ごとに正解・不正解/正答の表示
・最後に正解数の表示

クラスとオブジェクトの使い方がいまいち理解できません。

発生している問題・エラーメッセージ

4択×1問でいったん考えてみましたが、それでもできません。

試したこと

Start start;
Quiz quiz;
Correct correct;
Incorrect incorrect;
Result result;

int y1 = 300;
int y2 = 400;
int y3 = 500;
int y4 = 600;
int y5 = 700;
int w = 200;
int h = 100;

String[][]questions={{"■スペイン語で「ありがとう」はどれ？","サンキュー","グラシアス","メルシー","ダンケシェン"},
{"■世界で１番高い山は？","富士山","キリマンジャロ","エベレスト","アコンカグア"},
{"■日本三名園ではないものは？","偕楽園","兼六園","後楽園","新宿御苑"}}; //問題文と選択肢
int[]answers={2,3,4,}; //解答
int flow; // 0start, 1quiz, 2result
int score; //正解数

void setup() {
size(1000,1000);
background(255);
fill(0);
PFont font=createFont("MS Gothic", 24);
textFont(font);

start = new Start();
correct = new Correct();
incorrect = new Incorrect();
quiz = new Quiz();
result =new Result();
}

void mouseClicked() {
switch (flow) {
case 0:
flow=1;
quiz.display();
break;
case 1:
if (w < mouseX && mouseX < width/2+ w && y1 < mouseY && mouseY < answers[0]*100+200 + h){
flow=2;
correct.display();
score++;
}
else{
flow=2;
incorrect.display();
}
break;
case 2:
flow=0;
result.display();
break;
}
}

class Start{
void display(){
background(255);
fill(0);
text("問題！", width/3, 250);
}
}

class Quiz{
void display(){
background(255);
fill(0);
text(questions[0][0], width/3, 200);
text("1."+questions[0][1],width/2,y1);
text("2."+questions[0][2],width/2,y2);
text("3."+questions[0][3],width/2,y3);
text("4."+questions[0][4],width/2,y4);
}
}

class Correct{
void display(){
background(255);
fill(0);
text("正解！",width/2,300);
textSize(25);
}
}

class Incorrect{
void display(){
background(255);
fill(0);
text("不正解！",width/2,300);
text("正解は"+answers[0]+"でした",width/2,500);
}
}

class Result{
void display(){
background(255);
fill(0);
text("正解数は"+score+"でした", width/2, 300);
}
}

初心者で大変申し訳ないのですが、ヒントをいただけたらと思います。
よろしくお願いいたします。

Answer 1

「クラスを定義し，オブジェクトを生成」しただけでは「クラスを活用」したとは言えませんよね。

過去に同じクイズゲームで回答したので、見てみてください。
thkanaさんの回答や私の回答、合わせて3パターンあるのでヒントにはなると思います。

オブジェクト - processingのオブジェクトの考え方｜teratail

わからない点があればコメントください。
どれかピンときたのがあれば、より質問の仕様に近く書き直すことも致します。

---

まずは既存クラスのオブジェクトを、使うことからやりましょう。
それがわからないと、自分でクラスを作ることもできませんからね。

メニューの「スケッチ」ー「ライブラリをインポート...」ー「ライブラリを追加...」から「G4P | Provides a set of 2D GUI controls and multiple window support.」をインストールします。

とりあえず1問だけのクイズです。

import g4p_controls.*; // GButton等を使用できるようにする

GLabel label; // ラベル（文字の表示）
GButton button1; // ボタン
GButton button2;
GButton button3;
GButton button4;
GButton nextButton;

void setup() {
  size(400, 400);

  G4P.setDisplayFont("MS Gothic", G4P.PLAIN, 24); // GButton等で使用するフォントの設定

  // GLabelクラスのオブジェクトを生成し、label変数に代入
  label = new GLabel(this, 20, 20, 360, 170, "■世界で１番高い山は？");
  label.setTextAlign(GAlign.CENTER, GAlign.MIDDLE); // 上下左右中央ぞろえ

  // GButtonクラスのオブジェクトを生成し、button1変数に代入（以下くりかえし）
  button1 = new GButton(this, 20, 190, 360, 40, "富士山");
  button2 = new GButton(this, 20, 240, 360, 40, "キリマンジャロ");
  button3 = new GButton(this, 20, 290, 360, 40, "エベレスト");
  button4 = new GButton(this, 20, 340, 360, 40, "アコンカグア");

  nextButton = new GButton(this, 20, 340, 360, 40, "もういちど");
  // nextButtonはほかのボタンと処理内容がが違うので、呼ばれるメソッドを別個に設定
  nextButton.addEventHandler(this, "handleNextButton");
  nextButton.setVisible(false); // 最初は非表示
}

void draw() {
  background(220);
}

// GButtonを押したときは、これが呼ばれることになっている（void draw()が毎フレーム呼ばれるのと同じ）
// addEventHandlerしてあるボタンは、そちらが呼ばれてこれは呼ばれない、
void handleButtonEvents(GButton button, GEvent event) {

  // 押されたボタンのテキストを取得
  String answer = button.getText();

  if ("エベレスト".equals(answer)) {
    label.setText("正解！"); // ラベルのテキストを変更
  } else {
    label.setText("不正解！\n正解は エベレスト でした");
  }

  // 邪魔なボタンを非表示
  button1.setVisible(false);
  button2.setVisible(false);
  button3.setVisible(false);
  button4.setVisible(false);

  // nextButtonを表示
  nextButton.setVisible(true);
}

// nextButton専用の処理
void handleNextButton(GButton button, GEvent event) {
  label.setText("■世界で１番高い山は？");

  button1.setVisible(true);
  button2.setVisible(true);
  button3.setVisible(true);
  button4.setVisible(true);

  nextButton.setVisible(false);
}

詳細は分からなくても、やっていることは単純なのでご理解いただけると思います。
配列やint等を使って状態を管理すれば、これを複数問題にすることも容易でしょう。

そのオブジェクトとメソッドが何をするかがわかっていれば、その裏でどんなことが起きているかを気にする必要はありません。

例えばGButtonはnewしただけで、その位置サイズで表示されます。
マウスオーバーやクリックで色が変わり、押されたらhandleButtonEventsを呼び出します。

中では複雑なことが行われているかもしれませんが、（自分でも他人でも）いったん作ってしまえばいつでも簡単に使えます。

---

そのうえで自作クラスですが、まず何をクラスで表すかですよね。

lisalweaponさんは画面をクラスで表しました。系統としてはこちら寄りですよね。
thkanaさん回答
私2個目

目に見えるものだけでなく、問題クラスのようなものもあり得ます。
私1個目

うまく使えば複雑だったものが劇的に単純化できますが、失敗すればかえって複雑になるだけということもあります。

簡単なものの場合かえって冗長になっただけに見えることもあります。

難しいことはどこまでも難しさは変わらないこともあります（ボタンのようなものは、ごちゃごちゃした条件になるのは避けられません）
そういうのが面倒で、私はライブラリを使いました^^;

Comments

[lisalweapon]

早速のアドバイス、誠にありがとうございます。
実は先の質問と回答はすでに参考にさせていただいておりました。
毎日考えているのですが、こんがらがって何がわからないのかも、わからなくなっております。
もう少し考えてみます。

[TN8001]

追記しました。

>何がわからないのかも、わからなくなっております。

何もかもわからない（気がする）ということですね。
別に恥じる必要はありません。皆はじめは何もわからなかったのですから。

>もう少し考えてみます。

何か進展？があったら質問を編集あるいは追記してください。

>ヒントをいただけたらと思います。

ということなのでわざと直接的な回答を避けていますが、もしかしてずれすぎていますか？^^;

[lisalweapon]

TN8001様
本当にありがとうございます。
時間はかかるかと思いますが、理解を深めながら作成していきたいと思います。
よろしければまた質問させてください。
取り急ぎ返信させていただきます。