・ゲームに必要な機能を整理しよう

今回は計算ゲームを作っていくよ。 グリーンフラッグをおすと、足し算や引き算がはじまり、計算結果を入力していくよ。 毎回、正解か不正解かが判定されて、それに応じて得点が減ったり増えたりするゲームだよ。

今回つくる計算ゲームは大きく分けて２つの流れがあるよ。 １つ目は、計算問題が出題される ２つ目は、回答した値に対して、正解の判定がされる。 ３つ目は、問題が連続して出題される。 ただの画像でしかない数字を、つくったプログラムでランダムに変化させる処理や、正解の判定の処理についてしっかり理解できるようになろうね! では、実際に作っていこう！

・背景・スプライトの設定を確認しよう

このチャプターでは、背景とスプライトの設定を確認していくよ。 つぎに、スプライトの見た目や位置を整えていくよ。

今回は、2桁の数字と1桁の数字を足したり引いたりするよ。 数字1の10の位のスプライトをクリックしたときの大きさと位置をきめるね。

• 大きさを50%
• x座標を100、y座標を80

つぎに、数字1の1の位のスプライトをクリックしたときの大きさと位置をきめるね。

• 大きさを50%
• x座標を140、y座標を80

つぎに、数字2の1の位のスプライトをクリックしたときの大きさと位置をきめるね。

• 大きさを50%
• x座標を140、y座標を40

つぎに、数字3の10の位のスプライトをクリックしたときの大きさと位置をきめるね。

• 大きさを50%
• x座標を100、y座標を-10

つぎに、数字3の1の位のスプライトをクリックしたときの大きさと位置をきめるね。

• 大きさを50%
• x座標を140、y座標を-10

つぎに、プラスやマイナスの記号のスプライトの大きさと位置をきめるね。

• 大きさを50%
• x座標を60、y座標を40

今回は、引き算からはじめるので、コスチュームはマイナスを選択しておこう。 つぎに、筆算をするときのよこの線のスプライトの大きさと位置をきめるね。

• 大きさを80%
• x座標を100、y座標を18

最後に、監督役のFrogのスプライトの大きさと位置をきめるね。

• 大きさを40%
• x座標を-120、y座標を20

ここまで、完成したら動作を確認してみよう！ 各スプライトがきれきれいに並んでいればOKだよ。 みんなの画面でもやってみよう！

・乱数で見た目をランダムに変更しよう

このチャプターでは、計算ゲームの問題がランダムで表示されるようにしていくよ。 乱数とコスチュームを組み合わせて、ランダムな変化をさせるための方法を理解しよう。

処理のながれについて説明するね。 コスチュームを乱数でランダムに変化させて、そのコスチューム番号を変数に返す。 というながれだね。 数字には1～9と0のコスチュームが設定されていたね。 コスチューム番号は1～9は1～9と対応しているけど、0のコスチューム番号は10となっていることに注意が必要だよ。

各数字のコスチューム番号を変数の値になるようにしなければいけないから、変数を5つつくろう。

• 「数字1の10の位」
• 「数字1の1の位」
• 「数字2の1の位」
• 「数字3の10の位」
• 「数字3の1の位」

特に0がコスチューム番号10であることには注意が必要だよ。

まずは、Frogのスプライトにstartを送る処理を入れよう。

各数字にコスチュームと乱数のブロックを組み合わせて、数字の見た目をランダムに変化させるよ。 さらに、変数「数字1の10の位」に「コスチューム」を値として設定しよう。

コスチューム#は、たとえば数字の見た目が5の場合はコスチューム番号である「5」という値になるよ。 数字1の1の位についても同じように設定していこう。

10の位とちがって0でもOKなので、値を1から10までとしているよ。 ここで、数字が0である場合の変数の値については条件分岐させる処理を入れておこう。

これで、見た目が0のとき、つまりコスチューム番号が10のときは例外で、数字1の1の位の値を0にして、それ以外のときは、コスチューム番号がそのまま数字1の1の位の値になるよ。 制御ブロックの処理を作ったらつなげておこう。

これで、数字1の見た目は0から9までランダムに変化するようになったよ。 最後に、数字2の1の位だね。 これまでと同じだね。 ここまで完成したら、動作を確認してみよう。 グリーンフラッグをおすたびに、数字1と数字2の見た目がランダムでかわって入ればOKだよ。

さあ！ここまで、 みんなの画面でもやってみよう！

・コスチュームを計算結果と連動させよう

このチャプターでは、数字3が計算された結果になるようにしていくよ。 方法は色々あるけど、今回は引き算の筆算をイメージして処理をつくっていくね。 まずは1の位が正しく常時されるようにしていくよ。

処理の流れについて説明するね。 0を表示させるためには、コスチューム番号を10としなければいけないことが重要だよ。 まずは特殊な場合の処理を作り、そのあとくりさがりの有無で場合わけをしていくね。 まず数字3の1の位のスプライトに引き算1の位のブロック定義から定義ブロックをつくっていこう。 数字1の1の位が数字2の1の位より大きくなければ、くり下がりの処理が必要ひつようだね。 処理は、数字1の1の位の値に10を足してから数字2を引けばいいね。

たとえば、43-28は3から8が引けないから13から8を引いて5と書くよね。

最後に、スペースキーがおされれば、定義ブロックの処理がはじまるようにするよ。

くり下がりがない場合は普通に引き算して数字3の1の位に値を代入しよう。 代入とはセットするというイメージだよ。 くり下がりがある場合は、数字1に10足してから数字2を引けばいいね。

演算ブロックの重ね順には注意をしてね。 [数字1の1の位+10]を先につくって、[～ – ～]と重ねよう。 つくったブロックを、すでにつくってある[もし～でなければ]のブロックと合体させよう。

これで、1の位は正しく表示されるようになったよ。 最後に、スペースキーがおされれば、定義ブロックの処理がはじまるようにするよ。 ここまで完成したら、動作を確認してみよう。 グリーンフラッグをおしてスペースをおせば1の位が正しく計算されていればOKだよ。

数字1の方が大きい場合、数字2の方が大きい場合が正しければOKだよ。 数字1と数字2が同じ場合はなかなか現れないので、少し工夫がひつようだよ。 数字1の1の位と数字2の1の位のスプライトの乱数のブロックを、たとえば両方とも5から6までの乱数とするとして見ればいいよ。 それでも、5や6の場合しか確認することができないので、今後何度か確認する中でおかしな結果になった場合はもどってきて考えよう。 さあ!ここまで、みんなの画面でもやってみよう!

・くり下がりの有無で場合を分けよう

このチャプターでは、数字3の10の位についても正しく表示されるようにしていくよ。 処理の流れについて説明するね。 数字3の10の位の値が0となれば表示しないようにする処理がひつようだね。 くり下がりがあり、数字3が0となってしまった場合の処理は、非表示つまり隠す処理が入ることになるよ。

まずはブロック定義から引き算10の位の定義ブロックをつくっていこう。 くり下がりがあるかないかで場合を分ければいいので、[もし～でなければ]のブロックを用いてつくっていこう。 条件は、「数字2の1の位が数字1の1の位より大きくなければ」だね。

つぎに、くり下がりありの場合の処理を作るよ。 具体的には、 数字1の10の位の値から1を引けばいいね。 数字3の10の位が0となってしまった場合は、非表示としたいので、場合分けの処理をつくっていくよ。

つぎに、くり下がりがない場合の処理を作るよ。

表示するのブロックを入れている理由は、非表示になっているものを再度表示させるためにひつようとなるからだよ。 これまでつくったブロックを定義ブロック引き算10の位に合体させよう。

最後に、スペースキーが押されれば、定義ブロックの処理が始まるようにするよ。 グリーンフラッグを押して、問題を表示させ、数字3が正しく引き算の結果が表示されていればOKだよ。 全ての場合を動作確認するのは難しいけど、くり下がりありの場合となしの場合は必ず確認しよう。 みんなの画面でもやってみよう！ ここまで完成したら、動作を確認してみよう。

・くり上がりの有無で場合を分けよう

このチャプターでは、引き算だけでなく足し算も正しく結果が表示されるようにするよ。 引き算のときと同じように筆算で考えていこう。 まずは1の位の処理をつくるよ。

処理の流れについて説明するね。 引き算のときと同様に、0を表示させるためには、コスチューム番号を10としなければいけないことが重要だよ。 まずは特殊な場合の処理を作り、そのあとくりあがりの有無で場合わけをしていくね。

繰り上がりの有無で場合分けをしていくね。 コスチュームを「+」にしてから、足し算3の1の位のスプライトを選択しよう。

まずは足し算1の位の定義ブロックをつくっていこう。 足した結果が10となる場合は、数字を0、コスチュームを0としよう。

数字1の1の位と数字2の1の位の足し算が10より大きくなければ、くり上がりの処理が必要だね。

足し算が10の場合はすでに処理しているため、10より大きいか小さいかで場合を分けていることに注意しよう。 くり上がりの処理は、数字1と数字2の1の位を足して10を引いた数を書けばいいね。 たとえば、 14+79は4と9を足して13だから3と書くね。

つくったブロックを、すでにつくってある[もし～でなければ]のブロックと合体させよう。

これで、1の位は正しく表示されるようになったよ。 最後に、スペースキーがおされれば、定義ブロックの処理が始まるようにするよ。

これは、引き算の処理が行われてから足し算の処理が行われることになっているので、あとで修正していくよ。 ここまで完成したら、動作を確認してみよう。 みんなの画面でもやってみよう！

・くり上がりの有無で場合を分けよう

このチャプターでは、数字3の10の位についても正しく表示されるようにしていくよ。

まずは、全体の流れを確認しよう。 10の位は2つの大きく2つの条件を判断しなければいけません。

• 1の位からのくり上がりがあるかないか
• 10の位のくり上がりがあるかないか

処理の流れは次のようになるよ。 少しふくざつだけど頑張ろう！

まずは、足し算10の位の定義ブロックをつくっておこう。

つぎに、1の位のくり上がりがあるかないかの処理をつくろう。 1の位のくり上がりがあるのは合計が9より大きいときだね。

1の位のくり上がりがあった場合は、1つ目の数字に1を足したものを計算しなければいけないよね。 つまり、10の位の計算結果が10になってしまった場合のことを考えていくよ。 その計算の結果をコスチュームに反映するよ。

さらに、その結果10の位もくり上がるときがあるよね。 今回の計算では99+9でも108までにしかならないので、くり上がりがある場合は1と0を表示すればいいね。 今回は、クローンを使ってみるよ。

10の位は0、100の位は1と表示したいので、今の位置でGlow-0にコスチュームを変えて、クローンをつくる。 クローンは分身みたいなものだよ。 そして、クローンじゃない本体は左に少しずれてGlow-1にコスチュームを変える。という処理をつくるよ。

クローンについては、今後もつかうことがあるので、少しずつ理解していこうね。 くり上がりがない場合の処理は、特に処理が必要ないので次のようになるよ。

足し算10の位の定義ブロックと合わせて、これまでつくった処理を次のようにくみあわせよう。 ただし、1つ注意があるので修正していくよ。

今のままではGlow-0は分身で表示されないままになってしまうため、表示するブロックを追加しよう。

最後に、スペースキーが押されれば、定義ブロックの処理が始まるようにするよ。

確認したい計算(今回は足し算)が下につながっていればいいよ。 あとで引き算と足し算のどちらも対応できるように修正していくよ。 ここまで完成したら、動作を確認してみよう。 スペースを押して、足し算の結果が正しく行えていればOKだよ。 くり上がりを確認するためには、数字1の10の位を1から9までの乱数ブロックを9から9までの乱数と変更してからの方が早く確認できるよ。 確認後は、1から9までの乱数に変更するのをもどすのをわすれないようにしよう。 さあ！ここまで、みんなの画面でもやってみよう！

・余りを活用しよう

このチャプターでは、これまでつくった足し算と引き算の処理をランダムで出し分け、正しく計算結果が表示されるようにしていくよ。 ランダムで変更させることで、計算ゲームも完成に近づいてきたね。 処理の流れについて説明するね。 まず、スペースを押すたびにプラスとマイナスの表示が代わり、計算処理を分けるよう処理となるよ。

ゲームの状態を足し算と引き算で変化するね。 変数「mode(モード)」を作るよ。 値は足し算の意味であるplus(プラス)と引き算の意味であるminus(マイナス)となるよ。 モードによって処理を変化させるので、記号のスプライトに[もし～ならでなければ]のブロックをつかって作っていこう。

ランダムに条件を分けるときは、[～を～で割った余り]ブロックをつかえばいいよ。 乱数と組み合わせよう。

これで、1～100までの数がランダムに変化して、たとえば55のときは2で割った余りが1、76のときは2で割った余りが0となるね。 余りがランダムで1や0と変化するから、条件として今後もよくつかえるよ。 しっかり理解しておこう。

ここまで完成したら、つくったブロックを合体させ、グリーンフラッグがクリックされたときのブロックにつなげておこう。 グリーンフラッグをおして途中の動作を確認してみよう。 何回かおすと、ランダムでプラスとマイナスの記号が出し分けられることが確認できたらOKだよ。

スペースを押したときの計算結果についても正しくなるように、処理をつくっていこう。 モードの値に応じて、数字3の10の位、1の位の見た目を変更して行けばいいね。 まずは、数字3の10の位だね。 すでにあるブロックを変更していこう。

次に、数字3の1の位だね。 すでにあるブロックを変更していこう。 ここまで完成したら、動作を確認してみよう。 計算のモードがプラスやマイナスに代わり、それに応じて正しく計算結果が表示されていればOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・各位の数字を使って、正解判定をつくろう

このチャプターでは、正解を入力して、計算クイズの解答ができるようにしていくよ。 調べるの中にある[～と聞いてまつ]ブロックの使い方について理解できるようにしておこう。 処理の流れについて説明するね。 まずは、Frogに聞かれた数字を答えとして、変数「回答」にするよ。

その後、数字3の10の位と1の位の値をつかって、正解の値をきめて、メッセージ[answer]を送るという処理をつくっていこう。 監督役のFrogに処理をつくっていこう。

変数「回答」と変数「正解」をつくろう。 回答の値は自分が答えた値となり、正解の値は表示されている計算の結果の値となるよ。 つぎに、計算のモードが[plus]か[minus]かによって正解が変わるね。

つぎに、正解の値をつくっていくよ。 ここからは正解の値をつくっていくよ。 主に演算ブロックが中心となるので、注意が必要だよ。 重ねる順番や、つまむ場所、セットの仕方にコツが必要なので、練習しよう。 まずは、足し算の正解の値をつくっていこう。

数字1の10の位が5で、1の位が3の場合、5かける10たす3で53が数字1の値だね。 つくったブロックと数字2を足し算しよう。

同じ作業で引き算の正解の値もつくろう。

つくったブロックのつまむ場所に注意して正解の値としていこう。

最後に新しいメッセージ[answer]をつくろう。

ここまで完成したら、動作を確認してみよう。 回答と正解を表示して確認してね。 グリーンフラッグを押すと、「いくつ？」とFrogが聞いてきて、下に入力画面が現れるね。 計算した結果を入力して、エンターボタンを押してみよう。 回答と正解が表示されることが確認できていればOKだよ。 回答はわざと間違った値も入力してみて何度か試してみてね。 さあ！ここまで、みんなの画面でもやってみよう！

・問題が連続して出題されるようにしよう

このチャプターでは、これまでつくった処理をつなぎ合わせて、連続して問題に答えられるようにするよ。 処理がはじまるきっかけを調整していくので、しっかり理解していこう。

処理の流れについて説明するね。 まずは、答えおわった後の処理を作り、そこから[start]を送るよ。 そうすると、問題が連続で出題されるようになるね。 さらに、[answer]が送られたタイミングで、数字3が表示される、それまでは隠す処理をつくっていくよ。 [隠す]ブロックをつかったときの注意点にも気をつけていこう。

答えと正解が同じか、そうでないかで場合を分けよう

正解の判定がおわったら次の問題が出題されるように[start]を送ろう。

今のままだと、数字3が表示されたままなので、少し見た目がよくないね。 問題が出題されたタイミング、つまり[start]を送るたびに数字3の10の位と1の位を非表示にしよう。 [隠す]ブロックをつかうよ。

さらに、数字3の10の位で、すでにつくってあるブロックを少し変更しよう。

[隠す]ブロックをつかったときは、どこのタイミングで表示するかもセットで考えるようにしようね。 数字3の1の位もおなじ変更を加えよう。

仕上げに、プラスとマイナスの記号もタイミングを変更しなければいけないね。 ここまで完成したら、動作を確認してみよう。 グリーンフラッグをクリックして、何度か計算をしてみよう。

連続して回答ができること、足し算と引き算がランダムで出題されること、 正解と不正解が判定されていることを確認できたらOKだよ。

注意1

1問目の正解判定がうまくいかない場合は、次のように[0.1秒待つ]の処理をいれてください。 正解の判定はコスチュームが変わってから行うべきなので、少し処理を遅らせています。

注意2

特殊なケースでは、まだ表示が正しくありません。 バグとして、最後のレッスンで修正します。 さあ！ここまで、みんなの画面でもやってみよう！

・得点計算、制限時間を設定しよう

このチャプターでは、ゲーム終了の条件を決めていくよ。 制限時間を設けて、制限時間がきたら、Frogが得点を言うための処理をつくっていくよ。 今回は制限時間が30秒、正解したら1点プラス、不正解だと1点マイナスとしよう。

処理の流れについて説明するね。 今回のレッスンでは、制限時間についてはタイマーというブロックをつかっていくよ。 ゲームの時間を制御するのに便利なブロックなので、仕組みを理解していこうね。 制限時間と得点の変数をつくろう。 変数名は制限時間と、score(スコア)とするよ。 制限時間はタイマーから計算した値となり、scoreは正解数に応じて値が変化していくよ。

変数の最初の状態を設定していこう。 scoreは0、制限時間は30だね。 変数は常に初期化するタイミングを考えるようにしよう。 さらに、[start]の直前でリセットしておこう。

タイマーについて補足で説明するね。 ページを開いた瞬間から1,2,3とふえていくよ。 タイマーをリセットのブロックが処理されると、値が0に戻るという仕組みだよ。 つぎに、得点であるscoreが増減する仕組みをつくっていくね。 正解と不正解のあとにつなげよう。

つぎにゲームの制限時間がすぎると、終了する処理をつくっていくよ。 [～まで待つ]ブロックをつかおう。 リセットされたタイマーが30より大きくなるまで待ち、[スプライトの他のスクリプトを止める]ブロックが実行されると、回答が入力できなくなるよ。

続けて、終了!と2秒言ったあとの処理をつくっていくね。 得点を言う処理でよくつかわれるのが、演算の中にある、[～と～]ブロックだよ。

2個つかって、3つの文字列「得点は」「socore」「点だよ!」をつなげることができる便利なブロックだからつかいかたをしっかりマスターしよう。

変数もつかえるところがポイントだね! 仕上げにゲームを終了させる処理をつくっていこう。 これで、ゲームが終了!と2秒言ったあとに、得点に応じて「得点は～点だよ!」と3秒言って全ての処理が止めらるよ。

ここまで完成したら、動作を確認してみよう。 試しに、タイマーと制限時間を表示して確認してみてね。 正解や不正解によって得点が正しく変化すること、タイマーの値が30より大きくなると、ゲームが正しいうごきで終了することが確認できればOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・バグの発見

一見うまくいっているように思えても、細かなバグが発生してしまう場合があります。 今回の例でいうと、

• 足し算で答えが3桁となったあと、ずっと答えの100の位が表示される。
• 引き算で答えが1桁となったあと、再度、答えが1桁となった場合10の位が表示される。

上記のような全てのケースを、最初から想定して作るのが難しいことが開発においてはよくあります。 バグを直す練習をしましょう。

バグの解消1

数字が3桁になるのは数字1の位が9であること、数字1の1の位と数字2の1の位の足し算が10以上となるときです。 数字が3桁になったあと、ずっと答えの100の位が表示されてしまう理由を考えましょう。 答えが100の位になったときは、自分自身の コスチュームを0にしてクローンを作成、自分自身は100の位の位置に移動してしています。

これを解消するためには、クローンは削除、自分自身は10の位の位置へもどらなければいけません。 これで解決できているはずです。 やってみましょう。

バグの解消2

引き算の答えの結果1の位だけになる場合の表示がうまくいきません。 なぜでしょう？ 1の位だけになる場合を考えずに数字の表示のタイミングを常にするようにしてしまっていたためです。 この表示するブロックはどこにあることがベストでしょう？ 外してみると、今度は足し算の10の位が表示されません。 バグを見つけた場合は、なぜそのようなことが起こっているのか理由を考えることが大切ですね。 表示するは、タイミングを次のように変えなければいけません。

・まとめ

このレッスンで、制御の使い方にはなれてきたかな？ まず、コスチュームには番号がついているため、番号を指定して変更することができたね。 途中で何度も[もし～でなければ]のブロックを用いて、2パターン、3パターンの条件に応じて処理を変えることができたね。 今後もよくつかうからしっかり理解しておこう。 最後に、変数を使いこなして、ゲームの状態を表したり、得点を計算させたりして、変数が便利な道具であることも分かってくれたかな？ 制御のブロックを複数組み合わせた時の処理が分かってくれば、プログラミングの考え方が理解できてきた証拠だよ。