スポンサーリンク

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門

2018年8月14日

Scratchで作ろうシリーズ。
本やScratchサイトの作品集を見ながら同じよう作品を作ってみます。
今回作るのは、「フラッピーキャット(バードでもOK)」です。

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門

フラッピーキャットを作ろう!プログラミング入門

フラッピーバードは人気なゲーム。
鳥(バード)が障害物をよけながら前に進んでいくゲームです。

「フラッピーキャットをつくろう」制作のための参考

Scratchのサイトで「flappy」を検索すると何個か出てきます。
右上の青マーク「中を見る」をクリックすると、出来上がったブロックがスプライトごとに表示されますので参考にしてください。
ほかにも主要なScratchプログラミングやこどもプログラミングの本なら、フラッピーバードが載っているはずです。

【Scratch入門】フラッピーバードの作り方/コーダー道場宇津木台さん(PDF))

さぁ、「フラッピーキャットをつくろう」でプログラミングをはじめよう。

「フラッピーキャットをつくろう」で学べる知識

  • 繰り返し(ループ)
  • 条件文(もし〇〇なら)
  • コスチュームの切り替え
  • 並列処理
  • 変数(速度・重力)
  • 乱数
  • 演算
  • 座標
  • クローン

まずは工程をかくにん

Scratchサイトで同じ作品を探してみて、あったら緑色の旗をクリックして動かしてみましょう。
まずは中身を見ないで、どういう順序でつくったらいいか考えてみましょう。

  1. 飛んでいるネコのスプラウトを追加します
  2. ネコのスクリプト1(左上から落ちてる感じに)
  3. ネコのスクリプト2(重力のように落下点で速度を変えます)
  4. ネコのスクリプト3(上にジャンプも同じように速度を変えます)
  5. ネコのスクリプト4(落ちるときと浮上するときのポーズを変えます)
  6. 障害物のスクリプト1(不規則に出現し右から左に移動)
  7. 障害物のスクリプト2(クローンを作成)
  8. 背景を追加しネコを小さく
  9. スコアとゲームオーバーの設定
  10. バグ(不具合)を修正し完成です!

1 飛んでいるネコのスプラウトを追加します

プレイヤー(主人公)には「飛んでいるネコ」を選びます。
スプライトのライブラリーから「Cat1 Flying」を選択し、「OK」をクリックします。
最初からあるネコのスプラウトは右クリックして削除します。

2 ネコのスクリプト1(左上から落ちてる感じに)

ネコのスタート位置を決めるには座標の理解が必要です。
ネコを動かすと、右のスクリプトエリアにx座標とy座標の数字が表示されています。
x座標は左右の横の位置を決め、y座標は上下の縦の位置を決めていることが分かります。
プレイヤーはスタート時に左上にいて、ジャンプさせながら右に進んでいくように作っていきますので、スタート位置を「x座標-100、y座標145」にすると設定しました。
プレイヤーは上から落ちていくイメージなので、「ずっと」の中に、「y座標を-10ずつ変える」を入れました。

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門1

3 ネコのスクリプト2(重力のように落下点で速度を変えます)

まず「データ」から変数「速度」を作ります。
このとき、変数「速度」は「このスプラウトのみ」に適用されるようにします。

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門2

上の方にいるときは速度は小さく、下の方にいるときの速度は大きく設定していきます。
「旗クリック」と「x座標y座標」の間に「速度を0にする」を入れます。
「ずっと」の中の「y座標を変える」の「-10」を「速度」に変更します。
こうすると、速度が大きいと落ちる幅も大きくなりますね。
その下に「速度を-0.8ずつ変える」を入れます。
これによって落ちていくにしたがって速度が速くなっていきます。

4 ネコのスクリプト3(上にジャンプも同じように速度を変えます)

これまでつくったブロックとは別で「スペースキーが押されたとき」と「速度を8にする」ブロックをつなげます。
これで浮上するときも同じように、下の方にいるときは早く、上の方にいるときは遅くなりました。

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門3

5 ネコのスクリプト4(落ちるときと浮上するときのポーズを変えます)

ジャンプで浮上してくるときのポーズは、落ちるときと違って左手を上に力強くしましょう。
そのポーズはコスチュームタブで「flying-b」として設定されています。
では、落ちているときと浮上しているときは、どうやって判断したらいいでしょうか?
そういえば、落ちているときの速度はマイナスで、浮上しているときはプラスの速度が設定されていましたね。
そこで、速度が0より小さければ「flying-a」のポーズで、そうじゃなければ「flying-b」のポーズとすれば良いでしょう。
条件によってポーズが変わってくるので、条件が分岐します。
こういうときは、「もし○○なら△△、でなければ□□」を使います。
並列処理で、新たに「旗クリック」のブロックを選び、その下に「ずっと」、その中に「もし○○、でなければ」を入れます。
もしの後には「演算」から「<」を選び、左には「速度」、右には「0」を入れます。
その下は「flying-a」と「flying-b」になります。

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門4

6 障害物のスクリプト1(不規則に出現し右から左に移動)

スプライトライブラリーから「岩(Rocks)」を選択します。
障害物の岩は右から左に動いてきます。
岩は左端までいったら消えるようにします。
左端のx座標は「-250」になります。
「乱数」を使って、岩の登場位置を不規則に設定します。

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門5

7 障害物のスクリプト2(クローンを作成)

障害物の岩が何個も出現するようにします。
並列処理で、「ずっと」の中に「自分自身のクローンを作る」「1から3までの乱数秒待つ」を入れます。
そして、前に作ったブロックの「隠す」を「このクローンを削除する」に変更します。

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門6

8 背景を追加しネコを小さく

背景ライブラリーから「blue sky」を選びました。
プレイヤーの大きさは、「スクリプトタブ」の上にある中心に矢印が4つ集まったマークをクリックして、ネコの画像をクリックするたびに小さくなっていきます。
8回ほどクリックして、ちょうどいい大きさになりました。

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門7

9 スコアとゲームオーバーの設定

スコアは「データ」から新しい変数として変数名「スコア」を作ります。
このとき、スコアはすべてのスプラウトに適用されるようにします。
ネコのスクリプトで、別途「旗クリック」の下に「スコアを0にする」をくっつけます。
障害物の岩のスクリプトでは、前に作った条件分岐のブロックの「このクローンを削除する」の上に「「スコアを1ずつ変える」を追加します。

ゲームオーバーはゲームを難しくしたいときに有効な設定です。
「ずっと」の中に「もし障害物に触れたら」「すべてを止める」としても良いですが、もう少し難しくしたい場合は「または端に触れたら」も追加してもいいでしょう。

【Scratch入門】フラッピーキャットを作ろう!プログラミング入門8

10 バグ(不具合)を修正し完成です!

旗がクリックしてみましょう。
不具合があったら修正していきます。
今回は不具合はなかったので、正常にプレイしてゲームクリアとなりました。

最初は誰だって初心者です。
やりながら順番に覚えていきましょう。
さぁ、プログラミングをはじめましょう。

プログラミングサポートページ/ミライサイエンス

ミライサイエンススタジオのスクラッチサイト