スクラッチプログラミング - フラッピーゲームのつくりかた

フラッピーバード風(ふう)のゲームを Scratch でつくる方法(ほうほう)を紹介(しょうかい)します。マウスやタッチで操作(そうさ)するので、キーボードなしのタブレットなどでもあそぶことができるモバイル対応(たいおう)のゲームです。

スクラッチプログラミング - フラッピーゲームのつくりかた

鳥(とり)をパタパタとばそう

Scratch (スクラッチ)をつかって、フラッピーバード風(ふう)のゲームをつくってみましょう。

クリックまたは画面(がめん)のタッチで鳥(とり)をはばたかせて、障害物(しょうがいぶつ)にあたらないようにするゲームです。つかうスプライトは2つだけ。ブロックの数(かず)も比較的(ひかくてき)すくなめなので、「なにか簡単(かんたん)なゲームをつくってみたい!」という方(かた)にオススメです。

サンプルプロジェクト

下(した)にあるのは、フラッピーゲームのサンプルプロジェクトです。記事(きじ)をよみすすめる前(まえ)に、鳥(とり)やパイプのうごきをみておいてください。

Scratch|フラッピーゲームのサンプルGIF
Scratch|フラッピーゲームのサンプルGIF

スプライトを用意(ようい)しよう

ゲームにつかうスプライトを2つ用意(ようい)しましょう。

1つは、ゲームの主役(しゅやく)である鳥(とり)のスプライトです。鳥(とり)はパタパタとはばたくようにするので、羽(はね)のむきがちがうコスチュームを2つつくってください。

鳥のコスチューム2つ
鳥のコスチューム2つ

もう1つは、障害物(しょうがいぶつ)となるパイプです。パイプはステージの上下(じょうげ)に配置(はいち)します。次(つぎ)の点(てん)に注意(ちゅうい)して、パイプをえがいてください。

  • ① パイプの間(あいだ)のすきまは、鳥(とり)がとおる場所(ばしょ)です。せますぎると難易度(なんいど)がたかくなり、ひろすぎるとゲームが簡単(かんたん)すぎになるので、適当(てきとう)な間隔(かんかく)にしましょう。
  • ② パイプは、この後(あと)スクリプトをつくるときに、上下(じょうげ)の位置(いち)がランダムになるようにします。上下(じょうげ)にうごかしたときにパイプのみためがとぎれないよう、キャンバスの端(はし)ギリギリまでのばしてえがきましょう。
パイプのスプライト
パイプのスプライト

以上(いじょう)で、スプライトを2つ用意(ようい)できました。

鳥(とり)の最初(さいしょ)の設定(せってい)

ここからは、鳥(とり)のスプライトを選択(せんたく)してスクリプトをつくっていきます。ゲームをはじめるときの最初(さいしょ)の状態(じょうたい)を設定(せってい)しましょう。

  1. 位置(いち)はステージの左側(ひだりがわ)にします。
  2. ゲーム中(ちゅう)にむきを変化(へんか)させるので、最初(さいしょ)は右(みぎ)むきにしておきます。
  3. 変数(へんすう) y速度(そくど) をつくって、0 にします。
鳥の初期設定
鳥の初期設定

y速度(そくど) は、鳥(とり)を上下(じょうげ)にうごかすための変数(へんすう)です。変数(へんすう)をつかうと、なめらかで、よりリアルなうごきをつくれるようになります。

鳥(とり)をうごかそう

鳥(とり)は、なにも操作(そうさ)しないと、自動的(じどうてき)に下(した)へおちるようにします。ずっと の間(あいだ)にブロックをつなげていきましょう。

  1. y速度(そくど) をすこしずつへらして、だんだんはやく下(した)へおちるようにします。
  2. おちるときは、ななめ下(した)へむけます。
常に下へうごかす
常に下へうごかす

つづけて、鳥(とり)を操作(そうさ)できるようにします。マウスをおす、または、画面(がめん)のタッチで、鳥(とり)を上(うえ)へうごかしましょう。

  1. マウスがおされたことを確認(かくにん)します。
  2. y速度(そくど) をプラスの値(あたい)にして、上(うえ)へうごくようにします。
  3. むきを、ななめ上(うえ)にします。
マウス押下で上へ動かす
マウス押下で上へ動かす

鳥(とり)が上(うえ)へうごくときは、羽(はね)をパタパタさせます。メッセージをおくって、はばたかせましょう。

  1. はばたかせるためのメッセージをおくります。
  2. メッセージをうけとったら、コスチュームをきりかえます。
メッセージを合図にして見た目を変化させる
メッセージを合図にして見た目を変化させる

メッセージをつかうのは、なぜ?

上(うえ)の説明(せつめい)からわかるように、コスチュームのブロックは ずっと の中(なか)にはつなげません。その理由(りゆう)は、次(つぎ)のとおりです。

  • コスチュームをきりかえる時(とき)に、0.5びょうまつ をつかいます。
  • ◯ びょうまつずっと の中(なか)にいれてしまうと、鳥(とり)の上下(じょうげ)のうごきにも ◯ びょうまつ が影響(えいきょう)します。そのため、鳥(とり)のうごきがとぎれてしまい、スムーズにうごきません。
  • これをふせぐために、メッセージをおくって、上下(じょうげ)のうごきとは別(べつ)のところではばたくためのうごきをつくっています。
正しく動かないスクリプト例
正しく動かないスクリプト例

ゲームオーバー

鳥(とり)の操作(そうさ)に失敗(しっぱい)したら、ゲームオーバーです。

パイプにあたったときだけでなく、ステージの上下(じょうげ)にふれた場合(ばあい)もゲームオーバーにします。ゲームをおわりにするためのメッセージをおくりましょう。

ゲームオーバーの条件を確認してメッセージを送る
ゲームオーバーの条件を確認してメッセージを送る

ゲームオーバーになったときの鳥(とり)うごきを、ゲームオーバー をうけとったとき の下(した)につなげていきましょう。

  1. マウスをおしても鳥(とり)がうごかないようにします。
  2. y速度(そくど) をおおめにふやして、鳥(とり)がぶつかったことを表現(ひょうげん)します。
  3. 下(した)のほうまで回転(かいてん)させながらうごかします。x 座標(ざひょう)も変化(へんか)させて、真下(ました)ではなく、すこし左(ひだり)へおちるようにします。
ゲームオーバーになった時の動き
ゲームオーバーになった時の動き

以上(いじょう)で、鳥(とり)のスクリプトが完成(かんせい)です。

パイプの最初(さいしょ)の設定(せってい)

ここからは、パイプのスプライトを選択(せんたく)してスクリプトをつくっていきます。ゲームをはじめるときの最初(さいしょ)の状態(じょうたい)を設定(せってい)しましょう。

  1. パイプはクローンをつくるので、もとのスプライトはかくしておきます。
  2. 変数(へんすう) ポイント をつくって、0 にします。
パイプの初期設定
パイプの初期設定

ポイント は、鳥(とり)がパイプを通過(つうか)したときに、1ポイントずつかぞえるための変数(へんすう)です。

パイプのクローンをうごかそう

パイプのクローンをつくって、ステージの右(みぎ)から左(ひだり)へうごかしましょう。

  1. ゲーム中(ちゅう)はパイプのクローンをつくりつづけます。
  2. クローンは、ステージの右端(みぎはし)に表示(ひょうじ)します。縦(たて)の位置(いち)はランダムです。
  3. 左端(ひだりはし)までうごかしたら、クローンは削除(さくじょ)します。
クローンを作って動かす
クローンを作って動かす

クローンをつくる間隔(かんかく)の ◯ びょうまつ と、うごかすはやさの x ざひょうを ◯ ずつかえる の値(あたい)によって、パイプのうごきがかわります。ゲームの難易度(なんいど)を調整(ちょうせい)したいときは、これらの値(あたい)をかえてみてくださいね。

ポイントをかぞえよう

鳥(とり)がパイプを通過(つうか)したら、1ポイントずつふえるようにしましょう。

ポイントをふやすタイミングは、パイプの x 座標(ざひょう)と鳥(とり)の x 座標(ざひょう)をもとに判断(はんだん)します。

パイプと鳥のx座標を調べる
パイプと鳥のx座標を調べる

クローンされたとき をもう1つ追加(ついか)して、その下(した)にブロックをつなげていきましょう。ポイントをふやす方法(ほうほう)として、3つのスクリプトをつくってみますので、どのスクリプトがベストかを一緒(いっしょ)にかんがえてみてください。

スクリプト1

1つめは、パイプと鳥(とり)の x 座標(ざひょう)が「ひとしく」なったらポイントをふやす方法(ほうほう)です。

このスクリプトは、ただしくうごくこともありますが、そうでない場合(ばあい)もあります。理由(りゆう)は、パイプをうごかす量(りょう)である x ざひょうを ◯ ずつかえる の値(あたい)によっては、パイプと鳥(とり)の x 座標(ざひょう)がピッタリおなじにならない場合(ばあい)もあるからです。

正しく動かない場合もあるスクリプト
正しく動かない場合もあるスクリプト

スクリプト2

2つめは、パイプの x 座標(ざひょう)が鳥(とり)の x 座標(ざひょう)より「ちいさく」なったらポイントをふやす方法(ほうほう)です。

パイプは左(ひだり)へうごきつづけるので、パイプの x 座標(ざひょう)は、かならず、鳥(とり)の x 座標(ざひょう)よりちいさくなります。これで、1つめの「 x 座標(ざひょう)がピッタリおなじにならない場合(ばあい)もある」という問題(もんだい)は解決( かいけつ)です!

ポイントが連続加算されるスクリプト
ポイントが連続加算されるスクリプト

ところが残念(ざんねん)。このスクリプトは、まったくただしくうごきません。1ポイントだけふやしたいのに、連続(れんぞく)でポイントがふえてしまうのです。その理由(りゆう)は、パイプが鳥(とり)の位置(いち)をとおりすぎた後(あと)、「パイプの x 座標(ざひょう)が鳥(とり)の x 座標(ざひょう)よりちいさい」という条件(じょうけん)を、ずっとみたしつづけてしまうからです。

スクリプト3

ポイントをかぞえるためのベストな方法(ほうほう)は、この3つめになります。

スクリプト1・2では、ずっともし〜なら をつかって、パイプと鳥(とり)の x 座標(ざひょう)を常(つね)にチェックするようにしていましたね。3つめの方法(ほうほう)では、スクリプト1・2で発生(はっせい)する問題(もんだい)をさけるために、〜までまつ をつかいます。

条件を満たすまで待ってからポイントを増やすスクリプト
条件を満たすまで待ってからポイントを増やすスクリプト

〜までまつ は、指定(してい)した条件(じょうけん)をみたすまでは、なにもしません。パイプの x 座標(ざひょう)が鳥(とり)の x 座標(ざひょう)よりちいさくなるのをまってから、ポイントを1だけふやします。〜までまつ をつかうと、 ずっと をつかわずにすむところにも注目(ちゅうもく)です。

ゲームオーバー

最後(さいご)に、ゲームオーバーになった時(とき)のパイプのうごきをつくりましょう。

ゲームオーバーのメッセージをうけとったら、パイプのうごきをとめます。そのためにつかうのは、スプライトのほかのスクリプトをとめる です。

ゲームオーバーになったら動きを止める
ゲームオーバーになったら動きを止める

ゲームをおわりにするのだから、すべてをとめる をつかってもよさそうですよね。ただ、すべてをとめる をつかうとクローンは一瞬(いっしゅん)で削除(さくじょ)されてしまうため、ゲーム画面(がめん)にのこるのが鳥(とり)だけになってしまいます。スプライトのほかのスクリプトをとめる をつかえば、クローンのうごきはとまりますが削除(さくじょ)はされないので、ゲーム画面(がめん)にパイプを表示(ひょうじ)したままゲームをおわりにすることができるのです。

スクリプト完成(かんせい)

フラッピーゲームのスクリプトが完成(かんせい)です。

鳥のスクリプト
鳥のスクリプト
パイプのスクリプト
パイプのスクリプト

この記事(きじ)で紹介(しょうかい)したスクリプトは、できるだけすくないブロックでつくるフラッピーゲームでしたが、Scratch フラッピーゲーム by Pyxofyでは、よりあそびやすくしたフラッピーゲームをためすことができます。ぜひあそんでみてください!

Scratch|フラッピーゲーム by Pyxofy
Scratch|フラッピーゲーム by Pyxofy

「きょうからはじめるスクラッチプログラミング入門」by Pyxofy

Pyxofy から Scratch の基本をまとめた電子書籍を出版しました。
Apple Books・Kindle でご購入ください。

特設ページはこちら

まとめ

今回(こんかい)は、Scratch でフラッピーゲームをつくる方法(ほうほう)を紹介(しょうかい)しました。

フラッピーゲームは、クリックまたは画面(がめん)のタッチで鳥(とり)を操作(そうさ)するゲームです。つかうブロックもおおくないので、簡単(かんたん)につくることができます。スクリプトはそのままで、鳥(とり)やパイプをちがうモノにかえてもおもしろいかもしれませんね。ぜひつくってみてください!

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!

SNS で Pyxofy とつながりましょう! LinkedInThreadsBlueskyMastodon X (Twitter) @pyxofyFacebook

関連記事

スクラッチプログラミング - スプライトをフワフワとうごかそう
スプライトをフワフワとうごかしてあそぶゲームをつくってみましょう。つぎつぎとあらわれる障害物(しょうがいぶつ)にぶつかったら、ゲームオーバー。そうさは画面(がめん)をタッチするだけでかんたんです!
JavaScript - Pyxofy
プログラミング言語のJavaScriptについて、初心者向けに解説しています。
CSS Art
Articles for creating CSS Art.
CSS Animation – Hot Air Balloon Launch
Ever wondered how to make things launch and float using only CSS? Join us in this step-by-step article to learn how to launch a hot air balloon.