Scratchで障害物競争ゲームを作ろう 基本編②キャラクターを動かそう

2020年5月6日

基本編①ではコースを作りました。次は、キャラクターを動かせるようにプログラムしていきましょう。

基本編①はこちら↓
基本編① コースを作ろう

障害物競争ゲームを作ろうトップ記事はこちら↓
障害物競争ゲームを作ろうトップ記事

キャラクター(スプライト)を動かす

スプライトに名前を付ける

Scratchでは、ステージに登場させるキャラクターのことを『スプライト』と言います。基本編②では、スプライトを操作できるようにしていくので、スプライトにわかりやすく名前をつけておきましょう。

基本編①が終わった状態は、背景編集画面になっているので、コード編集画面へ切り替えます。
画面左上の『コード』タブを選択します。

コード編集画面に切り替わりました。

①キャラクター画面右下の「スプライト」パネルの『スプライト1』を選択します。
②スプライトパネルの「sprite1」となっているところをクリックして、「ねこ」と入力します。

「スプライト1」が「ねこ」に変わっていたらOKです。

「ねこ」をスタート位置に配置する

ゲームをスタートすると、「ねこ」がスタートの場所にいるようにします。
①ステージの「ねこ」をドラッグし、スタートの位置に移動させましょう。
②このままだと大きいので、大きさを「20」にしましょう。

ねこが移動し、小さくなりました。

ゲームをスタートすると、「ねこ」がスタート場所にいるように「コード」を作ります。

”ゲームをスタートすると”をコードで表現する

ゲームは「緑色の旗を押す」ことでスタートします。
コードブロックで表現すると、

①『イベント』をクリックします
②『緑の旗が押されたとき』をドラッグします

”「ねこ」がスタート場所にいる”をコードで表現する

「ねこ」が今いる場所は、「x」と「y」で書かれています。

この画像では、ねこは「xは-169」「yは120」の場所にいるとわかります。
つまり、ゲームがスタートしたとき、ねこは「xは-169」「yは120」の場所にいれば良いですね。
コードブロックで表現すると、
①『動き』をクリックします
②『x座標を()、y座標を()にする』をドラッグして、『緑の旗が押されたとき』のブロックの下にくっつけましょう。※()の中は自分のゲームでのねこの座標に変更します

ヒント xの数字が大きいとスプライトが右側に、小さいとスプライトが左側に移動します。
    yの数字が大きいとスプライトが上側に、小さいとスプライトが下側に移動します。

これでゲームを始めると、「ねこ」がスタートの場所にいるようになります。
ステージの「ねこ」をスタートではない場所にドラッグして移動させてから「緑の旗」ボタンを押してみましょう。
「ねこ」がスタートの場所に戻ってきたらOKです。

十字キー入力を受け取る

次は「ねこ」を操作できるようにします。
操作方法を確認しましょう。

  • キーボードの『上向き矢印キー』が押されると、上に進む
  • キーボードの『右向き矢印キー』が押されると、右に進む
  • キーボードの『下向き矢印キー』が押されると、下に進む
  • キーボードの『左向き矢印キー』が押されると、左に進む

キーボードの『上向き矢印キー』が押されると、上に進む

まずは「上向き矢印キーが押されると、上に進む」をコードにしていきましょう。
Scratchでは、上下の方向はyで表します。プラスの数字だと上、マイナスの数字だと下に進みます。
なので、コード風にいいかえると、
“もし上向き矢印キーが押されたなら、y座標を(5)ずつ変える"
となります。

ヒント 数字が大きいほど上への移動が速くなります

コーディングしていきましょう。
①『制御』をクリックします。
②『もし<>なら』をドラッグして、『x座標を()、y座標を()にする』ブロックの下にくっつけます。

もし<>なら』の<>の部分は、”上向き矢印キーが押される”でしたね。そのようにコーディングしていきましょう。
①『調べる』をクリックします。
②『(スペース)キーが押された』の(スペース)部分を(上向き矢印)に変更します。
③『もし<>なら』ブロックの<>部分に向かってドラッグし、<>部分にはめこみます。

”もし上向き矢印キーが押されたなら”、”y座標を(5)ずつ変える”んでしたね。
①『動き』をクリックします。
②『y座標を()ずつ変える』の()内を5に変更します。
③『もし<>なら』ブロックの間に挟まるようにドラッグします。

キーボードの『右向き矢印キー』が押されると、右に進む

つぎに、「右向き矢印キーが押されると、右に進む」をコードにします。
とはいえ、「上向き矢印キーが押されると、上に進む」とほとんど一緒です。
上下の方向は「y」で表すんでしたね。左右の方向は、「x」で表します。プラスの数字だと右、マイナスの数字だと左に進みます。
なので、「右向き矢印キーが押されると、右に進む」をコード風にいいかえると、
“もし右向き矢印キーが押されたなら、x座標を(5)ずつ変える"
となります。

ヒント 数字が大きいほど右への移動が速くなります

コードはほとんど同じですから、複製してやっていきましょう。
もし<>なら』ブロック(黄色い部分)で右クリックし、「複製」をクリックします。

コピーされたブロックを一番下にくっつけましょう。

同じではない部分のコードを変更しましょう。
①『(上向き矢印)キーが押された』の(上向き矢印)を(右向き矢印)にします。
②『y座標を(5)ずつ変える』をスクリプトエリアの外にドラッグして捨てます。
③『動き』の『x座標を(10)ずつ変える』の(10)を(5)に変更し、『もし<>なら』ブロックの中に挟み込みます。

これで、上の動きと右の動きができました。

”ずっと”動かす ループ制御

ここまでのコードで一度ゲームを動かしてみましょう。『緑の旗ボタン』をクリックするとゲームスタートでしたね。

今のところ、上向き矢印キーと右向き矢印キーでだけ動かせるようにコードを作っているので、どちらかのキーを押してみましょう。

……動きませんね。

実は、スタート直後の一度だけ、「上向き矢印キー」や「右向き矢印キー」を押すと「ねこ」が少しだけ動きます。これは、「コードが実行されるのは1回きり」だからです。コード(プログラム)は実行中にしか反応してくれません。実行終了後にいくらキーを押しても反応できないのです。スタート直後の少しの間だけはコードが実行中なので、「ねこ」が動きます。

これではゲームになりません。スタート直後だけでなく、ゲームが終わるまでずっと「ねこ」を動かせないと
そこで、"ずっと"動くように変えていきましょう。

①『制御』をクリックします。
②『ずっと』ブロックを『x座標を()、y座標を()にする』ブロックと『もし<>なら』ブロックの間にドラッグします。

このようになりました。

これで、もう一度ゲームを動かしてみましょう。
ゲームをストップするには『停止ボタン』を押します。
上向き矢印キー、右向き矢印キーの両方で「ねこ」が動くようになりました。
あとは、下向き矢印キーと左向き矢印キーを押されたときのコードを作れば、操作のコードは完成ですね。

下向き矢印キーと左向き矢印キーの操作

この二つのコードも、ほとんど上向き矢印キー、右向き矢印キーのコードと同じです。
考えてみて、自分でコーディングしてみましょう。
ちゃんと動くかどうかはゲームを実行しながら確認できますね。

うまくいきましたか?サンプルでは以下のように実装しています。

まとめ

お疲れ様でした!
今回は長かったですね。

これで、キャラクターを操作できるようにするコーディングはおしまいです。
次回は、ゲームのルールをプログラムしていきましょう。

次の記事「基本編③」こちら↓
基本編③ ゲームにルールをつけよう

障害物競争ゲームを作ろうトップ記事はこちら↓
障害物競争ゲームを作ろうトップ記事

おすすめ

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

Scratch

Posted by バババ