キャリまが

30代で未経験からグローバル企業に転職した筆者が、英語、お金、子育てなどについて語るブログ

Scratch Jr.作例「ききいっぱつゲーム」前編(1/2):ランダムに見える動きをプログラムする

こんにちは。キャリまが管理人のヘルペスもちです。

2020年からのプログラミング教育必修化にあたり、我が家の「プログラミング教育担当大臣」に任命されました。

その一環で子ども向けプログラミングソフトの「Scratch Jr.に」にはまってしまい笑、ガンガン作品を作っております。

ちなみにこれまで作った作品はこちら↓

さて、今回も新作を作っていきます。
今回つくる作品は「ききいっぱつゲーム」です。

完成形はこちら↓


ルールとしては

  • 宇宙ステーション内で、爆発に当たらないように脱出ロケットにたどり着いたらクリア
  • 爆発に当たったらゲームオーバー
  • 宇宙ステーションの壁から外に出てもゲームオーバー
  • タイマーが一周するまでに脱出できないと「じかんぎれ!」

となります。

このゲームのポイントは「ランダムに見える動き」「制限時間タイマー」作る事です。

爆発は、一見ランダムで起きているように見えますが、よく見るとある法則に従って起きていることが分かります。

制限時間内にその法則に気がつくことができれば、難なくクリア出来るようになっています。

また、制限時間を表示するために、タイマーを表示していますので、そちらの作り方も後編で解説していきます。

それでいってみましょう!

画面をぜんぶつくる

さて、毎回のパターンですが、最初のゲームで使用する画面を全部作ってしまいます。

今回使用する画面は

  1. ゲーム画面
  2. じかんぎれ!画面
  3. ざんねん!画面
  4. やったー!画面

の4つです。


どの画面も「もどる」ボタンを押したらゲーム画面に戻るようにプログラムします。

ちなみにテキストは

  • 「じかんぎれ!ばくはつにまきこまれた」
  • 「ざんねん!うちゅうくうかんになげだされた」
  • 「やったー!だっしゅつせいこう」

にしてあります。
ここはお好みにアレンジしてください。

なお、今回もスタート画面はありません。

ゲームステージの自作

背景は「うちゅう」ですが、ゲーム画面のみ、そこにゲームステージとタイマーを描き込んでいます。

こんな感じで、四角形ツールと複製ツール、それから丸ツールを使って、

  • 1:1の盤面
  • 時計の丸

を書き込みましょう。


なお盤面の1辺は、Scratch Jr.の画面でいう3マスに相当しますので、覚えておいてください。

これは、「めいろゲーム」でやったのと同じやり方ですね。

「方向キーを1回押した時に進む距離」を可視化するために、このように盤面を設けます。

関連記事:「めいろゲーム」でユーザーにやさしい操作性について考える

宇宙ステーションの壁を作る

続いて宇宙ステーションの「壁」を作ります。

新規キャラクターで、正方形を描きます。

あとで拡大するので、縦横比が1:1になっていれば大きさは大体でいいのですが、線の太さを細めにしておいた方が後々つごうが良いです。

壁を配置したら、大きさを変えるブロックで、背景の盤面に合うように調節します。
またこの壁にぶつかったら、ざんねん!画面に遷移するようプログラムして完成です。


方向キーの自作

つづいて、宇宙飛行士を動かす方向キーの自作です。
こちらも新規キャラクターで、三角形ツールと回転ツールを使って作りました。


プログラム内容は、めいろゲームで使ったプログラムと同じ内容です。
タップしたら宇宙飛行士側にメッセージを送るようにプログラムします。

それだけでなく、進む距離が一定になるよう、連打できないように、タップしたらいちど消えるようにしています。

めいろゲームでも書きましたが、方向キーを連打できてしまうと、1回目の指示が完了する前に次の指示が飛んでしまうため、進む距離が一定でなくなり、ゲームが成り立たなくなってしまうのです。

関連記事:「めいろゲーム」でユーザーにやさしい操作性について考える

左右上下、それぞれ色違いのメッセージを送るように出来たら、方向キーの完成です。

宇宙飛行士を作る

宇宙飛行士側では、先ほどの方向キーからのメッセージを受け取ったら、その方向に「3マス」進むようにプログラムします。


背景の盤面の1辺が3マスなので、盤面上を1マスずつ進むようにプログラムしてあります。

脱出用ロケットのプログラム

次に脱出用ロケットのプログラムです。

宇宙飛行士がぶつかったらやったー!画面に遷移するようにプログラムして完成です!


さて、簡単なキャラクターのプログラムはここまで完成しました。
続いて、ちょっと複雑な「爆発」の動きをプログラミングしていきます。

ランダムに見える「爆発」の動きのプログラム

さていよいよ、このゲームのポイントの1つである、「ランダムに見える」動きのプログラムをしていきます。

このゲームでは爆発がランダムに発生しているように見えますが、よく観察すると一定の法則に基づいて、決まった位置だけで発生していることがわかります。


というかですね、ホントにランダムにしてしまったら、ただの「運ゲー」になってしまうので、それではゲーム性が損なわれてしまうわけです…。

爆発には4つの同じキャラクターを使用しています。
このように、まず爆発を手書きし、新規キャラクターで4つ配置します。



続いて爆発の位置ですが、タネ明かしすると、爆発の動きはそれぞれ2カ所を行ったり来たりしているだけなのです。
仮にそれぞれの爆発をA、B、C、Dとすると、こんな感じです。


まず、Aを取り上げてプログラムを見ていきます。

基本的には、

  • 姿を現わす
  • 1秒待つ
  • 姿を消す

という動きと↓


  • 横に3マス進む
  • 縦に6マス(合計9マス)進む

という動き↓


を繰り返して、2ヶ所を行ったり来たりしているだけです。
あとはそれをずっと繰り返しです。


ぶつかったらざんねん!画面に遷移するようにして完了です。

B、Cについても、同様です。
Aとは表示される位置が変わりますが、2ヶ所を合計9マスの移動で行ったり来たりするだけです。

この「合計9マス」は、爆発が現れるタイミングが同じになるよう、全ての爆発で統一するようにしています。

ゲームの難易度を上げたい場合は、このタイミングをずらすと、一気に規則性が読み取りづらくなると思います。

最後に、Dの爆発ですが、Dは盤面上で隣り合ったマスを行ったり来たりしているだけなので、ほかの3つの爆発とは移動距離が違います。

移動するだけなら3マスの移動で足りるのですが、合計9マスになるよう、このように一度行き過ぎて戻るようにしています。


ちゃんと動きましたか?

もしかしたらもっと簡単なプログラム方法があるかもしれません。
色々と考えてみてください!

さて、あとは制限時間タイマーを作って完成ですが、ちょっと長くなってきたので、後編に続きます。

Scratch Jr.でどのように時間を測るのか、乞うご期待です!

それでは〜。


スポンサーリンク