シンプルだが中毒性が高いHTML5で構築されたバブルゲーム

By @Doug88888

ブラウザからサイトにアクセスすればすぐに遊べる、HTML5で構築されたバブルゲームをフランツ・アイゼンホーフェルさんが公開しています。ゲームのルールは、自分のバブルを操作し、自分よりも小さな泡を吸収して大きくなっていくというシンプルなものですが、単純であるがゆえになかなか中毒性が高いゲームに仕上がっています。

bubbles games by franz enzenhofer
http://www.fullstackoptimization.com/bubbles/

バブルゲームのプレイ動画は以下のムービーから確認できます。

HTML5で作成したバブルゲームをプレイしてみた - YouTube

ゲームのサイトにアクセスすれば、すぐにゲームがスタートします。操作方法はキーボードの「↑」「→」「↓」「←」で赤いバブルを動かすだけ。

ルールはシンプルでプレイヤーは赤いバブルを操作して、画面の周囲から迫ってくるバブルの中から自分より小さなバブルを吸収して大きくなるだけです。自分よりも大きなバブルに当たってしまうと、大きいバブルに接触している間にどんどん吸収されて、小さくなってしまいます。

このように、自分より大きなバブルに当たると……

接触している間に吸収されて、どんどん小さくなります。

見えないくらい小さくなってしまうとゲームオーバーです。

ちなみに、「スペース」を押せば、自分が小さくなる代わりに小さい泡を発射して攻撃することもできます。

発射した小さい泡が他のバブルに当たると……

小さい泡が当たったバブルは爆発して消滅してしまいます。

自分より小さなバブルは、外周が青色になっていて、すぐに大きさを判別できます。

ちなみに、自分より大きなバブルは黒色で表示されています。

それでは早速ゲームスタート。

自分より大きなバブルを避けながら、自分より小さいバブルをどんどん吸収していきます。まずは近くにいたオレンジ色のバブルを吸収。

オレンジ色のバブルを吸収して少し大きくなりました。

次に上から現れた紫色のバブルに狙いをつけて……

一気に吸収。

このようにして、どんどん吸収し大きくなります。ゲームの時間は無制限ですが、時間が経過するごとに他のバブルも吸収しあってどんどん大きくなるので注意します。

自分のバブルより大きいか大きくないかを、外周の色で見分ければ迷うこと無くゲームを進めていけます。

青いバブル2個に照準をつけてさらに吸収。

ここで自分のバブルより少し小さいだけのベージュのバブルが、右下からこちらにやってきました。

このチャンスを逃すわけにはいきません。

と、左下からやってきた紫色のバブルも同時に吸収。

画面右上で大小さまざまのバブルを吸収しまくり。

ここまで大きくなったらゲームクリアはもう少し。

操作しなくても他のバブルが自分から接触してくれるので、止まることなく大きくなっていきます。

画面右から出てきた大きな緑のバブルを吸収。

緑のバブルは大きいため吸収にも少し時間がかかります。

自分の赤いバブルが画面の半分くらいに到達すると……

ゲームクリア。ゲームが終了すると最初の画面に戻り、自動的に次のゲームが開始されます。

2008年に草案が発表されたHTML5で構築されたゲームは他にも無料MMORPG「BrowserQuest」などもあり、Adobe FlashからHTML5への転換が進んでいます。アップルの故スティーブ・ジョブズ氏もFlashよりHTML5を支持し、iPhoneやiPadでFlash非対応の姿勢を崩さなかったこともあり、スマートフォンの分野においてもHTML5への移行が進んでいるとのことです。