HTML の DOM ベースのゲームエンジン「Domini(仮)」を開発中。
ゲーム上の自機や弾はブラウザのデベロッパツールで見ていただけると DOM だとわかります。

#なぜ DOM ?
Web ベースのゲームエンジンのほとんどは、自由な描画のために Canvas を利用しています。
DOM を利用したゲームエンジンは全然見つかりません。
(唯一 Crafty.js を見つけましたが、Canvas と DOM のハイブリット)

しかし HTML/CSS にも Transform など、ゲームに使える機能が多数あり、
DOM なら Canvas よりブラウザのデベロッパーツールでデバッグできる内容も多数です。

こんなにブラウザが進化して HTML/CSS がどんどん機能追加されるなら
ゲームに利用しない手はないです。

Domini(仮) では HTML のデフォルト機能に、ゲームに必要な要素を最小限だけ追加して
私が挫折しても Google/Mozilla/Apple/Facebook さん達が勝手に進化させてくれるゲームエンジン目指します。

Domini(仮)の機能

デモでは UI は Svelte ですが、
依存性はないので、React や Vue でも使える予定です。

参考ゲームエンジン

エンジン	説明
Unity	ご存じ一番人気。設計ほぼパクッてます。
A-Frame	WebVR 用フレームワーク。HTML で VR を実装できます。「DOM でコンポーネント指向」の設計を参考にしてます

ロックマン的なゲームを作りたいですね。
そのために下記作ります。

エンジン部分だけのリポジトリはのちほど。

接触判定のために getBoundingClientRect を呼びまくって重たくなってます。
どうにか軽く方法無いかなと思ってたら Intersection Observer なんてものが最近はあるとな。
これで軽くできないかなぁ。