初心者OK!こどもプログラミング入門(Scratch)

子ども向けプログラミング学習の定番「Scratch」の使い方。我が子(小学1年)の初挑戦記録付き。

簡単!親子で遊べるクイズアプリの作り方【○×クイズ-その1】

 

f:id:shufufu:20170323014310j:plain

“メッセージのやり取り”でできる“○×ゲーム”を作る

プログラミングの醍醐味、ゲームを作ってみよう! ということで、Scratch(スクラッチ)を使ったごく簡単な「○×クイズ」の作り方とポイントを何回かに分けて紹介していきたいと思います。

 

クイズを表示して、〇か×をクリックしてもらい、正解か間違いかを表示するという流れのこのクイズ。キャラ同士の会話のやり取りにも使った「メッセージを送る」「メッセージを受け取った時」ブロックを使って作ることができます。

 

まずは完成した状態をチェック!

ここで作るアプリは、実際にどのようなものになるのかをまずは見てみましょう。

f:id:shufufu:20170323014712j:plain

f:id:shufufu:20170323014725j:plain

f:id:shufufu:20170323014731j:plain

f:id:shufufu:20170323014743j:plain

 

ここで回答者が○×のどちらかをクリックします

f:id:shufufu:20170323014826j:plain

f:id:shufufu:20170323014845j:plain

f:id:shufufu:20170323014853j:plain

 

間違えた方をクリックすると、こんな具合に…

f:id:shufufu:20170323014900j:plain

f:id:shufufu:20170323014936j:plain

f:id:shufufu:20170323014948j:plain

f:id:shufufu:20170323014956j:plain

f:id:shufufu:20170323015016j:plain

 

このように、○か×を選んで答えられる3つのクイズが出るアプリです。

 

最初に用意したものをチェック!

まずは最初に用意したキャラなどをチェックします。

今回は背景は1種類のみなので、スクリプトなどは設定していません。好みの背景を入れておけばOKです。

 

カニのスプライトはコスチュームも追加

今回のメインキャラ、カニのスプライトはライブラリから追加したものです。答えを間違えたとき用に、カニの色を青く色を変えたコスチュームも用意しました。

f:id:shufufu:20170323015336j:plain

 コスチュームの色の変更の仕方はこちらの記事の通りです。

 

 そして「第一問!」と言うまでのカニのスクリプトはこちらです。

f:id:shufufu:20170323015321j:plain

 

冒頭では「緑の旗がクリックされたとき」をきっかけに、最初からステージに表示すること、赤い方のコスチュームにすること、表示位置を設定しています。(表示位置の設定はこちらの記事で紹介)

その後3秒待ち、2つのセリフを付けた状態です。

 

 文字を使ったスクリプトも活用!表示と非表示の切り替えに注目

 タイトルコール風に利用した「QUIZ TIME」という文字のスプライトは、ライブラリに用意された文字を組み合わせたもの。こちらで紹介した方法で作りました。

f:id:shufufu:20170323015637j:plain

スクリプトでチェックしておきたいのは、2秒だけ表示したあとで「隠す」を使って非表示にしているところです。このようにスプライトは、必要なときだけ表示して、不要なときは隠しておくのがポイントです。

f:id:shufufu:20170323015750j:plain

 

○と×には、ライブラリのアルファベットからOとXをそのまま使っています。こちらはタイトルコールのときはまだ不要なので、ひとまず隠しておくスクリプトを最初に設定しておきました。

f:id:shufufu:20170323015840j:plain

 

こだわりの文字で問題をスプライト化

セリフを言わせるブロックを使い、カニが問題を言うようにしても良いのですが、文字が小さく、長めの問題文は読みにくいこともあり、今回のアプリでは問題文の書かれた画像を作り、スプライトとして挿入しています。ゲームっぽい文字にしたことで、シンプルなセリフより楽しい雰囲気になっています。

f:id:shufufu:20170323014743j:plain

 

この画像の作成には、手軽に文字を画像化できる便利サイトを使用しました。次回はこのサイトの使い方を紹介したいと思います。

Scratchはもちろん、ブログのアクセントなどにも使えるとても便利なサービスですよ。

Copyright © 2016 初心者OK!こどもプログラミング All rights reserved.