数学的美しさを感じる弾幕シューティングゲーム。 「crisp-game-lib」の作者、ABAさんによる、弾幕を記述するXML「BulletML」と弾幕オープンデータ「弾幕やさん」を発見。

JavaScript実装である「bulletml.js」をESモジュール化した「bulletml.js-es」を作って、 ABA Gamesさんのオープンソースからシューティングゲームっぽい「smilyangry」を改造してドラッグで動く版「smilyangry-d」を作って、 弾幕やさんのデータ一覧をCSV化して、CORS対応のGitHub Pagesに「danmakuya」として設置して、下ごしらえ完了。

これらを使って作った、弾幕シューティングゲーム風、15秒でたくさんスマイルを集めようゲームがこちら。

smily15s」(src on GitHub)
弾幕データにはうまく動かないものが混ざっているため、ひとまずいくつかピックアップして使用しています。

レトロ調だけど多数のオブジェクトがあっても処理落ちせず滑らか動く様子を伝えるのに動画化は必須ですね。 「gif-capture-canvas」が使われていたところを、似たインターフェイスでmp4で記録できる「mp4-capture-canvas」を作成。

TypeScriptと外部モジュールで開発されているcrisp-game-libを、ESモジュール化するにあたって、外部モジュールのESモジュール化。 元ソースを少し調整し、TypeScriptからJavaScriptへの変換とimportのマッピングの変更を行うスクリプト「makees.sh」を作成。 HTML内にimport文ひとつですっきり記述できるようになりました。
→「crisp-game-lib ES module ver.


新しいサンプル「tilted-easy (forked from tilted)」を合わせてご覧ください。
もっとシンプルなものがよければ「kawakudari」をどうぞ。

開発者のABAさんもMSX出身と判明!
個人サイトをリニューアルして自作ゲーム一覧を作ったら250個くらいあった - ABAの日誌

ESモジュールというシンプルでグローバルな抽象化、便利ですね!
いろいろ作りたい高専生や学生向け、jigインターンもエントリー受付中!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS