Scratchでりんごキャッチゲームを作ろう 基本編②りんごを落とそう

2021年7月2日

基本編①では、ゲームで使用するスプライトと背景を準備しました。

今回は、前回準備した「Apple(りんご)」のスプライトに、「ランダムな位置にりんごを落とすプログラム」を実装していきます。

今回の目標は、下の動画のように、実行するたびに毎回違う位置からりんごが落ちてくるようにすることです。

基本編①はこちら: 基本編① ゲームづくりの下準備

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

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

スプライトの大きさを調整しておこう

りんごを落とすプログラミングをする前に、このゲームで使用する「ねこ」と「りんご」のスプライトの大きさを調整しておきます。

Question
悩んでる人
悩んでる人
なんで今大きさを調整するの?
あとでやったらダメなの?
バババ
バババ
スプライトの位置を決めたあとに大きさを変更すると、位置がずれてしまうからです!

<解説>

スプライトの大きさを変更すると、見た目が変わってしまいます。「この位置がいいな」と思って位置を決めても、大きさを変えてしまうと「位置をもっとずらさなきゃ」となってしまうことがあります。

ただし、あとでやったらダメというわけではありません。今回は、あとで同じ作業を何度も行わないように、はじめにスプライトの大きさを変更しておきます。

「ねこ」の大きさを変更する

「ねこ」のスプライトを選択して、「大きさ」を変更します。
画像では「70」に変更していますが、好きな大きさを設定しても大丈夫です。大きすぎず、小さすぎない、ちょうどいい大きさを設定しましょう。

「りんご」の大きさを変更する

「ねこ」と同じように「りんご」の大きさも変更しましょう。

「りんご」は「ねこ」よりも小さくしたいので、「50」に変更します。
「りんご」も好きな大きさを設定しても大丈夫です。「ねこ」の大きさとのバランスを考えてちょうどいい大きさを設定しましょう。

りんごを落とす範囲を決めよう

りんごが落ちてくる範囲を決めましょう。りんごが落ちてくる範囲は、X軸(横方向)とY軸(縦方向)のそれぞれ決める必要があります。

Y軸(縦方向)の範囲を決める

りんごを「どの高さ(上)からどの高さ(下)まで落とすのか」を決めていきます。

最初に、「どの高さから」落とすのか決めます。
実際にりんごのスプライトを落としたい高さに移動させて、Y軸の座標をメモしておきましょう。
画像では「140」の位置からりんごを落とすことにします。

次に「どの高さまで」落とすか決めます。
りんごは背景の地面まで落としたいので、りんごと地面が接する位置までりんごのスプライトを移動させます。この時のY軸の座標をメモしておきましょう。
画像では「-142」の位置までりんごを落とします。

これで「どの高さからどの高さまでりんごを落とすのか」決まりました。メモした座標は、このあとプログラムを実装するときに使用します。

X軸(横方向)の範囲を決める

次にりんごのX軸(横方向)の範囲を決めます。

最初にりんごが落ちてくる左端の座標を決めます。りんごのスプライトを落としたい左端に移動させて、X座標をメモしましょう
画像では、左端を「-210」とします。

同じように右端の座標も決めましょう。りんごのスプライトを右端に移動して、X軸の座標をメモしましょう。

これで、りんごを落とす範囲が決まりました。次からはいよいよプログラミングです。今決めた範囲にりんごを落とすプログラムを実装していきます。

りんごを落とすプログラミングをしよう

先ほど決めた範囲内にりんごが落ちてくるようにプログラミングしていきます。

プログラミングする内容を整理する

実際にプログラミングする前にやりたいことを整理してみましょう。

Question
悩んでる人
悩んでる人
早くプログラミングしたいよう…
なんでこんなことするの?
バババ
バババ
プログラミングの考え方を理解してほしいので、「やりたいことを明確にする」「そのためにどんなこと(処理)をしなければいけないのか」「それらをどんな順番で実行するのか」考えていきます!

<解説>

プログラミングができるようになるための大切なポイントは、やりたいことを実現するために、『どんなこと(処理)を』『どんな順番に』行えば良いのか考えられるようになること」です。

これらを正しく考えられるようになれば、どんな複雑なプログラミングでも、どのように処理を組み立てれば良いか考えられるようになります。

「いちいち考えるの面倒くさいなぁ」と思うかもしれませんが、プログラミングの考え方を身に付けるためにこのような手順で実装していきます。

プログラムでやりたいこと

これから実装するプログラムをやりたいことは次の内容です。

・「140」の高さから「-142」の高さまでりんごを落とす。
・りんごを落とすときのX座標(横方向)は「-210」から「210」の範囲のランダムな位置。

やりたいこと実現するために「どんな処理をしなければいけないのか」を考える

やりたいことを実現するために何をしなければいけないのか考えていきましょう。順番は気にせずに、とりあえず必要だと思う処理を洗い出していきましょう。

・りんごを「140」の位置に配置する。
・りんごを「-142」に移動させる(りんごを落とす)。
・「-210」から「210」の範囲からランダムな位置(X軸の位置)を決定する。
・X軸の位置にりんごを配置する。

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

「りんごを落とす」とは「りんごを移動する」と同じことなので、移動させると考えるとわかりやすいかもしれませんね。

「どんな順番で処理しなければいけないのか」を考える

先ほど考えた「必要な処理」をどんな順番に行えば良いのか考えましょう。

まずは、りんごを落とす位置が決まらなければりんごを落とせないので、位置を決定する必要があります。Y軸の位置は決まっているので、X軸の位置を決めましょう。位置が決定したらその位置にりんごを配置します。最後のその位置からりんごを落とします。

やりたいことを実現するために必要な処理を順番通りに並び替えると次のようになります。

①「-210」から「210」の範囲からランダムな位置(X軸の位置)を決定する。
②りんごを「140」の位置に配置する。
③X軸の位置にりんごを配置する。
④りんごを「-142」に移動させる(りんごを落とす)。

これで、プログラミングする内容が整理できました。

プログラミングしていこう

先ほど整理した内容を、Scratchのコードブロックを使ってプログラミングしていきます。

ランダムな位置(X軸の位置)を決定する

最初に、『①「-210」から「210」の範囲からランダムな位置(X軸の位置)を決定する。』プログラミングをしていきます。

「ランダムな位置を決定する」と聞くと難しく感じるかもしれませんが、Scratchにはランダムな数値を決定してくれる便利なブロックが存在します。
それを使ってプログラミングしてみましょう。

①今回は「りんご」に対してプログラミングするので、りんごのスプライトを選択しましょう。
②コードを選択してコードブロックを表示しましょう。
③『演算』をクリックしましょう。
④演算の中に『1から100までの乱数』というブロックをドラッグします。(乱数とはランダムな数値のことです。)


今回は「-210」から「210」の範囲からランダムな数値が欲しいので、『1から100までの乱数』を『-210から210までの乱数』に書き換えます。


これで、「-210」から「210」の範囲からランダムな位置(X軸の位置)を決定するプログラミングは完了です。

りんごを落としたい位置に配置する

次に、『②りんごを「140」の位置に配置する。』『③X軸の位置にりんごを配置する。』をプログラミングしていきます。

①『動き』をクリックします。
②『x座標を○、y座標を○にする』というブロックをドラッグします。


このブロックを使用すれば、X座標・Y座標を好きな位置に配置することができます。
今回は「X座標がランダムな数値」「Y座標が140」となるので、それぞれの座標を指定します。

①『x座標を○、y座標を○にする』ブロックのX座標の○に『-210から210までの乱数』ブロックをはめこみます。
②『x座標を○、y座標を○にする』ブロックのY座標を「140」に変更します。

これで、「りんごを落としたい位置に配置する」プログラミングは完了です。

りんごを落とす

「りんごを落とす」とは「りんごを移動する」と同じことです。なので、りんごを「-142」の高さに移動させるプログラミングをしていきます。

スプライトを移動させる方法はいろいろありますが、今回は『○秒でx座標を○に、y座標を○に変える』というブロックを使って実装します。

①『動き』をクリックします。
②『○秒でx座標を○に、y座標を○に変える』というブロックをドラッグして「りんごを落としたい位置に配置する」プログラミングで作ったブロックの下にくっつけましょう。

『○秒でx座標を○に、y座標を○に変える』ブロックは、「元の位置からこのブロック指定した座標に○秒かけて移動させる」ことができるブロックです。

元の位置は、「りんごを落としたい位置」です。(X座標:-210~210の乱数、Y座標:140)
移動させたい位置は「X座標:元の位置と同じ、Y座標:-142」です。
何秒かけて移動させるかは好きな秒数を設定すればOKです。数値を大きくすればゆっくりになり、小さくすれば速くなります。

今回は次のように設定してみます。
1秒かけてx座標を元のx座標に、y座標を-142に変える」


これで「りんごを落とす」プログラミングは完了です。

プログラムを実行してみよう

完成したプログラムを実行してみましょう。

プログラミングしたブロックをクリックすると、そのブロックを動かすことができます。


どうですか?ちゃんとりんごが落ちてきましたか?
何回か実行して、X座標が毎回違う位置になることも確認しましょう。

下の動画のような動きになると成功です。

もし、うまく動かない場合は、上の画像のプログラムと見比べてどこが違うのか探してみてください。

まとめ

お疲れ様でした!
これで「ランダムな位置にりんごを落とすプログラム」は完成です。

今回のプログラムではりんごが1個しか落ちてきませんでした。りんごキャッチゲームなので、もっといっぱいりんごを落としたいですよね。

なので、次回は「りんごをクローンしていっぱい落とすプログラミング」をします。「クローンってなに?」と思う人もいるかもしれませんが、クローンについてもきちんと説明します。

次の記事「基本編③」はこちら↓
基本編③りんごをクローンしていっぱい落とそう

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

おすすめ

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

Scratch

Posted by バババ