[HTML5でゲームづくり]フラッピーバード01(設計)

タップして上下から伸びる管の間を通り抜けるゲームですが、今回はどんなデバイスでもと遊べるように、HTML5で作りたいと思います。

HTMLを使ってゲームを作るときは、imgタグを動かすことでゲームを作っていく方法や、canvasを使って作っていく方法などがありますが、今回はcanvasを使う方法で作りたいと思います。

設計は上の図のようにし、Canvasが押された時に速度をプラスします。各配列が管の長さ情報を表し、時間の経過とともに各配列と対応する管が黄緑の向きに移動するようにします。また、赤い丸は鳥にあたる部分ですが、それの上下方向の速度と座標情報を付けておきます。

次(制作)>>