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

今回はあみだくじアプリを作っていくよ。 縦線たてせんと横線よこせんを指定した本数だけランダムでかいて、スプライトが自動であみだくじを判定してすすんでいくよ。 最後におみくじが登場するところまでを完成とするよ。 座標に関する理解を深めること、引数を含む定義ブロックの仕組みについて理解することができればOKだよ。

あみだくじを描く本数を入力すると、その通りの縦線を描き、横線がランダムに描かれるよ。 さらに、選択したあみだくじをCatが正しくうごいていき、下部に到達とうたつすると、あみだくじが登場するというアプリだね。 今回つくるゲームは大きく分けて３つの機能が必要だね。

• １つ目あみだくじを描く機能。
• ２つ目スプライトがあみだくじを移動する機能。
• ３つ目おみくじが出現する機能。

では、実際に作っていこう！

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

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

まず、あみだくじを正確に描くためには、座標への理解が必要だよ。 背景に[xy-grid]を設定しよう。 ライブラリから背景を選択ボタンをクリックして、その他の中から[xy-grid]を選んでね。 最初はこの背景をつかっていくよ。

penのスプライトを新しく作成してね。 つぎにCatの設定をしていこう。 最初は左下に配置しておこう。

つぎにsensorだね。 途中まで必要ないから隠しておこう。

つぎにおみくじだね。 同じく、途中まで必要ないから隠しておこう。

グリーンフラッグを押して見て、画像と同じような大きさと位置関係になっていればOKだよ。

表示するボタンについて少しだけ補足しておくよ。 スプライトリストの上に、表示するを切り替えるボタンが2つあるよね。 ここをつかって、一時的にスプライトを表示したり非表示にすることができるよ。 見た目の中にある表示すると隠すがこのボタンを押す処理となっているんだ。 ここまでみんなの画面でもやってみよう！

・繰り返し処理で縦線を連続して描こう

このチャプターでは、あみだくじの縦線を描くための準備を進めるよ。 まずは、ペンの使い方と座標について慣れていこう。 座標について、分かりやすくするために、背景を[xy-grid]に変更しよう。 あみだくじが描けるようになったら、背景を変更するから、しばらくは[xy-grid]にしておこう。

処理の流れについて説明するね。 縦線を描くという定義ブロックを順に変更していき、まずは、3本の縦線を描けるようにしていくよ。 拡張機能からペンを追加して、penのスプライトに定義ブロック「縦線を描く」をつくって、指定の値をセットしよう。

まずは、gキーを押したら線を描き、dキーをおしたら線を消すブロックをつくろう。 ここまで完成したら、gキーを押して縦線を描き、dキーを押して線が消えることを確認しよう。

つぎに、繰り返しの処理と変数をつかって線が3本描けるようにしていこう。 縦線を描くブロックを変更していくよ。 ここまで完成したら、gキーを押して縦線を描いてみよう。 つぎに、3本の縦線を描くために繰り返しのブロックをつかって変更していこう。

ペンを下ろすからペンをあげるまでを外し、新しい処理に変更しよう。 縦線を描くたびにx座標の位置は変更されるね。 動きの中にあるx座標ブロックと繰り返しブロックを用いて、変更していこう。

縦線を描くブロックのx座標やy座標を自由に描いて試してみよう。 まずは、描き始めのxの位置を-60に変更してみよう。

ここまで完成したら、gキーをおして縦線を描いてみよう。 xが-60から、0から、60からと60ずつ変わりながら描けていればOKだよ。 ここまで、みんなの画面でもやってみよう！

・縦線の本数を自由に指定できるようにしよう

このチャプターでは、前のチャプターでは3本だった縦線を2本～8本まで自由に描きわけられるようにしていくよ。

処理の流れについて説明するね。 描く本数と描き始めの場所を決めて、これまでpenにつくったスクリプトを変更していくことにするね。 描く線の本数は変わるので、変数「n」と変数「横幅」をつくろう。 値は2～8の整数となるよ。 描く線の本数によって、描き始めの位置が変わるね。 線の間隔が60なので、線を描き始める位置は、60×(縦線の本数-1)の半分になるね。 横幅と変数を作ろう。 値は、60×(n-1)となるよ。

変数「横幅」は、線の本数を表す変数「n」の値によって変化するね。 変数の中に変数が入っていることが今までとちがって難しいけど、慣れていこう。

描き始めの位置のx座標は、横幅の半分のマイナス値となるね。

[～ – ～]ブロックの左側は空白でOKだよ。 ここまでつくったブロックをと繰り返す回数変数「n」を、縦線を描く定義ブロックに組み込んでいこう。

さらに、nや横幅が最初どのような値になるのかを決める処理をつくっておこう。 ここまで完成したら、動作を確認してみよう。

[nの値～にする]ブロックの値を2や5に変更して動作を確認してみよう。 ここまで、みんなの画面でもやってみよう！

・横線を等間隔で描ける定義ブロックをつくろう

このチャプターでは、あみだくじに必要な横線を描く機能をつくっていくよ。 これまでと同じように定義ブロックをつくっていくけど、今回は引数を含む定義ブロックをつくっていくので、しっかり理解していこうね。

まずは[横線を描く]という定義ブロックをつくっていこう。 引数を追加を押して、４つの引数[x][y][間隔][本数]を追加するのを忘れないようにしてね。

線を描くための処理のブロックをつくっていこう。 青い動きのブロック2つのy座標を同じ値にしておくことがポイントだよ。 ここまで完成したら、[全部消す]ブロックをクリックして動作を確認してみよう。

横線が100,50の位置から、0,50つまり右から左にむかって横線が描けていればOKだよ。 引数を含む定義ブロックをつかうと、引数の部分をドラッグすることができるんだ。 試しに、これまでつくったブロックにドラッグしてみよう。

ブロックをつなげ、定義ブロックを用いて、hキーを押した時に横線が描かれる処理を作ろう。 引数の値を間違えないように4つ入力してね。 3つ目と4つ目の引数はまだつかわないからすきな値でOKだよ。

指定した引数によって横線の描く位置が変わるよ。色々試してみよう。 このようにブロックを1つつくっておけば、数字を変えるだけですみ、処理を何度もつくる必要がなくなって便利だね! 覚えておこう。

ここまで完成したら、動作を確認してみよう。 hキーを押した時に、引数の値に応じて、横線が描けていればOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・割り算のあまりで場合をランダムに分けよう

このチャプターでは、横線を描く機能を利用して、横線をランダムに描く機能に変更していくね。 処理の流れについて説明するね。

まずは、横線を等間隔とうかんかくで描く機能をつくり、その後、乱数を用いて横線を描くか描かないかの場合分けをするという処理にしよう。 横線の描き始めの位置を、引数の間隔ずつずらしていけば横線を等間隔で描くことができるね。

変数「横線位置」をつくろう。 定義ブロックに横線位置を追加しよう。

変数の値を変えながら、繰り返す処理をつくっていこう。 データの中にあるブロック[～を～にする]ブロックと[～を～ずつ変える]ブロック、そして制御の中にある[～回繰り返す]ブロックを組み合わせるんだったね。 変数の最初の値と、いくつずつ増やすかを決めておこう。

繰り返す処理を囲もう。

その後、横線位置の最初の値を引数の「y」、繰り返す回数は引数の「本数」、変化させる値は引数の「間隔かんかく」としよう。

ここまできたら動作確認のために、hキーを押したときにつづく、定義ブロックの引数を変更してみよう。 引数が入力できたら、動作を確認してみよう。 y座標が-100から10ずつ変えながらなので、-100,-90から右側に1本目、 2本目は-100,-80から右側に、10本目が-100,0から0,0に向かって描くことができていればOKだよ。

最後にランダムに描けるようにしておこう。 演算の中にある、乱数と割り算の余りをつかって処理をつくっていこう。

1から10までの乱数を2で割った余りは1か0となるので、このブロックは50%の確率で真となるよ。 [もし～なら]のブロックと組み合わせて、これまでつくったブロックと合体させよう。

横線位置を間隔ずつ変えるの下が[もし～なら]で囲われているかどうか確認してね。 横線を描く位置を変えてみよう。 最後に、完成形が次の図の通りであるかよく確認してね。

ここまで完成したら、動作を確認してみよう。 hキーを押して、線が等間隔とうかんかくではなく、不規則ふきそくに描けていればOKだよ。 さぁ！ここまで、みんなの画面でもやってみよう！

・横線を描く機能を調整しよう

このチャプターでは、横線をランダムに描くことを繰り返して、あみだくじを描けるようにしていくよ。

処理の流れについて説明するね。 横線を指定した本数で縦方向に描く処理を、あみだの本数マイナス１回繰り返す処理となるね。 でも、横線がつながってしまうと、あみだくじとして成立しなくなるので、避さけるように工夫をしよう。 繰り返す回数と、1ずつ変えるための変数「i」をつくっておこう。 値は、1からn-1、つまり縦線の本数-1までとなるよ。

まずは、横線を描くブロックのペンを上げるx座標の変更を行おう。 あみだの間隔は60ときめたので、0ではなく、x+60に変更するよ。

変化させながら繰り返すときの基本形はもうなれたかな？ 初期の値を決めて繰り返し処理の中で[～を～ずつ変える]ブロックを組み合わせる処理となるね。

今回は、制御の中にある[～まで繰り返す]ブロックをつかっていることに注意してね。 どうなったら、繰り返し処理を終わるのかという条件を考えよう。あみだ、つまり縦線を描く本数によって決まることは想像できるかな？

縦線の本数が6本なら横線を描く処理は5回繰り返すことになるね。 変数をつかって条件をつくっていこう。

これまで作ったブロックを組み合わせよう。

繰り返す処理「横線を描く」の引数をつくっていこう。 縦線はy座標が110から-110まで描かれているので、その間の95から-18ずつずらして10本描くことにしよう。 さらに、描き始めのx座標については、演算のブロックを組み合わせて指定しよう。

演算ブロックは重ね順によって結果が変わるので、意味をしっかり考えて重ねるようにしてね。 少し補足するね。 [～＋～]と、i×60を組み合わせることで、iが1ずつ増えると、描き始めの位置を60ずつずらずことができているよ。 少しむずかしいけど、理解できるように頑張ろうね！

つくったブロックを[～まで繰り返す]の中に組みこんで、処理が実行されるタイミングを整えていこう。 ここまで完成したら、途中の動作確認をしよう。

スペースキーを押して縦線と横線を連続して描いてみよう。 縦線が描かれて、横線がずれながら描かれていればOKだよ。 でも、縦線や横線が消えずに残って欲しいよね。 修正していくよ。

横線を描くときに前回までかかれていたものを消すというブロックが入っているので、その処理をなくそう。 スペースを押して、動作を確認してみよう。 縦線を描く本数は4本にしておこう。

縦線と横線が消えずに連続して描くことができたけど、横線が繋がっている箇所(かしょ)があるね。 修正していこう。 今回は、描き始めの位置を、繰り返しの回数が奇数回目のときと偶数回目のときで場合を分けていくよ。 つまり「i」を2で割った余りが0かそうでないかで場合を分けていくという処理にするね。

横線を描くブロックを複製ふくせいして、[もし～でなければ]ブロックと組み合わせよう。

場合分けの条件は、すでに説明した通り [「i」を2で割った余り]と[～=～]ブロックを組み合わせよう。

完成した条件を組み合わせ、[でなければ]に含まれる[横線を描く]ブロックの引数の値を変更しておこう。

ここまで完成したら、動作を確認してみよう。 縦線の本数を5本にして確認しよう。 横線が繋がらずに縦線と横線がかけていればOKだよ。 描く位置をずらす処理をいれたことで、きれいに描くことができたね。 さあ！ここまで、みんなの画面でもやってみよう。

・右と左で場合分けをしよう

このチャプターでは、描かれたあみだくじをCatが進んでいく機能をつくっていこう。

処理をつくっていく前に、penの表示を変更するよ。 ペンの太さが少し太いので、太さを2に変更しておこう!

あみだくじを描くときは、座標を表示させていたけど、もう必要なさそうなので、背景を変更しておこう。 処理の流れについて説明するね。 新たにsensorというスプライトに、縦線と横線の交わりをみつけ、右または左に移動し、移動が終わればまた下に移動する。 以降は、処理を繰り返すようにしていこう。

まずはsensorのスプライトを選択してね。

まずは、sキーが押された際に左上にsensorが出現するようにしよう。 x座標は横幅の半分だけマイナス方向となっていればよかったね。

次にsensorが移動する仕組みをつくっていこう。 まずは、y座標が -120 より小さくなるまでy座標を -3 ずつ小さく変化させるという処理をつくろう。 その中で、左右への移動を判定する仕組みと移動する仕組みをつくっていくよ。

さらに、左右への移動を判定する仕組みをつくっていくよ。 左から右への移動処理をつくっていこう。

つくった処理について補足するね。 x座標を10ずつ変えることを6回繰り返すことで、60の移動をしたことになるね。 さらにy座標を-4ずつ変えているのは、線にも太さがあるため、線を超えるまでは下へ移動するという処理をいれているよ。 [～まで繰り返す]をつかっていることに注意してね。 線を探しだす仕組みは、調べるの中にある[～色が～色に触れた]のブロックをつかっていくよ。

2箇所の条件判定部分に組み込んでね。 次に条件をつくっていこう。 色の指定なので、調べるのなかにあるブロックと、演算の中にある[～ではない]ブロックを組み合わせていくよ。

まずは、[～色に触れた]と[～色が～色に触れた]にある2箇所の色を変更していくよ。 スポイトツールを使って色を指定しよう。

さらに、もう一箇所の色はsensorのスプライトの右側の部分だよ。 数値で確認すると次のようになっていればいいよ。

[もし～なら]と[～まで繰り返す]の条件にそれぞれ組み合わせよう。

ここまで完成したら、ブロックを複製してつなげ、1箇所の色を変更しよう。 数値で指定してね。

左側へ移動するので、移動の値も変更をわすれないようにしようね。

これまでつくったブロックを、sキーが押されたときのかたまりと合体させよう。 ここまで完成したら、動作を確認してみよう。 5本の縦線であるあみだを描いたあとに、sキーを押して、sensorがうまく左右に移動して下まで移動できていればOKだよ。 ここまで、みんなの画面でもやってみよう！

・スプライトの移動を制御しよう

このチャプターでは、sensorの開始位置を左右のキーで選択できるようにして、Catがsensorについていくようにするよ。

処理の流れについて説明するね。 縦線以外の位置には動けないように、線の内側にあるなら左右に動けるという処理になるよ。 さらに、一番右または左の縦線の位置にきたときは、それ以上左や右には動けないようにする工夫も必要だね。

sensorのスプライトを選択しよう。 非表示となっている場合は、表示してね。

まずは、sensorのx座標がどこであるかで場合を分けていく必要があるので、演算のブロックを組み合わせて条件をつくろう。

つくったブロックを[もし～なら]の条件としよう。

[もし～なら]のブロックを2つつなげて、右や左へ移動する処理をつくろう。 条件は[マウスが押された]と[0＜マウスのx座標]をつかって画面の右または左がクリックされたときを調べるようにしよう。

完成形は次の画像を参考にしてね。

ここまで完成したら、 [もし{[0-横幅/2]＜[x座標]}かつ{[x座標]＜[横幅/2]}なら] に組み合わせよう。 ただし、1つ問題があるよ。 条件に右の端や左の端が含まれていないことだね。 なので別の処理をつくっていこう。

横幅の左の端にいる場合は右に移動するだけの処理、横幅の左にいる場合は右に移動するだけの処理としよう。 似たような処理をすでにつくっているので、複製を使ってもいいけど、変更する場所に注意してね。

次のようになっていれば完成だよ。

sキーが押されたとき、のすぐ下の処理をrキーが押されたときにつなぎ変えよう。 これは、rキーが押されたときは、縦線左の端に移動させるためだよ。

つなげた処理を[ずっと]ブロックで囲まれるように組み合わせよう。

次にsensorのスプライトにキャットがついていくようにするよ。 キャットのスプライトを選択してね。

今回は、動きの中にある[～に行く]ブロックをつかおう。 キャットのスクリプトに、[ずっと～]と[sensorに行く]ブロックを組み合わせよう。

さらに、キャットの中心点(移動の基準になる点)を調整しよう。 コスチュームタブに切り替えて、キャット全体を選択して移動させてね。

ここまで完成したら、動作を確認してみよう。 新しくあみだを描き、sensorを表示させて、左右のキーでsensorをうごかしてみよう。 キャットがついてくることを確認し、sキーを押したあとも、正しく移動することができていればOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・幽霊の効果でエフェクトをつくろう

このチャプターでは、あみだくじの移動が終わったら、おみくじが出現するようにしていくよ。 おみくじは、おみくじではなく、アタリやハズレなど、自分の好きなコスチュームに変更してもOKだよ。

rキーが押されたとき、[クローン]のブロックをつかって、おみくじを各縦線の下に配置するよ。 sensorが移動しおわったら、endのメッセージを送り、そのメッセージを受け取ったら、おみくじが表示されるようにしていこう。

おみくじのスプライトを選択して、今のままではおみくじの大きさが少し大きいから、大きさを50%にしよう。

おみくじの最初の場所は、横幅が関係するね。 もう何度も登場している、[◯ – 横幅/2]ブロックをつかって初期の位置をきめよう。

クローンを複数作る処理は、[～回繰り返す]ブロックをつかおう。 繰り返す回数は、自分を含めてつくるクローンの数は[n-1回]だね。 クローンをつくり60移動することを繰り返せば、各縦線の下におみくじが配置されるね。

コスチューム番号の乱数は、今回は1～3としているけど、コスチュームを5個にした場合は[1～5までの乱数]にしてね。 sensorのスクリプトで、sキーを押したときの処理の最後にendの[メッセージを送る]ブロックをつなげよう。 endという新しいメッセージは新しくつくってね。

おみくじのスクリプトに戻り、endをうけとったときの処理を作っていこう。 今回は、y座標を2ずつ10回変えることで、上に浮かび上がるようにしよう。

ここまで完成したら、途中の動作確認をしてみよう。 グリーンフラッグを押して、スペースキー、rキーの順に押すと、おみくじがランダムで縦線の下に表示されるね。 縦線の本数を変えても、うまく表示されていればOKだよ。 さらに、グリーンフラッグが押された直後の状態もつくってあげておこう。

endを受け取るまでは表示される必要がないので、グリーンフラッグをクリックした直後に、[隠す]ブロックで非表示としておこう。

次に、endを受け取ったあとの処理を変更していこう。 [最前面へ移動する]ブロックで最前面に出した状態で表示するね。

さらに、おみくじの出現の仕方を、かっこよくするために幽霊の効果をつかっていくよ。 これで、クローンされる前に全てのおみくじを透明にすることができたよ。

上にずらすブロックに、幽霊の効果を少しずつなくす処理を入れよう。 繰り返しの回数が10回なので、100を0にするために-10ずつ変えるよ。

ここまで完成したら、動作を確認してみよう。 グリーンフラッグを押して、スペースキー、rキーを押し、あみだを選択。 sキーを押して、移動し終わったら、おみくじが浮かび上がるように表示されればOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・ゲームの進行に応じて、ユーザーが迷わないようにしよう

このチャプターでは、ゲームの進行状況を表示させつつ、完成に近づけていくよ。 今回のゲームでは、キーを押されたときを用いたけど、説明がないと何をしていいか分からないよね。 これを解消していこう。

処理の流れについて説明するね。 キャットに、次何をすればいいのか言わせていくよ。 まずは、 キャットのスクリプトを変更していこう。

[消す]ブロックをいれておくことで、前回書かれているペンを消すようにしているよ。 [n]を答えにすることはできたね。 だけど、今のままだと、縦線を描く際に[n]を決めるようになっている、うまく動かないよ。 なのでpenのスクリプトの[n]をきめる部分を削除しておこう。

変数は、いろいろなところに影響するということに気をつけておこう。 penが線を描き終えたら、ready(レディー)というメッセージを送るようにしよう。 readyは準備ができたという意味だよ。

readyを受け取ったキャットの処理を作っていこう。

さらに、2秒待った後に、スタートするためのキーを表示させるようにしよう。

sensorは今まで表示していたけど、本来は表示する必要がないね。 隠すだと存在しないことになってしまうため、[幽霊ゆうれいの効果を〜にする]を使い、値は99にしておこう。 幽霊の効果は透明にする効果だよ。 100だと「ない」ことになってしまうので、ぎりぎりの99に設定してるよ。

ここまで完成したら、動作を確認してみよう。 キャットの指示に従って、あみだくじを描き、選び、結果としておみくじが表示されるまで誘導ゆうどうがうまくできていればOKだよ。 さあ！ここまで、みんなの画面でもやってみよう！

・まとめ

このレッスンでも、たくさんのことが学べたね。 おさらいしておこう。 まず、縦線と横線を組み合わせて描く機能では、引数を使う定義ブロックへの理解が深められたね。 変数や繰り返し処理と組み合わせることで、とても便利なのでしっかり復習しておこう。 また、スクラッチの座標への理解も深まったね。

次にsensorがあみだを動いていく機能だね。 今回は色をつかって実現したよ! 線にも太さがあるため[{～ではない}まで繰り返す]処理を入れたことを復習しておいてね。 おみくじが出現する仕組みは、細かな技を組み合わせて、少ないスプライト少ない処理で実現することができたね。 しっかり復習しておこう。 このレッスンで学んだ、引数のある関数についてマスターできれば、いろんなことに応用がきくよ。 座標の計算が少し難しかったかもしれないけど、少しずつ理解していこうね。