トップに戻る

キー入力で画面を切り替えるクイズの仕組み

boolean のフラグで「出題」と「回答」を切り替える

実行画面（キーで操作） keyPressed

size(700, 400)

answeredFlag
true
selectNum
0

画面をクリックして 1〜4 や他のキーを押すか、上のボタンを押してください。出題画面では何かキーを押すと次へ、回答画面では 1〜4 で回答します。

プログラム 状態フラグ + 関数 
PFont font;
int selectNum = 0;
boolean answeredFlag = true;

void setup() {
  size(700, 400);
  background(255);
  fill(0); // テキストの色を黒に設定
  font = createFont("MS Gothic", 32, true);
  textFont(font);
  textAlign(CENTER, CENTER); // テキストを中央揃えに設定

  text("問題", width / 2, 100);
  text("（何かキーを押してください）", width / 2, 200);
}

void draw() {
  // draw 関数はここでは使用しません
}

void keyPressed() {
  if (answeredFlag) {
    // 次へ移動モード
    // 回答済フラグを初期化
    answeredFlag = false;
    showQuestion();
  } else {
    // 回答モード
    if ( key=='1' || key=='2' || key=='3' || key=='4' ) {
      selectNum = Character.getNumericValue(key);
      answeredFlag = true;
      showAnswer();
    }
  }
}

void showQuestion() {
  background(255); // 背景を再描画して以前の表示をクリア
  text("日本で一番高い山は？", width / 2, 100);
  text("1.富士山", width / 2, 200);
  text("2.エベレスト", width / 2, 300);
}

void showAnswer() {
  background(255); // 背景を再描画して以前の表示をクリア
  text("正解！", width / 2, 100);
  text("（何かキーを押してください）", width / 2, 200);
}

void showResult() {
  background(255); // 背景を再描画して以前の表示をクリア
  text("5問正解しました！", width / 2, 100);
}
answeredFlag で2つの状態を行き来する true ⇄ false
出題の画面 問題文と選択肢を表示。
1〜4 のキーで回答を待つ answeredFlag = false
1〜4 を押す →
showAnswer()
← 何かキーを押す
showQuestion()
回答の画面 「正解！」と次へ進む案内を表示。
何かキーで次の出題へ answeredFlag = true
押さえるポイント 画面・フラグ・キー
1

background(255) で前の表示を消す

画面を切り替えるたびに背景を白で塗り直してから text() を描きます。塗り直さないと前の文字が残ってしまいます。

2

boolean answeredFlag が「今どの画面か」を覚える

同じ keyPressed() でも、フラグが true なら出題へ、false なら回答処理へと分岐します。1つの変数で状態を管理するのがポイントです。

3

key=='1' と Character.getNumericValue(key)

押されたキーは文字 key で分かります。回答画面では 1〜4 のときだけ反応し、getNumericValue で文字 '1' を数値 1 に変換して selectNum に入れます。

4

関数で画面を分けると読みやすい

showQuestion() / showAnswer() / showResult() のように画面ごとに関数を分けると、処理の流れが追いやすくなります。

Javaの学習用の教材ページです。