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

今回は的当てゲームを作っていくよ。 ボールを的にめがけて投げていくゲームだよ。

ゲームの途中ではキャットが、残りのパネルが何枚であるかを教えてくれるよ。 残りの球数については左上に表示されるよ。 最後に、打ち抜いた的の数のスコアを表示させるよ。 エフェクト効果も取り入れて、本格的なゲームとしていくね。 いくつかの機能をつくっていくけど、ダーツゲームやPKに応用できるから、しっかり理解して組み立てられるようになろうね!

今回つくる的当てゲームは大きく分けて３つの機能が必要だね。 １つ目は、ボールを投げる機能。 ２つ目は、的に当たったかどうかを判定する機能。 ３つ目は、スコアの管理および表示の機能。 どの機能も複雑で、関係しあうよ。 これまでのレッスンでつかった処理の流れがたくさん盛り込まれているので、すぐに答えを見てしまうのではなく、自分で考えながら進めてね。

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

このチャプターでは、背景とスプライトの設定を確認していくよ。 背景と合計7つのスプライトが表示されていればいいよ。 それぞれのスプライトの初期状態を指定するブロックを作っていくよ。

まずはキャットだね。 いつも通り監督の役だよ。

次にBaseballだね。 これは投げる球になるよ。

次にBaseball2だね。 これは残りの球数を表示するためのものだよ。 しばらくは左上に表示しておくよ。

次にframeだね。 パネルの枠となるよ。

前に出すのブロックで一番手前にしておき、 [1層下げる]のブロックを用いているよ。 これは、ボールと重なって見えないようにするためにつかっているよ。

次に的となるパネルだね。 5という名前である理由は真ん中のパネルだからだよ。 パネルにはコスチュームありとなしがあるよ。 [10層下げる]のブロックで、frameより後ろになるようにしているよ。 値の10について補足しておくと、スプライトの数以上であれば10以外の数字でも問題ないよ。 十分大きめにしておくといいね。

次はendだね。 これは、ゲーム終了時に半透明にしてスコアを表示するエフェクト効果のためのスプライトだね。 最初は幽霊の効果を100として見えないようにしているよ。

最後に、scoreだね。 スコアの数字だね。 コスチュームが1～9まであることを確認してね。 隠すブロックでしばらく非表示としておこう。 グリーンフラッグを押して見て、同じような大きさと位置関係になっていればOKだよ。 みんなの画面でもやってみよう！

・マウスの動きと変数を対応させよう

このチャプターでは、ボールを投げるための準備を進めていくよ。 「マウスの動きを検知して、下から上に早く動かしたらボールが投げられる」という機能を作っていくことにするね。 Baseballのスプライトにスクリプトをつくっていこう!

マウスの動きを調べるためには、変数をいくつか用意する必要があるよ。 [dx],[dxa],[dxaa],[dy],[dya],[dyaa]の６つの変数をつくろう! それぞれ、値はマウスの位置や速さになるよ。 xは横方向、yは縦方向を意味することはおさえておこう。 実際にブロックで使った時に説明するね。

まずは、マウスの位置を調べるブロックをつくっていくよ。 調べるの中にある[マウスのx座標]、[マウスのy座標]をつかっていくよ。 これで、リアルタイムでマウスの位置が記録されるようになったよ。

次に、マウスの速さを調べるブロックをつくっていくよ。

つくったブロックをつなげていこう。 あいだに、制御の中にある[～秒待つ]というブロックをつなげるのをわすれないでね。

これで、マウスを動かす速さを調べられるようになったよ。 完成したブロックについて、説明するね。 0.01秒待つのブロックがあるため、ある瞬間のx座標やy座標と、少し遅れた瞬間のx座標やy座標の差を調べることができているんだ。 「dxaやdyaの値が大きいほど、速く動いている」ということになるよ。 次に、マウスを速く動かしたことを判定するためのブロックをつくっていくよ。 制御のずっと～ブロックと、[もし～なら]ブロック、そして演算のブロックを組み合わせていくよ。

マウスを下から上に向かって速く動かしたかどうかを判定するためのブロックをつくっていくよ。 dxaaやdyaaは、マウスの最高速度を記録するための変数だよ。

次に場合分けの条件をつくっていくよ。

つくったブロックを組み合わせ、[ずっと]のブロックで囲もう。

これで、dyaがdyaaより大きくなるたび、つまり下から上に動かす速さが速くなるたびに、dxaaやdyaaの値を更新できるようになったよ。 少し補足して説明するね。 何かの最大値を調べるためには、常に大きい値を発見する度に、値を更新すればいいという処理を作ったことになるんだ。 しっかり理解しておこう。

でき上がったブロックを合体させよう。 つくったブロックにつかわれている、全ての変数を初期化するブロックを追加し、全体を定義ブロックにしておこう。 動作確認のために、グリーンフラッグがクリックされたら「マウスの動きを調べる」というブロックをつくろう。

ここまで、完成したら動作を確認しよう。 ６つ全ての変数を表示して、グリーンフラッグを押してみよう。 マウスを下から上にゆっくり動かしたあとに、dyaaの値を確認してみよう。 そのあと、マウスを下から上に少し早めに動かしてみて、dyaaの値が更新されていればOKだよ。 動作確認が終わったら、ブロックは削除しておこう。 さあ！ここまで、みんなの画面でもやってみよう！

・縦方向の移動を検知できるようにしよう

このチャプターでは、マウスの動きを調べる機能をつかって、 実際にボールが投げられるようにしていくよ。

shotというメッセージをつくり、条件を満たした時に送るようにしよう。

メッセージを送る条件を考えよう 縦方向に20より速く動かし、かつ、y座標が-70より上側にマウスがあるという意味だよ。

つくったブロックを繋げよう。 これで、マウスを下から上に速く動かしたときにメッセージshotを送るようになったので、マウスの動きを調べるブロックに合体させよう。

ここまで完成したら、処理の流れをつくっていくよ。 ゲームが開始されるメッセージstartをつくろう! メッセージをつくることができたら、短めの処理を4つをつくっていくよ。 グリーンフラッグが押されると、ゲームがstartされ、マウスの動きを調べながら、ボールはマウスについていくように動くよ。

マウスの動きが下から上へ速く動かされたら、「ボールを投げる」というメッセージを表示させ、またstartの状態に戻っていくよ。 ここまで完成したら、動作を確認しよう。 マウスを下から上に速く動かして、ボールを投げるというメッセージが出ていること。 また、マウスを下の方に移動させて待てば、表示が消えることを確認すればOKだよ。 さあ！ここまでみんなの画面でもやってみよう！

・投げたあとのボールの動きの処理をつくろう

このチャプターでは、shotのメッセージを受けて、ボールが実際に投げられるようにしていくよ。 shotを受けたときに、ボールが回転しながら小さくなって見えなくなる処理をつくっていくよ。

さらに、dxaaやdyaaの値に応じて、上下左右にボールが動くようにするよ。 まずは、ボールが小さくなって見えなくなる制御の処理をつくっていくね。

次に繰り返す処理をつくっていくよ。 処理が繰り返されるたびに大きさを小さくして、遠くにボールがとんでいったように見える仕組みをつくろう！ [x座標を～ずつ変える]のブロックを用いてdxaaやdyaaの値に応じて変更し、少しずつボールがズレていくようにしていることがポイントだよ。

つくったブロックを組み合わせて、定義ブロック「ボールを投げる」をつくろう。 定義ブロックの先頭に[スプライトの他のスクリプトを止める]を入れるのをわすれないでね。 [スプライトの他のスクリプトを止める]ブロックをいれたことで、マウスのポインターへいく処理が止められて、マウスからボールが離れていく動きをつくることができるようになったよ。

最後に、shotをうけとったときのブロックを変更していこう。 ここまで完成したら、動作を確認しよう。 マウスを動かし、ボールが投げられるようになっていればOKだよ。 ここまで、みんなの画面でもやってみよう！

・正方形状の当たり判定処理をつくろう

このチャプターでは、hitのメッセージをマトが受け取り、 当たっているかどうかを判定する仕組みをつくっていくよ。

さらに、当たっていれば、的のコスチュームを変更することで、実際に 的が撃ち抜かれたように変化させるよ。 ボールを投げて幽霊の効果が0になったあとのボールのx座標とy座標の値を変数に記録する。 その後、ボールからhitが送られる。 hitをうけとったマトは、当たっているかどうかを判定して、当たっていればコスチュームをなしに変更する。という流れになるよ。 ボールを投げて見えなくなる位置は、投げるたびに変わるよね。 だから変数[hx],[vy]をつくるよ。 それぞれボールが消えたときのx座標とy座標が値となるよ。

まずはbaseballのスクリプトに、hxとvyの値を決めるスクリプトをつくっていこう。

つくったブロックを、ボールを投げるブロックの下に合体させよう。 これで、ボールが投げられ見えなくなったあと、ボールのx座標とy座標が、それぞれhx,vyに記録されたよ。 その後ボールから、hitというメッセージが送られるよ。

次に5のスクリプトをつくっていこう。

hitをうけとったあと、条件を満たせばコスチュームがなしになるという処理をつくろう。

場合分けの条件を考えよう。 マトは1辺の長さが50の正方形なので、中心からそれぞれ25ずつ上下、左右があたりの範囲となるよ。 まずは、横方向hxの当たりの範囲をつくろう。

次に縦方向vyの当たりの範囲をつくろう。

できた４つのブロックを[～かつ～]を３つつかって条件にするためのブロックをつくっていこう。

重ねる順番も重要だから間違えないようにしてね。 完成したブロックに、４つを順にいれていこう。

完成した条件を[もし～なら]ブロックと組み合わせよう。 これで、当たりの判定をつくることができたよ。 ここまで完成したら、動作を確認してみよう。 ボールを投げて、5の的に当たり、コスチュームがなしになっていればOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・的の状態をリストで管理しよう

このチャプターでは、5の的に当たったことをリストに記録して、あとでスコアを集計できるようにしていくよ。

処理の流れについて説明するね。 まず、コスチュームがなしになったあと、リスト「ありなし判定」に「なし」と記録するよ。 9つのパネルの状態を、まとめておくためにリストをつくるよ。 変数の中にあるリストボタンをクリックして、リスト「ありなし判定」をつくろう。

まずは、リストの長さを決めていこう。 長さは9なので、制御の中にある[～回繰り返す]ブロックを用いるよ。 グリーンフラッグがクリックされたとき、全て削除してからつくることをわすれないでね。

次に、5の的のスクリプトを、すでにあるブロックに追加していこう。 ここまで完成したら、動作を確認してみよう。 リスト「ありなし判定」を表示して、5の的に当たったとき、リストの5が「なし」になっていればOKだよ。 ここまで、みんなの画面でもやってみよう！

・変数と横の位置を対応させよう

このチャプターでは、5の的を複製する前に、複製後もできるだけ変更の必要のないスクリプトをつくっていくよ。 パネルのナンバーを変数として設定して、位置などに適用していこう。

5のスプライトを選択してね。

パネルの場所は、左上から右に向かって1～3、1段下がって4～6、さらに1段下がって、6～8と変化させていくよ。

「panel_no」という変数をつくろう。 「このスプライトのみ」にチェックを入れわすれないように注意してね。 値はそれぞれパネルのナンバーと対応1～9をとるよ。

処理の流れについて説明するね。 まず、マトの大きさは1辺が50の大きさなので、パネルの場所に応じて50ずつ位置を変更する処理をつくっていこう。

まずは、横方向の処理をつろう。 x座標について、 1,4,7はマイナス50、 2,5,8は0、3,6,9はプラス50にする処理をつくっていくよ。

条件は、～を～で割った余りブロックをつかって処理していこう。 ブロックが完成したので、条件の中に合体させてね。 規則正しい場合分けをしたい時に、すごく便利だね。 覚えておこう。

つくったブロックを組み合わせよう。 一番上に、変数を[～にする]ブロックをつなげておこう。 ここまで完成したら、途中の動作確認をしてみよう。 [panel_noを～にする]ブロックの値を4、5、6に変更してクリックしてみよう。 それぞれ正しい位置に移動させられていればOKだよ。

定義ブロック「的位置」をつくっておこう。 ここまで、みんなの画面でもやってみよう！

・変数との縦位置を対応させよう

このチャプターでは、的の縦方向の位置を調整していくよ。 3増えるごとに処理を変えたいときの方法をしっかりと理解していこう。

的、つまり5のスプライトを選択してね。 y座標について、 1～3ならプラス50、 4～6なら0、 7～9ならマイナス50、 となる処理をつくっていくよ。 演算の中にある一番下のブロックをつかっていくよ。

panel_noを3で割ると、 1～3のときは0.333、0.666、1となり、 4～6のときは1.333、1.666、2となり、 7～9のときは2.333、2.666、3となるね。 それぞれ数字を切り上げると、1～3のときは1、4～6のときは2、7～9のときは3となるよ。

[～ – ～]のブロックと組み合わせよう。 これで1なら0、2なら1、3なら2の値になるように調節されたよ。

y座標を50から引き算する処理にしていくよ。 まずは、[～ – ～]のブロックの右側に[～ * ～]のブロックを入れてね。 これで、y座標50を基準として、[panel_no]が3増えるたびに50減らすという処理が完成したよ。

[y座標を～にする]ブロックと組み合わせて、完成させよう。 完成したブロックを定義ブロック「的位置」につなげておこう。 ここまで完成したら、途中動作の確認をしてみよう。ここまで、みんなの画面でもやってみよう！

・クローンされたスプライトの処理をつくろう

このチャプターでは、スプライトを複製していくよ。 1つずつ複製してもいいけど、スプライトが増えれば増えるほど、後から修正したい場合に、変更箇所が多くなってしまい、効率がよくないよね。 今回はクローンを利用して効率よく複製していこう。

的、つまり「5」のスプライトを選択してね。 クローンとは、今の自分を複製して次のスプライトになるという処理なんだ。 的1の位置に移動して、クローンとなり的2の位置に移動、クローンとなり的3の位置に、もう気づいたかな？繰り返し処理だね。

まず、「的位置」の定義ブロック内に変数が入っているとうまく処理できないので、外そう。

外したものを再利用して、繰り返し処理と組み合わせていこう。 繰り返す回数は9回だね。

繰り返す処理は、的位置に移動してクローンをつくり、「panel_no」を1つふやせばいいね。

つくったブロックを組み合わせ、グリーンフラッグがクリックされたときのブロックにつなげよう。

最後に、リストの更新部分にも「panel_no」の変数を適用しておこう。 これで、クローンされた「panel_no」も正しくリストが更新されるようになったよ。

ここまで完成したら、動作を確認してみよう。 リストを表示させて確認してね。 グリーンフラッグをクリックして、的にボールを当てて、リストが正しく更新されたらOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・残り球数を変数として管理しよう

このチャプターでは、ゲームの進行状況を表示できるようにしていくよ。 今回のゲームでは、投げられるボールは合計10球で、投げた回数に応じて、残り球数を左上に表示するようにしていくね。

まずは、投げるボールの処理ついて説明するね。 ボールが投げられたら、残りボール数を１つ減らす。 残り球数が０になったらマウスについてくるボールは表示しない。 という処理の流れになるよ。 残り球数は、投げるたびに変化するから変数をつくろう。 変数名はleft(レフト)、英語で「残り」という意味になるよ。 値は、最初10で投げるたびに1ずつ減るよ。 まずは、Baseballのスクリプトをつくっていくよ。

すでにある、shotをうけとったときを変更していこう。 残りの球数が0より大きい場合は1ずつ減るという処理だけでなく、0になったら、もう減らないという処理をいれておこう。 減り続けて、マイナスの値になってしまっていると、思わぬところで不具合が起きる可能性があるから注意しようね。

連続でボールを投げるための処理と、残りの球数を10とするための処理をつくっていこう。 Baseballのすでにあるグリーンフラッグがクリックされたときのブロックを、2つのイベントブロックに分けて、それぞれ変更をしよう。

前に出すブロックは、ボールが一番手前に表示されるようにする意味だけど、今はあまり気にしなくてOKだよ。 次に、startをうけとってボールを表示するかどうかの処理をつくっていこう。 これで、残りの数が0になったところで、ボールが手元のマウスカーソル部分には表示されなくなるよ。

ここまで完成したら、動作を確認してみよう。 leftを表示して、グリーンフラッグを押してゲームを開始してボールを投げ切ってみよう。 leftが1ずつ減り、残りが0になったとき、ボールが表示されなくなっていればOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・スプライトのみの変数を理解しよう

このチャプターでは、左上にボールの残りの球数を表示させる処理をつくっていくよ。

的をクローンしたときとほぼ同じだけど、クローンされたものごとにIDをつくっていくよ。 baseball2のスプライトを選択してね。

次に、左上の表示をつくっていくよ。 スプライトを複製するときにボール１つずつに名前をつけていくよ。 全てのボールに名前をつけたいので変数をつくるよ。 変数名ball_id(ボールアイディー)とするよ。 変数をつくる時に、「このスプライトのみ」にチェックするようにしてね。 クローンされるたびにIDを変更するための設定だよ。

的をクローンしたときと同じで、繰り返し処理の変数の組み合わせだね。 これで、x座標が-200のものがball_idが1、-180のものが2、-160のものが3、-20のものが9という固有の番号がつけられたことになるよ。

表示するかどうかの処理を作ろう。 leftという変数より小さいball_idのものだけを表示する、それ以外は表示せずに隠すという処理だよ。

クローンされた直後から、ずっと動き続けて、リアルタイムで表示、非表示を分けたいので、[ずっと～]のブロックと、クローンされたときのブロックを組み合わせていこう。

ここまで完成したら、動作を確認してみよう。 グリーンフラッグを押すと、9個の残り球数が表示されること、 投げるたびに表示が1つずつ消えていくことが確認できればOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・毎回のスコアを表示させよう

このチャプターでは、キャットにスコアを理解させて、スコアを言えるようにしていくよ。

処理の流れについて説明するね。 投げ終わりhitしたあとに、毎回リストを全て確認してスコアを計算するという処理だよ。 リスト「ありなし判定」の何番目を見るのかと、その結果計算されるスコアは変化するので、変数を２つつくろう。 変数名s(エス)とscore(スコア)をつくろう。 sはリストの何番目を見るのかという意味で、スコアは撃ち抜かれた的の数が値となるよ。 定義ブロック「スコア判定」をつくっていこう。

リストの長さ、つまりpanel_no(パネルナンバー)1～9までを全て順に見ていくためには、[～回繰り返し]ブロックをつかっていくよ。

さらに、繰り返す処理を考えていこう。 値「なし」があるたびにscoreを1ずつ変えていく処理を作ればいいね。

つくったブロックを合体させて、スコア判定の定義ブロックの完成だよ。

次に、キャットにスコア判定した結果、あと何枚かを言わせるようにしていこう。

[～と2秒言う]ブロックの中に入るブロックをつくっていくよ。 演算の中にある、[～と～]ブロック２個使って、文字の列をつなげることができるよ。 今回は、３つの文字列「残り」と「枚だよ」の間に、スコア判定で得た値を用いて、[9ーsocore]をいれていることがポイントだよ。

単なる文字列だけでなく、変数もセットできるんだね。ちなみに、文字列をつなぐだけなので、出来上がりの見た目が同じであれば重ね順は結果に影響しないよ。[～と2秒言う]ブロックと組み合わせて、完成だよ。 ここまで完成したら、動作を確認してみよう。 hitを受け取ったあと、 キャットが、残りの的の数を正しく言えていればOKだよ。 ここまで、みんなの画面でもやってみよう！

・コスチュームをscoreの値と対応させよう

このチャプターでは、効果音とゲーム終了時の表示の処理をつくっていくよ。 ゲーム終了時の表示については、幽霊の効果と繰り返し処理を用いることで、エフェクト表現にチャレンジしよう。

音を選ぶから、好きな音を追加しよう。 音はBaseball(投げるボール)のスプライトに、hitの音素材は5(的)のスプライトに設定しましょう。 処理の流れについて説明するね。 効果音はボールを投げる処理と的にボールがhitしたときに音を追加するだけだよ。 スコアの表示は、endのスプライトを幽霊の効果を繰り返し処理で変化させながら出現させるよ。

まずは、音素材をさがして、baseballと5のスプライトに追加しよう。

baseballのshotをうけとったときの、すぐ下に[〜の音を鳴らす]のブロックを追加しよう。 続けて、5のスプライトに音を追加しよう。

音を鳴らすのはコスチュームがありのときだけだね。 これはコスチューム番号と制御のブロックをつかって処理をつくろう。

キャットのスプライトを選択してね。

hitをうけとったとき、のブロックを変更しておこう。 leftが0になったらendのメッセージを送るようにしよう。

endのスプライトにゲーム終了時のスクリプトをつくっていこう。 endのスプライトを選択してね。 これまでも何度かしたことのある処理だね。

1層下げるの処理はあとで処理するscoreのすぐしたの層にするための処理だよ。 次に、ゲーム終了時に射抜いた的の数が表示されるようにしていくよ。 処理の流れについて説明するね。 endの処理をうけとったあとにscoreのコスチュームを射抜いた的の数に応じて変更して表示させるよ。 スコアが0の場合を例外の処理とすることに注意しようね。

まず、キャットで作ったスコア判定をsocoreのスプライトに複製しよう。 スコアを表示するのは、キャットからendをうけとった後だね。 [1秒待つ]のブロックを入れて、画面全体がくらくなってからscoreのスプライトが表示されるようにしよう。

まずは、位置や大きさ、画像の効果を一気に設定するね。

次に、[もし～なら,でなければ]の処理を完成させるよ。 コスチューム番号0がないため、スコアが0、つまり的に一度も当てられなかった時のコスチュームは別に処理してあげる必要があることに注意しよう。

最後に、スコアをリセットする処理を入れておこう。 ここまで完成したら、動作を確認してみよう。 ゲームを開始して、マトにいくつかボールを当て、全てのボールがなげおわった後に、背景が少しくらくなり、スコアの数字つまり当てた的の数が正しく表示されていればOKだよ。 ここまで、みんなの画面でもやってみよう！

・まとめ

最後に、このレッスンで学習したことをおさらいしてみよう。 このレッスンでも、これまで使ってきた様々なブロックをつかって複雑なゲームを作ることができたね！ おさらいしておこう。 まず、ボールを投げる機能では、リアルタイムでマウスの座標の位置を検出して、動きにあわせてボールを投げる仕組みをつくることができたね。 スマートフォンのフリック操作も同じような仕組みになるね。

次にメッセージ機能をつかって、ボールを投げる機能と的に当たったかどうかを判定する機能をうまく連動させることができたね。 また、的についてはこれまでと異なり、クローンを用いて、1つのスプライトで9枚分の的を配置することができたね。 何かを変更したいとき1つのスプライトしかないことで、変更箇所が少なくなることは、とてもいいことだね。 クローンする際に使用するpanel_noについても理解を深めておこう。

スコアの管理や表示は、リストを使って変数をまとめ、うまく管理することができたね。 変数やリストを使うことで、スプライトどうしを細かく制御することができるようになったといえれば、Scratchもほぼマスターしたと言えるね!