1万6000個のチェックボックス要素で作られたDoom

Tue, 19 Oct 2021 00:00:00 +0000

HTMLのチェックボックス「だけ」をひたすら活用できるライブラリ Checkboxland を先週紹介しましたが、さっそくすごい応用サービスが登場しました。

Doom といえば、非力なレトロPC や関数電卓から、ATM やデジカメ、プリンターの液晶などCPUのあるところならどこでも移植されてきたゲームですが、今回は Checkboxland を使って、すべてチェックボックスで作られた Doom が遊べるようになっています。

ページ上部にあるように、カーソルキーの移動と Ctrlキーの射撃で遊べるのですが、青白の二色で解像度も160x100と低いため、敵が出てくるなど込み入った表示になると正直何が起こってるのか判別は難しくなります。Doom ファンならこれでもわかるのかもしれませんが。

左上には元の Doom 画面も表示されているので、どうにもならないときはそちらを見るしかないでしょう。

ブラウザ上で動く Doom は「WebAssembly で FizzBuzz から Doom までを作る」プロジェクトで作られているものを呼び出し、これが非表示の canvas 要素に描いたゲーム画面を MediaStream 経由でCheckboxland の動画描画機能に渡しています。

via DOOM Rendered via Checkboxes via reddit

Checkboxland - HTMLのチェックボックスですべてを作れるライブラリ

Tue, 12 Oct 2021 00:00:00 +0000

Checkboxland は、HTML のチェックボックス要素を活用してしまくるための JavaScriptライブラリです。

HTML のチェックボックス要素と言えばこれ↓ ですが、

このチェックボックスを使って様々な表現を実行できます。

デモでは、文字が横に流れるマーキー、デジタル時計、アニメーション、QRコード表示、ライフゲーム、動画再生(!)、など様々な表現が、すべてチェックボックスだけで実現されています。

API documentによれば、チェックボックスを縦横に並べたグリッド上でグリッド上の各座標を調べたり書き換えたりする低レイヤAPIと、文字を大きく描く、スクロールさせる、画像や動画を描写させるなどの拡張APIが用意されています。プラグイン機構も用意されているので、自分で Checkboxland に新たな機能を追加することも可能です。

It's Friday night so of course I'm eating cookie dough and making a QR code out of html checkboxes that always tells you the current time.https://t.co/ZNjG0SWAce pic.twitter.com/Fywf7FZFpu
— Bryan Braun (@BryanEBraun) May 23, 2020

多数の要素を表示しようとするとページが重くなるのはチェックボックスであっても(当然)同じで、チェックボックスの数が1500個を超えるとチェックボックスの更新速度が問題となることから、32x32 や 64x16 といったサイズ以下のグリッドを推奨するそうです。

I made a webcam filter out of html checkboxes.

Try it out here: https://t.co/1lBHfEgmhw pic.twitter.com/tZrFOg3PWl

Checkbox on akky@サイボウズラボ・ブログ

1万6000個のチェックボックス要素で作られたDoom

Checkboxland - HTMLのチェックボックスですべてを作れるライブラリ