ビルドなしで debuff を使う

ランタイムのパッケージは依存関係のない素の ES モジュールなので、どんなページでもインポートマップを使って CDN から直接読み込めます。プロトタイプ、CodePen 風のスケッチ、授業、ごく小さなゲームジャム作品にぴったりです。

本番のプロジェクトでは、バージョンを正確に固定してください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="importmap">
      {
        "imports": {
          "@debuffjp/core": "https://cdn.jsdelivr.net/npm/@debuffjp/core@0.1/dist/index.js",
          "@debuffjp/input": "https://cdn.jsdelivr.net/npm/@debuffjp/input@0.1/dist/index.js",
          "@debuffjp/juice": "https://cdn.jsdelivr.net/npm/@debuffjp/juice@0.1/dist/index.js"
        }
      }
    </script>
    <style>
      html, body { margin: 0; height: 100%; background: #111; }
      main { position: fixed; inset: 0; display: grid; place-items: center; }
    </style>
  </head>
  <body>
    <main><canvas id="game"></canvas></main>
    <script type="module">
      import { Game } from "@debuffjp/core";
      import { Input } from "@debuffjp/input";

      const game = new Game({ canvas: document.querySelector("#game"), width: 320, height: 180 });
      const input = new Input(game, { bindings: { left: ["ArrowLeft"], right: ["ArrowRight"] } });
      let x = 160;

      game
        .add({
          id: "play",
          update(dt) {
            x += input.axis("left", "right") * 120 * dt;
          },
          render(draw) {
            draw.rect(x - 8, 120, 16, 16, "#cffb2d");
          },
        })
        .go("play");
      game.start();
    </script>
  </body>
</html>

あきらめるもの

CLI あり	ビルドなし
ツリーシェイキング：import したものだけを出荷	パッケージのモジュールを丸ごとダウンロード
アセットパイプラインとマニフェスト	アセットは自分で読み込むか、@debuffjp/assets 用のマニフェストを手書き
サイズレポートと dev 境界のチェック	なし
debuff scenario のテストと dev フック	使えません
TypeScript	素の JavaScript（JSDoc を使えばエディタで型の恩恵は受けられます）

プロトタイプが 1 ファイルに収まらなくなったら、npm create debuff で同じ API のままフルのツールチェーンに移れます。