#009 ロケットを矢印キーで動かす作り方|条件分岐の使い方

ok-scratch

スクラッチに挑戦している皆さん、どうも!スクラッチコーチです。

スクラッチの「もし〜なら」ブロックを使って、矢印キーでロケットを上下左右に動かすプログラムを作ります。条件分岐の基本と座標の仕組みを学べる初心者向けチュートリアル。

さぁ、スクラッチでナニ作る!?

ずっとループの中に4つの「もし〜なら」を並べる設計が効いている。各条件は独立しているため、2つのキーを同時に押したとき、それぞれの処理が実行されて斜め移動が自然に生まれる。排他的な分岐ではなくフラットに並べるだけで組み合わせの可能性を引き出せているのが面白い。コスチューム切り替えも同じブロック内に収まり、アニメーションと移動が一体になっている。どんな組み方でこの仕組みが動くのか、作り方を見ていこう。

動画で見てみよう

ok-scratch ok-scratch
チャンネル登録して応援よろしく!チャンネル登録する

チュートリアルの元になった作品

今回の目標

矢印キーを押すとロケットが上下左右に動くプログラムを作ります。動くたびにコスチュームが切り替わって、アニメーションっぽく見えるのがポイントです。

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

#1初期設定と右移動

ok-scratch ok-scratch
前回は乱数を使ってネコの速さをランダムにしたよね。今回は新しく「もし〜なら」を使って、矢印キーでロケットを自由に飛ばせるようにしていくよ。

準備

スプライト「ロケット」を開く

ロケットロケット
スプライトについて
矢印キーで上下左右に移動するロケット。移動するたびにコスチュームが切り替わりアニメーションする。
どんな役割か
ロケットを矢印キーで動かせるようにするよ!右・左・上・下のキーを押すとそれぞれの方向に10ずつ進むんだ。動くたびにコスチュームが変わって、アニメーションっぽく見えるのがポイント!

実装

step-0
コスチューム

コスチュームにはロケットを全種類追加しておこう

緑旗でスタートしたらサイズを65%にして画面中央に配置、「ずっと」のループもおなじみだよね。

確認プレビューしておこう 確認プレビューしておこう
旗を押すとロケットが真ん中に出てきて、右キーで右に動くね。コスチュームも切り替わってる。

#2移動を作る

step-1

ここからが今回のポイントで、ループの中に制御もし ( ) ならを入れるんだ。右矢印キーが押されてるかを判定して、押されてるときだけx座標を10変えて右に進む仕組みになってる。

動くたびにコスチュームも切り替わるから、アニメーション付きでロケットが飛んでいく。「ずっと」で常にチェックしつつ、「もし〜なら」で条件を満たしたときだけ処理する——もしこの条件分岐がなかったら、キーを押してなくても勝手に動き続けてしまう。これが条件分岐の基本的な考え方。

ok-scratch ok-scratch
ちなみにx座標とy座標って、算数や数学で出てくるグラフとまったく同じ仕組み。Scratchの画面はxが-240〜240、yが-180〜180の座標平面で、x座標を+10で右、-10で左、y座標は+で上、-で下に移動するんだ。ゲーム開発でもキャラの位置管理は全部この座標の考え方がベースになってるよね。

#3左と上の移動

step-2

右への移動ができたから、同じ仕組みで左と上にも動けるようにしていこう。左矢印キー用の制御もし ( ) ならではx座標を-10ずつ変えて左に進む——右が+10で左が-10、符号を逆にするだけ。上矢印キーはy座標を10ずつ変えて上に移動するんだ。

ok-scratch ok-scratch
「もし〜なら」ブロックって、実はほとんどのゲームの操作に使われてるんだよね。スマホゲームも裏側では「画面がタップされたなら」「敵に当たったなら」みたいな条件分岐がびっしり。たった1種類のブロックでキャラの操作からゲームオーバー判定まで作れちゃうんだ。

確認プレビューしておこう 確認プレビューしておこう
左キーと上キーでもロケットが動くようになったね。

#4下移動で完成

ok-scratch ok-scratch
最後に下方向の移動を追加して、4方向すべてにロケットが飛べるようにしよう。
step-3

下矢印キー用の制御もし ( ) ならでy座標を-10ずつ変えるよ。これで制御ずっとの中に4つの「もし〜なら」が並んだ状態になった。それぞれが独立して判定されるから、右と上を同時に押せば斜めにも飛べるんだ。

条件分岐の基本はこれでバッチリ。次回はイベント入力について学んでいくよ!

確認プレビューしておこう 確認プレビューしておこう
下キーも追加して、これで4方向全部動かせるようになったよ。

まとめ

今回は「もし〜なら」を使って、矢印キーでロケットを4方向に動かせるようにしたよ。大事なのは条件が独立してるから複数のキーを同時に押しても斜め方向に飛べるところ。次回はイベント入力について学んでいくよ!

ブクマよろしくお願いします! ブクマよろしくお願いします!
どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!