プログラミング演習 Ⅰ 第 14 回 2017/6/5( 月 ) ゲームを作るクイズ担当 : 紅林林

(1)

プログラミング演習Ⅰ

第14回　2017/6/5(⽉月)

ゲームを作る − クイズ

(2)

クイズゲーム概要

o

 

画⾯面に問題⽂文と選択肢3

つを表⽰示

o

 

1, 2, 3

のキーで答える

o

 

正解の場合は○、

不不正解の場合は×を重ね

て表⽰示

o

 

1 つの問題が終わったら

次の問題へ移動

o

 

最後に正解した数を表⽰示

解答前の画⾯面解答後の画⾯面（正解の場合）解答後の画⾯面（不不正解の場合）

(3)

要素

o

 

クイズ

n

 

問題⽂文

n

 

選択肢

n

 

正解（問題の答え）

n

 

解答（解答者が選んだ選択肢）

o

 

表⽰示・演出など

n

 

正解数表⽰示

n

 

正解・不不正解の表⽰示など

(4)

Step 0:

準備

メインタブ int scene; //シーン番号 int score; //正解数 void setup() { size(320, 320); scene = 0; //シーン番号0に設定 score = 0; //正解数を0に設定 } void draw() { //シーンの切切替 switch(scene) { case 0: //開始画⾯面 opening(); //開始画⾯面の表⽰示 break; case 1: //プレイ画⾯面 playing(); //プレイ画⾯面の表⽰示 break; case 2: //結果画⾯面 result(); //結果画⾯面の表⽰示 break; default: //それ以外 break; } } opening タブ void opening() { //開始画⾯面 } playing タブ void playing() { //プレイ画⾯面 } result タブ void result() { //結果画⾯面 } 0:開始画⾯面 1:プレイ画⾯面 2:結果画⾯面シーン番号で画⾯面を切切替タブ追加 opening タブ追加 playing タブ追加 result break; がないと次のケースまで実⾏行行してしまう

quiz00.zip

(5)

Step 1

1. 開始画⾯面の追加

2. 終了了画⾯面の追加

(6)

Step 1-1:

開始画⾯面の追加

opening タブ void opening() { //開始画⾯面 background(204); textAlign(CENTER, CENTER); //上下左右中央 fill(0); //⽂文字を⿊黒くする text("3択クイズ", 40, 40, 240, 80); text("クリックして開始", 40, 240, 240, 40); //クリックしたらプレイ画⾯面に移動 if(mousePressed == true){ scene = 1; //シーン番号を1にする } } 追加または修正個所は⽂文字を⾚赤で表⽰示四⾓角枠内に⽂文字を描く上下左右中央に揃えるマウスをクリックした場合は次のシーン（プレイ画⾯面）へ移動する

(7)

Step 1-2:

結果画⾯面の追加

resultタブ void result() { //結果画⾯面 background(204); textAlign(CENTER, CENTER); //上下左右中央 fill(0); //⽂文字を⿊黒くする text("正解数 : " + score, 40, 60, 240, 40); text("クリックして再挑戦", 40, 140, 240, 40); text("キーを押して終了了", 40, 220, 240, 40); //クリックしたら再挑戦、何かキーを押したら終了了

if (mousePressed == true) {

scene = 1; //シーン番号を1

score = 0; //正解数を0に戻す

} else if (keyPressed == true) {

exit(); //終了了 } } 正解数の表⽰示は変数scoreを使⽤用するマウスをクリックした場合はプレイ画⾯面へ移動するキーを押したらプログラム終了了

(8)

Step 1-3:

フォントの設定

メインタブ: 追加 int scene; //シーン番号 int score; //正解数 PFont font; //フォント void setup() { size(320, 320); scene = 0; //シーン番号0に設定 score = 0; //正解数を0 font = createFont("メイリオ", 24); textFont(font); //フォントの選択 } //以下省省略略 opening タブ (⼀一部のみ表⽰示) fill(0); textSize(36); //フォントサイズの設定 36 text("3択クイズ", 40, 40, 240, 80); textSize(18); //フォントサイズの設定 18 text("クリックして開始", 40,240,240,40); 設定したフォントより⼩小さいサイズなら使⽤用できる resultタブ (⼀一部のみ表⽰示) fill(0); textSize(24); //フォントサイズの設定 24 text("正解数 : "+score,40,60,240,40);

(9)

Step 1

終了了時点

メインタブ int scene; int score; PFont font; void setup() { size(320, 320); scene = 0; score = 0; font = createFont("メイリオ", 24); textFont(font); }

quiz01.zip

void draw() { //シーンの切切替 switch(scene) { case 0: //開始画⾯面 opening(); //開始画⾯面の表⽰示 break; case 1: //プレイ画⾯面 playing(); //プレイ画⾯面の表⽰示 break; case 2: //結果画⾯面 result(); //結果画⾯面の表⽰示 break; default: //それ以外 break; } }

(10)

Step 1

終了了時点

result タブ void result() { //結果画⾯面 background(204); textAlign(CENTER, CENTER); fill(0); textSize(24); text("正解数 : " + score, 40, 60, 240, 40); text("クリックして再挑戦", 40, 140, 240, 40); text("キーを押して終了了", 40, 220, 240, 40); //クリックしたら再挑戦、キーを押したら終了了 if(mousePressed == true) { scene = 1; score = 0;

} else if(keyPressed == true) { exit(); } } opening タブ void opening() { //開始画⾯面 background(204); textAlign(CENTER, CENTER); fill(0); textSize(36); text("3択クイズ", 40, 40, 240, 80); textSize(18); text("クリックして開始", 40, 240, 240, 40); //クリックしたらプレイ画⾯面に移動 if(mousePressed == true) { scene = 1; } } playing タブ void playing() { //プレイ画⾯面 }

quiz01.zip

(11)

Step 2

1. プレイ画⾯面の切切り替え

2. プレイ画⾯面の追加、問題⽂文、選択肢の表⽰示

(12)

Step 2-1:

プレイ画⾯面の切切り替え

メインタブ

int scene; //シーン番号 int score; //正解数 int quizNum; //問題番号 PFont font; void setup() { size(320, 320); scene = 0; //シーン番号0 score = 0; //正解数0 quizNum = 1; //問題番号1 //以下省省略略 playing タブ void playing() { //プレイ画⾯面 switch (quizNum) { case 1: Q1(); //問題1 break; default: break; } } 問題番号 quizNum 変数の追加問題番号 quizNum を1に設定する複数のプレイ画⾯面（問題）を quizNum_{で切切り替える} 実際の問題⽂文はQ1()で表⽰示

(13)

Step 2-2:

プレイ画⾯面の追加

Q1 タブ void Q1() { //問題1 background(204); //背景を灰⾊色に } Q1タブを追加する

(14)

Step 2-2:

問題⽂文、選択肢の表⽰示

Q1 タブ void Q1() { //問題1 background(204); //背景を灰⾊色に //問題⽂文表⽰示 textSize(18); text("じゃんけんでグーに勝つのは?", 40, 40, 240, 80); //選択肢表⽰示 textSize(18); text("(1)グー　", 80, 120, 160, 40); text("(2)チョキ", 80, 180, 160, 40); text("(3)パー　", 80, 240, 160, 40); //正解 } 問題⽂文と選択肢を四⾓角枠内に表⽰示する

(15)

Step 2-3:

キーを押して画⾯面移動

Q1 タブ void Q1() { //問題1 background(204); //背景を灰⾊色に //問題⽂文表⽰示 textSize(18); text("じゃんけんでグーに勝つのは?", 40, 40, 240, 80); //選択肢表⽰示 textSize(18); text("(1)グー　", 80, 120, 160, 40); text("(2)チョキ", 80, 180, 160, 40); text("(3)パー　", 80, 240, 160, 40); //正解 Q1 タブ //何かキーを押したら結果画⾯面へ移動 if(keyPressed == true) { scene = 2; } }

(16)

Step 2

終了了時点

メインタブ int scene; int score; int quizNum; PFont font; void setup() { size(320, 320); scene = 0; score = 0; quizNum = 1; font = createFont("メイリオ", 24); textFont(font); }

quiz02.zip

(17)

Step 2

終了了時点

opening タブ void opening() { //開始画⾯面 background(204); textAlign(CENTER, CENTER); fill(0); textSize(36); text("3択クイズ", 40, 40, 240, 80); textSize(18); text("クリックして開始", 40, 240, 240, 40); //クリックしたらプレイ画⾯面に移動 if(mousePressed == true) { scene = 1; } } playing タブ void playing() { //プレイ画⾯面 switch(quizNum) { case 1: Q1(); break; default: break; } }

quiz02.zip

(18)

Step 2

終了了時点

} else if(keyPressed == true) { exit(); } }

quiz02.zip

Q1タブ void Q1(){ //問題1 background(204); textSize(18); text("じゃんけんでグーに勝つのは？", 40, 40, 240, 80); //選択肢表⽰示 textSize(18); text("(1)グー　", 80, 120, 160, 40); text("(2)チョキ", 80, 180, 160, 40); text("(3)パー　", 80, 240, 160, 40); //正解 //何かキーを押したら結果画⾯面に移動 if(keyPressed == true){ scene = 2; } }

(19)

動作確認

o

 

画⾯面移動の確認

n

 

開始画⾯面からマウスクリックでプレイ画⾯面へ

移動するか？

o

 

⽂文字が正しく表⽰示しているか？

n

 

画⾯面からはみ出たり、⽂文字化けしていないか

問題1から結果画⾯面、終了了は

同じキー⼊入⼒力力ですぐ移動する

(20)

Step 3

1. 選択肢を選び解答する

2. 正解・不不正解の判定

(21)

Step 3-1:

選択肢を選び解答する

メインタブ(一部のみ表示) int scene; //シーン番号 int score; //正解数 int quizNum; //問題番号 boolean isSelected; //クイズの解答を選択したか PFont font; void setup() { size(320, 320); scene = 0; //シーン番号0 score = 0; //正解数0 isSelected = false; //未選択 quizNum = 1; //問題番号1 //以下省略

クイズに答えたかどうか

変数 isSelected

false(未選択)に設定

(22)

Step 3-1:

選択肢を選び解答する

Q1 タブ(一部のみ表示)　変更前 //何かキーを押したら結果画面へ移動 if(keyPressed == true) { scene = 2; }

上の3⾏行行を

変更更する

_{キーが押されている}

かつ

そのキーが

1または2または3

Q1 タブ(一部のみ表示)　変更後 //1か2か3を押したら結果画面へ移動

if(keyPressed == true && (key=='1' || key=='2' || key=='3')) { isSelected = true; 　} //選択したらシーン移動 if(isSelected == true){ scene = 2; }

1か2か3が押されたら

解答したとする

(isSelected = true)

(23)

Step 3-2:

正解・不不正解の判定

Q1 タブ(一部のみ表示)　

//選択肢表示

textSize(18);

text("(1)グー　", 80, 120, 160, 40);

text("(2)チョキ", 80, 180, 160, 40);

text("(3)パー　", 80, 240, 160, 40); //正解

//正解

char answer = '3';

この問題の正解を設定

⼊入⼒力力したキーと⼀一致するか判定

⽂文字型(char)の変数 answer

(24)

Step 3-2:

正解・不不正解の判定

//1か2か3を押したら結果画面へ移動

if(keyPressed == true && (key=='1' || key=='2' || key=='3')) { isSelected = true;

//正解なら正解数を+1 if (key == answer) { score++; } 　} //選択したらシーン移動 if(isSelected == true){ scene = 2; }

⼊入⼒力力したキーが正解と⼀一致したら

(key == answer)

正解数 score を +1

(25)

Step 3-3:

タイマー処理理

メインタブ(一部のみ表示) int scene; //シーン番号 int score; //正解数 int quizNum; //問題番号 int lapse; //経過時間 boolean isSelected; //クイズの解答を選択したか PFont font; void setup() { size(320, 320); scene = 0; //シーン番号0 score = 0; //正解数0 lapse = millis(); //経過時間の設定 isSelected = false; //未選択 //以下略

キーを押してから

時間をおいてシーン移動

できるようにする

経過時間の設定

millis()で経過時間を

ミリ秒単位で設定

(26)

Step 3-3:

タイマー処理理

//1か2か3を押したら結果画面へ移動

if(keyPressed == true && (key=='1' || key=='2' || key=='3')) { isSelected = true;

lapse = millis(); //経過時間の再設定

//正解なら正解数を+1 if (key == answer) { score++;

} 　}

//選択して500ミリ秒以上経過したらシーン移動

if(isSelected == true && millis() – lapse > 500){

scene = 2; isSelected = false;　//未選択に戻す }

現在の時間と経過時間の差が

500ミリ秒以上

millis() – lapse > 500

解答した時点から

計測を開始する

(27)

Step 3

終了了時点

メインタブ int scene; int score; int quizNum; int lapse; boolean isSelected; PFont font; void setup() { size(320, 320); scene = 0; score = 0; quizNum = 1; lapse = millis(); isSelected = false; font = createFont("メイリオ", 24); textFont(font); }

quiz03.zip

(28)

Step 3

終了了時点

opening タブ void opening() { //開始画⾯面 background(204); textAlign(CENTER, CENTER); fill(0); textSize(36); text("3択クイズ", 40, 40, 240, 80); textSize(18); text("クリックして開始", 40, 240, 240, 40); //クリックしたらプレイ画⾯面に移動 if(mousePressed == true) { scene = 1; } } playing タブ void playing() { //プレイ画⾯面 switch(quizNum) { case 1: Q1(); break; default: break; } }

quiz03.zip

(29)

Step 3

終了了時点

} else if(keyPressed == true) { exit();

} }

(30)

Step 3

終了了時点

quiz03.zip

Q1タブ void Q1(){ //問題1 background(204); //問題⽂文表⽰示 textSize(18); text("じゃんけんでグーに勝つのは？", 40, 40, 240, 80); //選択肢表⽰示 textSize(18); text("(1)グー　", 80, 120, 160, 40); text("(2)チョキ", 80, 180, 160, 40); text("(3)パー　", 80, 240, 160, 40); //正解 char answer = '3'; //1, 2, 3キーを押したら結果画⾯面に移動

if(keyPressed == true && (key == '1' || key == '2' || key == '3')){ isSelected = true; lapse = millis(); if(key == answer){ score++; } } //選択してから500ミリ秒経過したら移動 if(isSelected == true && millis() -‐ lapse > 500){

プログラミング演習 Ⅰ 第 14 回 2017/6/5( 月 ) ゲームを作る クイズ 担当 : 紅林林