Google重力Mr. Doobの真相！画面崩壊の仕組みと現在の遊び方を徹底解明

Google重力Mr. Doobの真相！画面崩壊の仕組みと現在の遊び方を徹底解明に関する深掘り記事をまとめてご紹介します。最新情報を求める方は必見です。

一般的なWebページは、CSSやHTMLによって整然と配置されたレイアウトが固定されているのが常識です。では、グーグルグラビティの仕組みは一体どのようにしてその常識を打ち破っているのでしょうか。その核心には、ゲーム開発などで広く採用されていた物理演算エンジン「Box2D」の存在があります。

Box2Dは、2次元空間における剛体の衝突判定、摩擦、反発係数、重力加速度を厳密に計算するC++製の物理エンジンです。Cabello氏はこれをJavaScriptへ移植した「Box2D-JS」を採用しました。ページが読み込まれた瞬間、スクリプトはGoogleトップページの各DOM要素（ロゴ画像、入力フォーム、検索ボタン、フッターのリンク群など）の座標とサイズを瞬時に取得します。そして、それぞれの要素を1つの「矩形剛体（物理的な箱）」として物理シミュレーション空間にマッピングするのです。

ブラウザの再描画ループ（アニメーションフレーム）ごとに、物理エンジンが計算した座標と回転角度が各HTML要素のCSSプロパティ（transformやtop/left）へ瞬時に反映されます。これにより、要素同士がぶつかり合い、斜めに積み重なり、リアルな重力落下が発生する仕組みを構築しています。

さらに多くのユーザーが驚嘆したのが、「崩れた後も実際に検索できるか」という点です。地面に横倒しになった検索バーをクリックしてキーワードを入力しEnterキーを押すと、なんと崩壊した状態を維持したまま検索結果が上空からドサドサと大量のブロックのように落下してきます。これはGoogle Custom Search APIと連携し、返ってきた検索結果のDOM要素を動的に物理空間へ追加投入するという、極めて高度かつ遊び心に満ちた設計が施されているためです。