フラッピーバードを自動操縦してみる！

#フラッピーバードを自動操縦してみる！

こんにちは。プログラミングスクールTENTOで<ruby><rb>講師</rb><rp>《</rp><rt>こうし</rt><rp>》</rp></ruby>をしている谷岡です。OtOMOの倉本さんが誰か書かないか？とつぶやいていたので、<ruby><rb>重</rb><rp>《</rp><rt>おも</rt><rp>》</rp></ruby>い<ruby><rb>腰</rb><rp>《</rp><rt>こし</rt><rp>》</rp></ruby>を上げて<ruby><rb>参加</rb><rp>《</rp><rt>さんか</rt><rp>》</rp></ruby>することにしました。

TENTO : [http://www.tento-net.com/](http://www.tento-net.com/ "TENTO")
OtOMO : [http://otomo.scratch-ja.org/](http://otomo.scratch-ja.org/ "OtOMO")

<ruby><rb>普段</rb><rp>《</rp><rt>ふだん</rt><rp>》</rp></ruby>、教室内ではビジュアル言語のビスケットやスクラッチはあんまり教えてなくて、主にJavaScriptなどのテキスト言語を教えてるので、お高くとまって見えるかもしれませんが、<ruby><rb>結構</rb><rp>《</rp><rt>けっこう</rt><rp>》</rp></ruby>フレンドリーなので、もっと気さくに話しかけてほしいです。みんなが<ruby><rb>想像</rb><rp>《</rp><rt>そうぞう</rt><rp>》</rp></ruby>するよりスクラッチもできます（とおもっています）し、ちびっ子もきらいじゃないです。

とはいえ、どんくらいスクラッチできるんだよ！？と言われたらことばでは<ruby><rb>証明</rb><rp>《</rp><rt>しょうめい</rt><rp>》</rp></ruby>のしようがないので、<ruby><rb>以前</rb><rp>《</rp><rt>いぜん</rt><rp>》</rp></ruby>に、大人の<ruby><rb>威厳</rb><rp>《</rp><rt>いげん</rt><rp>》</rp></ruby>を見せるためにつくったフラッピーバードもどきと、それを<ruby><rb>魔改造</rb><rp>《</rp><rt>まかいぞう</rt><rp>》</rp></ruby>したバージョンを<ruby><rb>紹介</rb><rp>《</rp><rt>しょうかい</rt><rp>》</rp></ruby>したいと思います。

## フラッピーバードとは？

フラッピーバードについては、Hour of Code などでも<ruby><rb>紹介</rb><rp>《</rp><rt>しょうかい</rt><rp>》</rp></ruby>されているので、わたしが説明するより、そちらを<ruby><rb>参考</rb><rp>《</rp><rt>さんこう</rt><rp>》</rp></ruby>にしてもらったほうがいいですよね。Hour of Code では、全10ステージをクリアすると、<ruby><rb>自分好み</rb><rp>《</rp><rt>じぶんごのみ</rt><rp>》</rp></ruby>のフラッピーバードがつくれてしまいます。（対象年齢は4歳以上となっていますが、漢字が多いので未就学児には少し難しいかもしれません。）

### Hour of Code

もし、フラッピーバードがどんなものかよくわからないのであれば、スクラッチを使ってフラッピーバードをつくるまえに、一度 Hour of Code で Flappy Code（フラッピーゲーム）をつくってみることをおすすめします。

Flappy code : [https://code.org/flappy](https://code.org/flappy "Flappy code")
![image](https://qiita-image-store.s3.amazonaws.com/0/47058/3b808404-d10e-1839-184e-b9ce5ff0ba15.png)

<ruby><rb>完成</rb><rp>《</rp><rt>かんせい</rt><rp>》</rp></ruby>すると、URLでシェアすることができます。

Flappy ゲーム : [https://studio.code.org/c/139076578](https://studio.code.org/c/139076578 "Flappyゲーム")
![image](https://qiita-image-store.s3.amazonaws.com/0/47058/d2dec1c1-c172-c3cf-8ee0-714fcd688cc2.png)

## Scratch 2.0

さて、フラッピーバードがどんなものかわかったところで、スクラッチでつくってみましょう。今回のスクラッチの<ruby><rb>開発環境</rb><rp>《</rp><rt>かいはつかんきょう</rt><rp>》</rp></ruby>は、Web版の Scratch 2.0 です。Webページを開いたら、「Scratchに参加しよう」でアカウントを作成し、サインインします。

Scratch : [https://scratch.mit.edu/](https://scratch.mit.edu/ "Scratch")
![image](https://qiita-image-store.s3.amazonaws.com/0/47058/6b5a0789-1ddb-0c82-ddb7-9f50552aa69b.png)

## フラッピーバードをつくる

スクラッチでの<ruby><rb>開発方法</rb><rp>《</rp><rt>かいはつほうほう</rt><rp>》</rp></ruby>や、フラッピーバードのつくりかたは、ここではくわしく<ruby><rb>説明</rb><rp>《</rp><rt>せつめい</rt><rp>》</rp></ruby>しませんが、「中を見る」でスクリプトの<ruby><rb>中身</rb><rp>《</rp><rt>なかみ</rt><rp>》</rp></ruby>をみると、けっこう<ruby><rb>簡単</rb><rp>《</rp><rt>かんたん</rt><rp>》</rp></ruby>につくれることがわかると思います。

Flappy Bat : [https://scratch.mit.edu/projects/25083768/](https://scratch.mit.edu/projects/25083768/ "Flappy Bat")
![image](https://qiita-image-store.s3.amazonaws.com/0/47058/8fa1ee9c-c003-027f-b1bc-3c61ea6326a3.png)

### フラッピーバードをつくる手順

<ruby><rb>開発手順</rb><rp>《</rp><rt>かいはつてじゅん</rt><rp>》</rp></ruby>だけ、まとめておきますね。<ruby><rb>流</rb><rp>《</rp><rt>なが</rt><rp>》</rp></ruby>れ<ruby><rb>自体</rb><rp>《</rp><rt>じたい</rt><rp>》</rp></ruby>は、Flappy Code と<ruby><rb>大差</rb><rp>《</rp><rt>たいさ</rt><rp>》</rp></ruby>ありません。

1. キャラクターをつくる
2. キャラクターに<ruby><rb>加速度</rb><rp>《</rp><rt>かそくど</rt><rp>》</rp></ruby>をつける
3. <ruby><rb>地面</rb><rp>《</rp><rt>じめん</rt><rp>》</rp></ruby>にぶつかるとゲームオーバー
4. クリックイベントでパタパタする
5. <ruby><rb>障害物</rb><rp>《</rp><rt>しょうがいぶつ</rt><rp>》</rp></ruby>をつくる
6. <ruby><rb>障害物</rb><rp>《</rp><rt>しょうがいぶつ</rt><rp>》</rp></ruby>をクローンする
7. <ruby><rb>障害物</rb><rp>《</rp><rt>しょうがいぶつ</rt><rp>》</rp></ruby>を<ruby><rb>移動</rb><rp>《</rp><rt>いどう</rt><rp>》</rp></ruby>させる
8. <ruby><rb>障害物</rb><rp>《</rp><rt>しょうがいぶつ</rt><rp>》</rp></ruby>にぶつかるとゲームオーバー

### Flappy Bat

キャラクターを『とり』じゃなくて『こうもり』にしたので、Flappy Bat という名前にしました。<ruby><rb>完成</rb><rp>《</rp><rt>かんせい</rt><rp>》</rp></ruby>するとこんなかんじになります。ぜひ<ruby><rb>挑戦</rb><rp>《</rp><rt>ちょうせん</rt><rp>》</rp></ruby>してください！100点までいくにはそうとう<ruby><rb>練習</rb><rp>《</rp><rt>れんしゅう</rt><rp>》</rp></ruby>が<ruby><rb>必要</rb><rp>《</rp><rt>ひつよう</rt><rp>》</rp></ruby>ですよ。

Flappy Bat : [https://scratch.mit.edu/projects/25083768/#fullscreen](https://scratch.mit.edu/projects/25083768/#fullscreen "Flappy Bat")
![image](https://qiita-image-store.s3.amazonaws.com/0/47058/b8feadf0-37ce-e5a7-5c97-aa6dc09f3051.png)

## <ruby><rb>自動操縦</rb><rp>《</rp><rt>じどうそうじゅう</rt><rp>》</rp></ruby>とは？

さて、<ruby><rb>本家</rb><rp>《</rp><rt>ほんけ</rt><rp>》</rp></ruby>フラッピーバードは、その<ruby><rb>難易度</rb><rp>《</rp><rt>なんいど</rt><rp>》</rp></ruby>の高さで<ruby><rb>有名</rb><rp>《</rp><rt>ゆうめい</rt><rp>》</rp></ruby>になりましたが、つくってみた Flappy Bat の<ruby><rb>難易度</rb><rp>《</rp><rt>なんいど</rt><rp>》</rp></ruby>も<ruby><rb>相当</rb><rp>《</rp><rt>そうとう</rt><rp>》</rp></ruby>のものです。かなりがんばっても10点とか20点くらいまでしかいかない人も多いと思います。どうにかして<ruby><rb>最高得点</rb><rp>《</rp><rt>さいこうとくてん</rt><rp>》</rp></ruby>を<ruby><rb>更新</rb><rp>《</rp><rt>こうしん</rt><rp>》</rp></ruby>したいので、<ruby><rb>機械学習</rb><rp>《</rp><rt>きかいがくしゅう</rt><rp>》</rp></ruby>とか<ruby><rb>人工知能</rb><rp>《</rp><rt>じんこうちのう</rt><rp>》</rp></ruby>(<ruby><rb>AI</rb><rp>《</rp><rt>えーあい</rt><rp>》</rp></ruby>)をつかって<ruby><rb>自動操縦</rb><rp>《</rp><rt>じどうそうじゅう</rt><rp>》</rp></ruby>できないか？とおもったわけです。

当時つくったプレゼン資料（修正版） : [「auto flight flappy bat」](https://docs.google.com/presentation/d/1IIVRFRBkePHFDXdXgFSFFJ6PGBww4BKoKcNXqwU8Hec/edit?usp=sharing "")
![image](https://qiita-image-store.s3.amazonaws.com/0/47058/a1b9179f-40fe-f11f-4d2a-cd528a65d316.png)

<ruby><rb>最近</rb><rp>《</rp><rt>さいきん</rt><rp>》</rp></ruby>は、<ruby><rb>人工知能</rb><rp>《</rp><rt>じんこうちのう</rt><rp>》</rp></ruby>とか、<ruby><rb>機械学習</rb><rp>《</rp><rt>きかいがくしゅう</rt><rp>》</rp></ruby>とか、すごくはやってて、気になっている人もおおいかもしれません。その<ruby><rb>入門編</rb><rp>《</rp><rt>にゅうもんへん</rt><rp>》</rp></ruby>をスクラッチでやろう！というこころみです（でした）。（今回実装したのは、学習機能がないルールベースのオートパイロットです。）

## <ruby><rb>自動操縦</rb><rp>《</rp><rt>じどうそうじゅう</rt><rp>》</rp></ruby>してみる

<ruby><rb>自動操縦</rb><rp>《</rp><rt>じどうそうじゅう</rt><rp>》</rp></ruby>といえば、<ruby><rb>最近</rb><rp>《</rp><rt>さいきん</rt><rp>》</rp></ruby>では、Google社が<ruby><rb>実験</rb><rp>《</rp><rt>じっけん</rt><rp>》</rp></ruby>している<ruby><rb>自動車</rb><rp>《</rp><rt>じどうしゃ</rt><rp>》</rp></ruby>の<ruby><rb>自動運転</rb><rp>《</rp><rt>じどううんてん</rt><rp>》</rp></ruby>なんかが<ruby><rb>有名</rb><rp>《</rp><rt>ゆうめい</rt><rp>》</rp></ruby>ですよね。でも、じつは<ruby><rb>旅客機</rb><rp>《</rp><rt>りょきゃくき</rt><rp>》</rp></ruby>などの<ruby><rb>飛行機</rb><rp>《</rp><rt>ひこうき</rt><rp>》</rp></ruby>では、すでに<ruby><rb>自動操縦</rb><rp>《</rp><rt>じどうそうじゅう</rt><rp>》</rp></ruby>（オートパイロット）は<ruby><rb>一般的</rb><rp>《</rp><rt>いっぱんてき</rt><rp>》</rp></ruby>で、なんらかのしかけで<ruby><rb>自動的</rb><rp>《</rp><rt>じどうてき</rt><rp>》</rp></ruby>に<ruby><rb>操縦</rb><rp>《</rp><rt>そうじゅう</rt><rp>》</rp></ruby>されています。

というわけで、<ruby><rb>最終目標</rb><rp>《</rp><rt>さいしゅうもくひょう</rt><rp>》</rp></ruby>である<ruby><rb>機械学習</rb><rp>《</rp><rt>きかいがくしゅう</rt><rp>》</rp></ruby>による<ruby><rb>自動操縦</rb><rp>《</rp><rt>じどうそうじゅう</rt><rp>》</rp></ruby>はいったんおいといて、まずはルールベースでやってみようというわけです。フラッピーバードの<ruby><rb>操作方法</rb><rp>《</rp><rt>そうさほうほう</rt><rp>》</rp></ruby>はじつは<ruby><rb>簡単</rb><rp>《</rp><rt>かんたん</rt><rp>》</rp></ruby>で、<ruby><rb>障害物</rb><rp>《</rp><rt>しょうがいぶつ</rt><rp>》</rp></ruby>との<ruby><rb>距離</rb><rp>《</rp><rt>きょり</rt><rp>》</rp></ruby>と<ruby><rb>高低差</rb><rp>《</rp><rt>こうていさ</rt><rp>》</rp></ruby>を見ながら、クリックするだけです。<ruby><rb>自動操縦機能</rb><rp>《</rp><rt>じどうそうじゅうきのう</rt><rp>》</rp></ruby>を<ruby><rb>実装</rb><rp>《</rp><rt>じっそう</rt><rp>》</rp></ruby>するための入力を「キャラクターと障害物の距離」と「キャラクターと<ruby><rb>隙間</rb><rp>《</rp><rt>すきま</rt><rp>》</rp></ruby>の高低差」と<ruby><rb>定義</rb><rp>《</rp><rt>ていぎ</rt><rp>》</rp></ruby>し、出力をクリックするタイミングと<ruby><rb>定義</rb><rp>《</rp><rt>ていぎ</rt><rp>》</rp></ruby>します。

* 《入力》
 * キャラクターと<ruby><rb>障害物</rb><rp>《</rp><rt>しょうがいぶつ</rt><rp>》</rp></ruby>の<ruby><rb>距離</rb><rp>《</rp><rt>きょり</rt><rp>》</rp></ruby>
 * キャラクターと<ruby><rb>隙間</rb><rp>《</rp><rt>すきまs</rt><rp>》</rp></ruby>の<ruby><rb>高低差</rb><rp>《</rp><rt>こうていさ</rt><rp>》</rp></ruby>
* 《出力》
 * クリックするタイミング

![image](https://qiita-image-store.s3.amazonaws.com/0/47058/31744f34-3dc3-0c84-cfd7-2e3f35e955b5.png)

<ruby><rb>定義</rb><rp>《</rp><rt>ていぎ</rt><rp>》</rp></ruby>さえできてしまえば、この入力と出力のあるスクリプトをつくればいいわけです。（<ruby><rb>実際</rb><rp>《</rp><rt>じっさい</rt><rp>》</rp></ruby>には、もうちょっと<ruby><rb>複雑</rb><rp>《</rp><rt>ふくざつ</rt><rp>》</rp></ruby>になってしまいますが...）数式であらわすと、入力 $x$ にたいして、出力 $y$ が、式 $y = \phi(x)$ であらわされるシステムがあったとき、この $\phi$ を<ruby><rb>定義</rb><rp>《</rp><rt>ていぎ</rt><rp>》</rp></ruby>することが<ruby><rb>機械学習器</rb><rp>《</rp><rt>きかいがくしゅうき</rt><rp>》</rp></ruby>をつくるということです。<ruby><rb>本格的</rb><rp>《</rp><rt>ほんかくてき</rt><rp>》</rp></ruby>に<ruby><rb>機械学習</rb><rp>《</rp><rt>きかいがくしゅう</rt><rp>》</rp></ruby>をやろうとするなら、この<ruby><rb>枠組</rb><rp>《</rp><rt>わくぐ</rt><rp>》</rp></ruby>みは、たもったほうがよいです。

# Flappy Bat 0.3

そして、<ruby><rb>三日三晩</rb><rp>《</rp><rt>みっかみばん</rt><rp>》</rp></ruby>、<ruby><rb>夜</rb><rp>《</rp><rt>よ</rt><rp>》</rp></ruby>なべをして<ruby><rb>完成</rb><rp>《</rp><rt>かんせい</rt><rp>》</rp></ruby>したのがこちら。ジャジャーン！

Flappy Bat 0.3 : [https://scratch.mit.edu/projects/25295560/](https://scratch.mit.edu/projects/25295560/ "Flappy Bat 0.3")
![image](https://qiita-image-store.s3.amazonaws.com/0/47058/f1ccb751-9058-9130-dfb6-2add4d522ee9.png)

HARDモードと、EASYモードがあります。また、<ruby><rb>画面左上</rb><rp>《</rp><rt>がめんひだりうえ</rt><rp>》</rp></ruby>の[AUTO ON / OFF]を<ruby><rb>切り替える</rb><rp>《</rp><rt>きりかえる</rt><rp>》</rp></ruby>ことで、<ruby><rb>自動操縦</rb><rp>《</rp><rt>じどうそうじゅう</rt><rp>》</rp></ruby>を ON / OFF できます。<ruby><rb>自動操縦</rb><rp>《</rp><rt>じどうそうじゅう</rt><rp>》</rp></ruby>に勝てるかな？


てなかんじで今回はここまでです。もうちょっとまとまった<ruby><rb>時間</rb><rp>《</rp><rt>じかん</rt><rp>》</rp></ruby>と、やる気があれば<ruby><rb>人間</rb><rp>《</rp><rt>にんげん</rt><rp>》</rp></ruby>の<ruby><rb>操作</rb><rp>《</rp><rt>そうさ</rt><rp>》</rp></ruby>をモニタリングして、<ruby><rb>学習</rb><rp>《</rp><rt>がくしゅう</rt><rp>》</rp></ruby>する<ruby><rb>機能</rb><rp>《</rp><rt>きのう</rt><rp>》</rp></ruby>を<ruby><rb>追加</rb><rp>《</rp><rt>ついか</rt><rp>》</rp></ruby>できると思ってますが、それはまた次回のおたのしみということで、それではよいお年を！

# 関連書籍案内

[子どもにプログラミングを学ばせるべき６つの理由](http://amzn.to/1Owrzap "子どもにプログラミングを学ばせるべき６つの理由")
![image](https://qiita-image-store.s3.amazonaws.com/0/47058/2bebad81-4736-16b8-c971-3819cb1d3540.png)
著者： 神谷 加代　著/できるシリーズ編集部　著/竹林 暁　監修

[12歳からはじめるHTML5とCSS3](http://amzn.to/1Owru6q "12歳からはじめるHTML5とCSS3")
![image](https://qiita-image-store.s3.amazonaws.com/0/47058/d2704c82-bec8-d3ef-afc8-213aebc0ecdd.png)
TENTO (著)

# 略歴

TENTOスタッフ : [http://www.tento-net.com/staffs](http://www.tento-net.com/staffs "TENTOスタッフ")

![picture](http://www.tento-net.com/wp-content/uploads/2013/09/tanioka-150x150.jpg)
谷岡広樹（たにおかひろき）
千葉大学工学部卒。大学卒業後、プログラマーとして自然言語処理や、
情報検索のシステム開発に携わる。TENTOの設立者である草野、竹林
両氏の志に共感し、2013年3月よりTENTOをお手伝い中。