JavaScript でフラッピーバードを作る

本記事ではプログラミング言語の JavaScript を使ったフラッピーバードゲームもどきの作り方をご紹介致します。

↓YouTube に動画もあるので興味がある方はご覧ください。

【ダイジェスト】JavaScriptでフラッピーバードを作る / 早送り

まずこちらが完成品です。

キーボードの「↑」を押すと、青い丸（鳥）がジャンプをします。

鳥とパイプが当たった時にはパイプの色が緑から赤に変わります。

HTML ファイルの作成

まず、下記のような html ファイルを作成します。

次に JavaScript ファイルの作成をします。

“index.js” と鳥についてのファイルの “bird.js” 、“input.js” というキーボードインプットについてのファイル、そしてパイプについて書いた “pipe.js” というファイルを作ります。

“bird.js” の constructor() の中に、鳥位置や大きさなどの情報をかきます。 update() 関数には情報の更新について、draw() 関数で描画を行っています。

“input.js” ではキーボードの「↑」が押された時に up() という関数が呼び出されるように書いています。

“pipe.js” のコンストラクタには上下のパイプの長さや位置についての情報を書き、offScreen() という関数でパイプが画面外に行ったかどうかのチェックをしています。

checkHit() という関数で鳥とパイプの当たり判定についての処理をしています。

以上がフラッピーバードについてのコードです。