Scratchでりんごキャッチゲームを作ろう 基本編④ねこを動かしてりんごを拾えるようにしよう

2021年7月15日

基本編③では、「りんご」の基本的な動作についてのプログラムがほぼ完成しました。

今回は、「ねこ」に対してプログラムをしていきます。「ねこを操作してりんごをキャッチするプログラム」を実装していきます。

次の動画のように、ねこをキーボードの左右のキーで操作して、りんごをキャッチできるようにするのが今回の目標です。

基本編③はこちら: 基本編③ りんごをクローンしていっぱい落とそう

りんごキャッチゲームを作ろうトップ記事はこちら: りんごキャッチゲームを作ろうトップ記事

バババ
バババ
解説の画像が見づらい時は、画像をクリックして拡大して見てね!

ねこの位置を決めよう

はじめに、ゲームが開始されたときの「ねこ」の位置を決めましょう。

X軸(横方向)は真ん中にしましょう。Scrachでは真ん中は「0」なので、X軸は「0」とします。

Y軸(縦方向)は、ねこが地面に立っているように見える位置にしましょう。

①「ねこ」のスプライトをドラッグして、地面に立っているように見える位置に移動させましょう。
②移動させたら、この時の「Y座標」の数値をメモしておきましょう。
(下の画像ではY座標が「-123」なので、この数字をメモします。)

これで、ねこの最初の位置が決まりました。

X座標:「0」、Y座標:「-123」がゲームが開始されたときのねこの位置となります。この数字はプログラムするときに使います。

ねこを動かせるようにしよう

ここからは、ねこを動かせるようにしていきましょう。

プログラムを考えよう

まずは、どんなプログラムにしたら良いのか考えていきます。

やりたいこと

このプログラムでやりたいことを整理していきましょう。

このプログラムでは「ねこを動かせるようにする」ことが一番の目的です。ねこはキーボードの「←(左向き矢印)」を押したら左に移動し、「→(右向き矢印)」を押したら右に移動するようにしたいです。

また、ねこの最初の位置を先ほど決めた位置(X座標:「0」、Y座標:「-123」)にしたいですね。

やりたいことをまとめると、次のようになります。

・キーボードの「←(左向き矢印)」を押したら左に移動させたい。
・キーボードの「→(右向き矢印)」を押したら右に移動させたい。
・ねこの最初の位置を「X座標:0、Y座標:-123」にしたい。

やりたいことを実現するために必要な処理

やりたいことが整理できたら、「それを実現するためにどんな処理が必要なのか」を考えていきましょう。

キーボードの「←(左矢印)」「→(右矢印)」が押されたときにねこを動かしたいので、次のような処理が必要ですね。

・もし、キーボードの「←(左向き矢印)」が押されたとき「左」に動かす。
・もし、キーボードの「→(右向き矢印)」が押されたらとき「右」に動かす。

ねこの最初の位置を設定する処理も必要ですね。

まとめると次のようになります。

・もし、キーボードの「←(左向き矢印)」が押されたとき「左」に動かす。
・もし、キーボードの「→(右向き矢印)」が押されたらとき「右」に動かす。
・ねこの最初の位置を「X座標:0、Y座標:-123」に設定する。

処理の順番

必要な処理を洗い出したら、処理の順番を考えましょう。

ねこを最初の位置に移動させて、その場所からねこを動かすので、処理の順番は次のようになります。

①ねこの最初の位置を「X座標:0、Y座標:-123」に設定する。
②もし、キーボードの「←(左向き矢印)」が押されたとき「左」に動かす。
③もし、キーボードの「→(右向き矢印)」が押されたらとき「右」に動かす。

プログラミングしよう

どんなプログラムを作ればいいか整理できたら、実際にプログラミングしていきましょう。

ねこを最初の位置を設定する

ねこの最初の位置を設定するプログラムを作っていきましょう。

①「ねこ」のスプライトをクリックしましょう。
②コードブロックから『動き』をクリックしましょう。
③動きの中の『x座標を○、y座標を○にする』というブロックをドラッグしましょう。
④『x座標を○、y座標を○にする』ブロックの数字を、x座標:「0」、y座標:「-123」に変更します。

このプログラムはゲームが開始されたら一番最初に動いてほしいので、そうなるようにプログラムします。

①コードブロックの『イベント』をクリックしましょう。
②イベントの中にある『緑の旗が押されたとき』のブロックをドラッグして、先ほど作ったプログラムの上にくっつけましょう。

これで、「緑の旗が押されたとき」にねこが必ず「X座標:0、Y座標:-123」に配置されるようになりました。

キーボードの左向き矢印が押されたら左に動かす

キーボードの「←(左向き矢印)」が押されたら左に動くようにプログラミングしていきましょう。

①コードブロックの『制御』をクリック
②制御の中の『もし<>なら』ブロックをドラッグし、一番下にくっつけましょう。

③コードブロックの『調べる』をクリックしましょう。
④調べるの中の『スペース▼キーが押された』というブロックをドラッグして、「もし<>なら」ブロックの『<>』の部分にはめこみましょう。

今回は左向き矢印が押されたときにねこを動かしたいので、『スペース▼キーが押された』ブロックの『スペース』の部分を『左向き矢印』に変更します。

⑤『スペース▼キーが押された』ブロックの『スペース▼』の部分をクリックしましょう。
⑥いろんなキーが表示されるので、『左向き矢印』をクリックしましょう。

そうすると『もし左向き矢印▼キーが押されたなら』となります。

『もし左向き矢印▼キーが押されたなら左に移動する』となるようにプログラムしていきます。

⑦コードブロックの『動き』をクリックしましょう。
⑧動きの中の『x座標を10ずつ変える』というブロックをドラッグして、『もし<>なら』ブロックの中にくっつけましょう。

X座標は横方向の位置を表しているので、ねこのX座標の数字を変えるとねこが横に移動します。

『x座標を10ずつ変える』ブロックの数字をプラスの数字にすると右に移動して、マイナスの数字にすると左に移動します。

今回は左に移動したいので、『x座標を10ずつ変える』ブロックの数字をマイナスの数字に変更しましょう。今は「10」になっているので、これを「-20」にしましょう。

Question
困っている人
困っている人
マイナスにすると左に移動するのは分かったけど、数字を「10」から「20」に変えたのはなんで?
バババ
バババ
ねこが移動するスピードを速くするために数字を大きくしました!
<解説>

数字の大きさは移動する幅のようなイメージです。移動する幅が「10」よりも「20」の方が大きく移動することになります。

そのため、数字を大きくすると1度に移動する幅が大きくなるので、移動スピードが上がります。逆に小さくすると、1度に移動する幅幅が小さくなるので、移動スピードが下がります。

今回は事前にちょうど良さそうなスピードを調べておいたので、いきなり「20」に設定していますが、実際に動かしながらちょうど良いスピードを探してみましょう。

ここでいったん動きを確認してみましょう。緑の旗をクリックしてゲームを開始したらキーボードの「←(左向き矢印)」を押してみてください。

Question
困っている人
困っている人
動かないんだけど…?
バババ
バババ
ゲームが開始されたら「プログラムが動くのは1回のみ」なので、このままでは思ったように動かないのです。
<解説>

実は、ゲーム開始直後に1度だけ動きます。試しにキーボードの「←(左向き矢印)」を押したまま緑の旗をクリックしてゲームを開始してみてください。そうすると、ねこがちょっとだけ左に移動します。

プログラムは基本的に1回しか動きません。なので、ゲームが開始された直後に『もし左向き矢印▼キーが押されたなら』ブロックが動いたタイミングで左向き矢印キーを押していなければねこは動かないのです。

そして、そのタイミングを逃してしまうといくら左向き矢印キーを押してもねこは動きません。

困っている人
困っている人
どうしたらいいの?
バババ
バババ
繰り返し処理を使うといいよ!
<解説>

繰り返し処理を使えば、指定したプログラムを何回も動かすことができます。

今回の場合は、『もし左向き矢印▼キーが押されたなら』というブロックを繰り返しするようにしてあげると、いつ左向き矢印キーを押してもねこが動くようになります。

さっそく繰り返し処理を試してみましょう。

繰り返し処理を使って、ねこを動かせるようにしましょう。

①コードブロックの『制御』をクリックしましょう。
②制御の中の『ずっと』ブロックをドラッグして、『もし左向き矢印▼キーが押されたなら』というブロックをはさみましょう。

『ずっと』という繰り返しのブロックにはさまれた処理は、ゲームが開始してから終了するまで、ずっと繰り返し動くことになります。

では、もう1度実行して確認してみましょう。
左に動くようになりましたね。

キーボードの右向き矢印が押されたら右に動かす

ねこが左に動くようになったので、次は右に動くようにしましょう。

やり方は左に動かすのとほとんど同じですので、すこしラクをしましょう。

①左に動かすときに作った『もし左向き矢印▼キーが押されたなら』ブロックの黄色い部分を右クリックしましょう。
②右クリックすると表示されるメニューの中から『複製』をクリックしましょう。

そうすると下の画像のように、左に動かすプログラムがコピーされます。

コピーしたプログラムを「左に動かすプログラム」の下にくっつけましょう。

くっつけたプログラムを「右に動くプログラム」にしていきます。

①「左向き矢印▼」の部分をクリックして『右向き矢印』に変えましょう。
②「x座標を-20ずつ変える」を『x座標を20ずつ変える』に変えましょう。

これで右方向にもねこが動くようになりました。実行して確認してみましょう。

ねこが動く方向を向くようにしよう

ねこが左右に動かせるようになりましたが、左に動くときに後ろ向きに動くのはリアリティに欠けてしまいますね。

そこでねこが動く方向を向くようにしたいと思います。

ねこの向きを確認する

今のねこの向きを確認しましょう。

今の向きは「90」ですね。「90」のときに右を向いています。反対に向かせたいので「-90」にしてみましょう。

もし、ねこの上下がひっくり返ってしまった場合は下の画像を見ながら設定していきましょう。

これで下の画像のように左右のみ反転したと思います。

これで、右向きの場合は「90」、左向きの場合は「-90」にすれば良いことが分かりました。

プログラミングしよう

左向き矢印キーが押されたら「向きを-90」に設定します。

①コードブロックの『動き』をクリックしましょう。
②動きの中の『90度に向ける』ブロックをドラッグして『もし左向き矢印▼キーが押されたなら』の中にくっつけましょう。
③『90度に向ける』ブロックの「90」を「-90」に変えましょう。

右向き矢印キーが押されたら「向きを90」に設定します。
左向きと同じようにやってみましょう。

できましたか?
右向きのプログラムはこのようになっていると思います。

実行して左右のキーを押してみて、ねこの向きがちゃんと押された方を向いているか確認しましょう。

りんごをキャッチしよう

ねこが左右に動かせるようになったので、次は「りんごをキャッチできるよう」にしていきます。

「りんごをキャッチする」ということは「ねこがりんごに触れる」こととします。りんごは地面に落ちると消えてしまうので、その前にりんごに触れることができればキャッチしたとしましょう。

プログラムを考えよう

どんなプログラムにすれば良いのか考えていきましょう。

やりたいこと

りんごに触れることができればキャッチしたこととするので、「ねこがりんごに触れたのか」を知りたいですね。もし、りんごに触れていたらしたら、「そのりんごは消したい」です。

やりたいことをまとめると、次のようになります。

・ねこがりんごに触れたのか知りたい。
・ねこが触れたりんごを消したい。

必要な処理

やりたいことを実現するために必要な処理を考えましょう。

ねこがりんごに触れたのか知りたいので、「ねこがりんごに触れたかどうかの判定」が必要になります。

もし、ねこがりんごに触れていたらそのりんごを消したいので、「りんごのクローンを消す」という処理をすればりんごを消せます。前回の基本編③ で地面に落ちたりんごを消した時と同じような処理をすれば良さそうですね。

必要な処理をまとめると、次のようになります。

・ねこがりんごに触れたかどうかの判定を行う。
・ねこが触れたりんごのクローンを消す。

処理の順番

処理の順番は、「ねこがりんごに触れたか判定して、触れていたらりんごのクローンを消す」となるので、次のようになりますね。

①ねこがりんごに触れたかどうかの判定を行う。
②ねこが触れたりんごのクローンを消す。

プログラミングしよう

プログラミングする内容がまとまったので、実際にプログラミングしていきましょう。

ねこがりんごに触れたかどうかの判定を行う

「ねこがりんごに触れたかの判定するプログラム」を作っていきます。

①コードブロックの『制御』をクリックしましょう。
②制御の中の『もし<>なら』ブロックをドラッグして、『もし右向き矢印▼キーが押されたなら』ブロックの下にくっつけましょう。

「もしりんごに触れたなら」という条件を作っていきます。

③コードブロックの『調べる』をクリックしましょう。
④調べるの中の『マウスのポインター▼に触れた』をドラッグして、『もし<>なら』ブロックの『<>』の部分にはめこみましょう。

⑤『マウスのポインター▼に触れた』ブロックの「マウスのポインター▼」の部分をクリックして『Apple』に変えましょう。

これで、「ねこがりんごに触れたかの判定するプログラム」が完成です。

ねこが触れたりんごのクローンを消す

前回の基本編③ で地面に落ちたりんごを消した時と同じように、りんごのクローン消すために「このクローンを削除する」ブロックを使いますが、1つ問題があります。

「このクローンを削除する」ブロックの『このクローン』とはりんごのことなので、りんごのスプライトにクローンを消すプログラムを作らなければいけません。

そのために、ねこがりんごに触れたら、りんごのスプライトに『触ったよ』と教えてあげる必要があります。

りんごのスプライトでは、ねこから『触ったよ』と言われたらクローンを消します。

①コードブロックの『イベント』をクリックしましょう。
②イベントの中の『メッセージ1▼を送る』をドラッグして、『もしApple▼に触れたなら』の中にくっつけましょう。

『メッセージ1▼を送る』ブロックの『メッセージ1▼』の部分を、わかりやすい名前に変えましょう。今回は、触ったことを教えるので、『触ったよ』に変えてみます。

③『メッセージ1▼』の部分をクリックしましょう。
④クリックすると表示されるメニューの中の『新しいメッセージ』をクリックしましょう。

⑤『新しいメッセージ名:』に『触ったよ』と入力して、『OK』をクリックしましょう。

これで、ねこがりんごに触れたら『触ったよ』とメッセージを送るようになったので、今度はりんごのスプライトで『触ったよ』というメッセージを受け取りましょう。

①りんごのスプライトをクリックしましょう。
②コードブロックの『イベント』をクリックしましょう。
③イベントの中の『触ったよ▼を受け取ったとき』というブロックをドラッグしましょう。

『触ったよ』というメッセージを受け取ったら、りんごを消したいので、それをプログラミングしていきます。

①コードブロックの『制御』をクリックしましょう。
②制御の中の『このクローンを削除する』ブロックをドラッグして、『触ったよ▼を受け取ったとき』ブロックの下にくっつけましょう。

これで、ねこが「触ったよ」と教えてくれたら、りんごのクローンを削除するプログラムの完成です。

Point

今回は「ねこがりんごに触れたらメッセージを送ってりんごのクローンを削除する」とプログラミングしましたが、実は他にもやり方があります。

例えば、りんごのスプライトの方で、「もしねこに触れたならクローンを削除する」とプログラミングすることができます。

このように、プログラミングの正解は1つだけではありません。同じことをしたいプログラムでも、作る人によってプログラミングの方法は様々です。

大事なのは「やりたいことがきちんとできているか」なので、プログラミングするときには「他にもやり方ないかな」といろんなやり方を探してみるのも意外と楽しいので、ぜひやってみてください。

プログラムを実行して今回作ったプログラムを確認しよう

最後にプログラムを実行してみて、今回作ったプログラムがちゃんと動くか確認してみましょう。

下の動画のように、ねこが左右に動いて、りんごをキャッチできていれば(ねこがりんごに触れたら消えていれば)OKです。

ねこがりんごをキャッチしたのか、りんごが地面に落ちたのか分かりにくいですね…。これについては、この後の発展編の方で対応していきます。

まとめ

お疲れ様でした!
これで「ねこを操作してりんごをキャッチするプログラム」は完成です。

ねこの動作を一気にプログラムしたので、長くなってしまいました…。

ただ、今回でねこやりんごの基本動作のプログラムが完成したので、「基本編」は終わりです。

次回からの発展編では、よりゲームらしくするためのプログラムをしていきます。

次の記事「発展編①」はこちら↓
発展編① ゲームクリア、ゲームオーバーを決めよう

りんごキャッチゲームを作ろうトップ記事はこちら↓
りんごキャッチゲームを作ろうトップ記事

おすすめ

Scratchでのプログラミング学習におすすめの書籍です。

Scratch

Posted by バババ