Scratchで〇×クイズを作ろう 発展編③最終結果を表示する画面を作ろう
前回の発展編②では、問題をランダムで出題できるようにプログラムを改造しました。
今回は、ゲームの最後にプレイヤーに結果を伝える画面を作っていきます。
今までやってきたことちょっと変えれば作れる内容になっているので、今までどのようにやってたか思い出しながら作っていきましょう。
発展編①はこちら： 発展編② ランダムに問題を出そう
〇×クイズを作ろう トップ記事はこちら： 〇×クイズを作ろうトップ記事
今回やることを整理しよう
発展編③でどんなことをやっていくか整理していきます。
やりたいこと
今回は、プレイヤーが何問正解したのか表示する『結果画面』を作ります。
問題を５問解いたら結果画面を表示するように改造していきます。
今は正解した数を数えていないので、新しく『正解数』という変数を作って「問題に正解したら『正解数』を１ずつ変える」ようにしてあげます。
改造する場所と内容
今回改造する内容は次の通りです。
| 改造する場所 | 改造する内容 |
|---|---|
| 『正解・残念』のスプライト | ・新しく『正解数』という変数を作る ・「正解」のメッセージを受け取ったら『正解数』の変数を1ずつ変える |
| 『問題文』のスプライト | ・緑の旗が押されたとき、『正解数』の変数を初期化（リセット）する |
| 結果画面 | ・新しく作る ・結果画面になったとき、スプライトの他のスクリプトを止める ・音を鳴らす ・音が終わったらすべてを止める |
| 正解数のスプライト | ・新しく作る ・『問題画面』になったら隠す ・『結果画面』になったら『正解数』の変数に入っている数字に応じてコスチュームを切り替える |
| 次へのスプライト | ・５問終わったら『結果画面』を表示させる ・『結果画面』になったら隠す |
| 次へのスプライト | ・５問終わったら『結果画面』を表示させる ・『結果画面』になったら隠す |
『結果画面』の詳細な仕様
今回新しく『結果画面』でどんなことをするのか細かく見ていきます。
『結果画面』ではプレイヤーが正解した数を画面に表示させます。正解した数と一緒に、メッセージも表示させます。
メッセージは、正解した数に応じて変わるようにします。
例えば、正解数が少なかったら、「残念でした。あきらめずにもう一度挑戦してみてね！」といったメッセージや、正解数が多かったら、「おしい！満点までもう一歩。次は満点を取れるようにがんばろう！」のようなメッセージを表示するようにします。
『正解数』のスプライトの詳細な仕様
『正解数』のスプライトは『結果画面』に表示するものになります。
下の画像の赤い文字で書かれている部分を『正解数』のスプライトとして作成するものになります。
『正解数』のスプライトには、正解した数とメッセージがあります。
これらは、『正解数』の変数に入っている数字に応じて変わるので、コスチュームを複数個作って表現します。
問題は全部で５問出題するので、コスチュームは６個用意する必要があります。（全問不正解：0 ～ 全問正解：５ なので、「0, 1, 2, 3, 4, 5」の6個必要。）
プログラミングしよう
では、実際にプログラミングしていきましょう。
『正解・残念』のスプライト
このスプライトのプログラムを次のように改造します。
・新しく『正解数』という変数を作る
・「正解」のメッセージを受け取ったら『正解数』の変数を1ずつ変える
新しい変数を作ろう
『正解・残念』のスプライトをクリックして、プログラムを改造していきます。
まずは、『正解数』という変数を新しく作りましょう。この変数は、他のスプライトでも使用するので、「すべてのスクリプト用」として作ります。
変数の作り方を忘れてしまった場合は、「基本編③」を見て思い出しましょう。
「正解」のメッセージを受け取ったら１ずつ変えよう
プレイヤーが問題に正解したら、新しく作った『正解数』の変数を１ずつ変えていきます。
問題に正解したら「正解」のメッセージが来るので、「正解」のメッセージを受け取ったときに１ずつ変えます。
『正解数』の変数を１ずつ変えるプログラムは次のようになります。
これで、『正解・残念』のスプライトの改造は完了です！
プレイヤーが問題に正解したときに、新しく作った『正解数』の変数が１ずつ変わるようになりました。
『問題文』のスプライト
このスプライトのプログラムは、次のように改造します。
・緑の旗が押されたとき、『正解数』の変数を初期化（リセット）する
『正解数』の変数を初期化（リセット）しよう
『問題文』のスプライトをクリックして、「緑の旗が押されたとき、『正解数』の変数を０にする」ようにプログラミングしましょう。
もし、やり方が分からない場合は、「発展編①」で他の変数を初期化（リセット）しているので、それと同じようにプログラミングしてみましょう。
『正解数』のプログラムを初期化（リセット）するプログラムは次のようになります。
これで、『問題文』のスプライトの改造は完了です！
ゲームを開始したら、必ず『正解数』の変数の数字が「0」から始まるようになりました。
結果画面
『結果画面』は次の内容で新しく作ります。
・背景に『結果画面』を新しく作る
・結果画面になったとき、スプライトの他のスクリプトを止める
・音を鳴らす
・音が終わったらすべてを止める
『結果画面』を新しく作ろう
下の画像のような画面を背景に作りましょう。
作り方が分からなくなったら「基本編②」を見て、操作方法を思い出しましょう。
『結果画面』になったら他のスクリプトを止めよう
『結果画面』を作ったら、背景に新しいプログラムを追加します。
「『結果画面』になったら、スプライトの他のスクリプトを止める」となるようにプログラミングしましょう。
『スプライトの他のスクリプトを止める』というのは、『すべてを止める▼』ブロックをクリックすると出てきます。
「『結果画面』になったら、スプライトの他のスクリプトを止める」プログラムは次のようになります。
これで、他の場所で動いているプログラムがすべて止まります。
音を鳴らそう
他の場所で動いているプログラムが止まったので、BGMもなくなってしまいます。
なので、『結果画面』が表示されたときの効果音が鳴るようにします。好きな音を選んで、終わるまでその音が鳴るようにプログラミングしましょう。
音の鳴らし方を忘れてしまった場合は、「基本編④」を見て思い出しましょう。
下の画像のようにクリックして、好きな音を選びましょう。
音を選んだら次のようにプログラミングして、終わるまで音が鳴るようにします。
下の画像では、「Tada」という音が鳴るようにしています。
これで、『結果画面』になったら音が鳴るようになりました。
すべてを止めよう
最後に、すべてを止めて、ゲームを終了させましょう。
すべてを止めるプログラムは次のようになります。
これで、『結果画面』は完成です！
新しく作った『結果画面』が表示されたら、音が鳴ってゲームが終了するようになりました。
『正解数』のスプライト
『正解数』のスプライトは、次の内容で新しく作ります。
・『正解数』という名前のスプライトを新しく作る
・『問題画面』になったら隠す
・『結果画面』になったら『正解数』の変数に入っている数字に応じてコスチュームを切り替える
スプライトを作ろう
『正解数』のスプライトを新しく作って、コスチュームを６個用意しましょう。メッセージは自由に入力してください。
スプライトの作り方を忘れてしまった場合は、「基本編②」を見て思い出しましょう。
『問題画面』になったら隠そう
このスプライトは、『結果画面』になったときだけ表示させたいので、『問題画面』になったとき隠すようにしましょう。
スプライトを隠すプログラムは「基本編③」で出てきているので、分からない場合はそちらを見て思い出しましょう。
『問題画面』になったら隠すプログラムを次のようになります。
これで、『問題画面』になったら、『正解数』のスプライトは隠れるようになりました。
『正解数』の変数の数字に応じてコスチュームを切り替えよう
『正解数』の変数に入っている数字と同じ番号のコスチュームにして、スプライトを表示しましょう。
このプログラムは、「発展編①」で作った問題文のコスチュームを切り替えるときと同じようにプログラミングします。ただし、次の点を注意してください。
次のようなプログラムになります。
これで、『正解数』のスプライトは完成です！
『問題画面』になったら隠れて、『結果画面』になったら正解した数と同じコスチュームを表示するようになりました。
背景のプログラムで、『緑の旗が押されたとき、問題画面にする』としているので、ゲームが開始されたらこのスプライトは隠れるようになっています。
『次へ』のスプライト
『次へ』のスプライトのプログラムは次のように改造します。
・５問終わったら『結果画面』を表示させる
・『結果画面』になったら隠す
５問終わったら『結果画面』を表示させる
『次へ』のスプライトの今のプログラムは、『出題した問題数』を判定して、「すべてを止める」か「『問題画面』にする」か処理を分岐しています。
この部分を、「『出題した問題数』が５なら『結果画面』にする」となるようにプログラミングしましょう。
「『出題した問題数』が５なら『結果画面』にする」プログラムは次のようになります。
これで、問題が５問出したら、『結果画面』が表示されるようになります。
『結果画面』になったら隠そう
『結果画面』になったらスプライトが隠れるようにプログラミングしましょう。
『次へ』のスプライトだけでなく、他のスプライトも『結果画面』に表示させたくないので、『次へ』のスプライトと他のスプライトをまとめてプログラミングしていきましょう。
『結果画面』になったら隠すプログラムを追加するスプライトは次のスプライトになります。
・次へ
・正解・残念
・解説文
どのスプライトも同じようなプログラムになります。
・『次へ』のスプライト
・『正解・残念』のスプライト
・『解説文』のスプライト
これで、すべてのプログラミングが完了です。
実行して確認しよう
最後に、今回新しく作ったプログラムと改造したプログラムが正しく動作するか確認しましょう。
『正解・残念』のスプライト
このスプライトは、次のポイントに注目して確認しましょう。
確認ポイント
・正解した数を正しく数えていること（『結果画面』に表示される正解数が正しいこと）
・『結果画面』になったら、スプライトが隠れること
・ゲームを何回もやってみても、正解した数が正しく数えていること
（『正解数』の変数の初期化(リセット)の確認）
『結果画面』
結果画面になったときの動作を、次のポイントに注目して確認しましょう。
確認ポイント
・ゲーム中に鳴っていたBGMが止まること（他のスクリプトが止まっていることを確認）
・『結果画面』になったときに新しく設定した効果音が鳴ること
・効果音が終わったら、ゲームが終了すること
『正解数』のスプライト
このスプライトは、次のポイントに注目して確認しましょう。
確認ポイント
・『問題画面』と『解説画面』では、このスプライトは、表示されていないこと
・『結果画面』になったら、スプライトが表示されること
・正解した数と表示されているコスチュームの番号を同じであること
『次へ』のスプライト
このスプライトは、次のポイントに注目して確認しましょう。
確認ポイント
・１～４問目までは、『次へ』をクリックしたら『問題画面』が表示されること
・５問目は、『次へ』をクリックしたら『結果画面』が表示されること
・『結果画面』が表示されたら、スプライトが隠れること
『解説文』のスプライト
このスプライトは、次のポイントに注目して確認しましょう。
確認ポイント
・『結果画面』になったら、スプライトが隠れること
まとめ
お疲れ様でした！
これで、「〇×クイズゲーム」は完成です！
今回の発展編③でやった内容は、これまでやってきたことを覚えていれば、簡単だったと思います。
もし、途中でつまづいてしまった人は、前の記事を見て復習しましょう。
以下のリンクから、『〇×クイズゲーム』のプログラムが見ることができます。
〇×クイズゲームのプログラムを見る最後に、今回作った「〇×クイズゲーム」を自分なりにアレンジしてオリジナルゲームを作ってみてください。
次の記事「発展編④」はこちら↓
発展編④ オリジナルゲームにアレンジしよう
〇×クイズを作ろうトップ記事はこちら↓
〇×クイズを作ろうトップ記事
おすすめ
Scratchでのプログラミング学習におすすめの書籍です。