てっく煮ブログ

ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード）

as, box2d

ワリオランドシェイクと YouTube のコラボプロモーション が面白かったので、似たようなものを作ってみました。

次の文字列をコピーしてアドレスバーに突っ込むと、HTML が崩壊します。

javascript:(function(){var d=document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://tech.nitoyon.com/meltdown/meltdown.js?"+(new Date()).getTime(); d.body.appendChild(s)})();

崩壊するのは画像だけなので、画像があるページで試してみてください。このブログだとこんな具合。

画像はドラッグすることも可能です。あまり画像が多いと重くなりすぎるのでご注意を。

仕組み

Flash と JavaScript の連携で作り込んでます。

1. HTML を覆い隠すように Flash を 配置する。
2. JavaScript で HTML にある画像を列挙して、Flash に渡す。
3. Flash では、物理エンジン（Box2dFlashAS3）上に画像の位置に対応した箱を作成する。
4. HTML 内の全ての画像を消して、Box2dFlashAS3 による物理シミュレーションを開始する。

ちなみに、ワリオランドシェイクでも、同じように Flash と Box2dFlashAS3 を利用している模様です。

ソースコード

• JavaScript: meltdown.js
• ActionScript: Meltdown.as

関連

• YouTube - experiencewii さんのチャンネル
• HTML崩壊 meltdown.js - KAZUMiX memo

（追記）nitoyon.com サーバが不安定なので、スクリプト類を Google Pages に移設しました。

Permalink | コメント(15) | トラックバック(29)