H5 実装例 · Star Sprint
体力 3 で開始し、2 体の巡回ロボットを避けながら 45 秒以内に星を 5 個集めます。WASD / 矢印で移動、P でポーズ、R でリプレイ。モバイル表示には方向ボタンがあります。ソースには HTML/JS 版と Vite 版が入っています。
ダウンロードして起動
新しい native-h5 フォルダーに展開し、直下に package.json がある状態で移動します。次のどちらかを選びます。
python3 -m http.server 8000 --bind 127.0.0.1 --directory plain/distnpm ci
npm run dev直接実行版は http://127.0.0.1:8000/、Vite は http://127.0.0.1:5173/。記録上の場所はデスクトップの Move to Combos/native-h5 ですが、自分のパスを使ってください。
ローカルの Star Sprint：開始、移動、星の収集、得点を確認。
検証・ビルド・公開
星を取って得点が増え、5 個で勝利することを確認します。接触ダメージ、時間切れ、ポーズ、リプレイも確認。Vite は dev を止めて以下を実行します。
npm run build
npm run preview完成品は http://127.0.0.1:4173/、直接実行版は plain/dist です。公開手順に従い、自分の combos.json を保持します。
記録された Vite 版は pc,mobile、revision 1。Star Sprint をプレイ 、Canvas コード 07752。ローカルと公開版でキーボードによる完全クリアを確認。モバイル操作はビューポートのみで、実機は未検証です。
Combos 公開ページで最初の星を集める Star Sprint。
ソースとダウンロード
index.html / src/style.css は Canvas、HUD、ボタン、配置、タッチ操作を担当。src/main.js は入力、移動、収集、衝突、時間、勝敗、描画を処理します。package.json / vite.config.js はビルドと相対 URL、plain/dist は同じ内容のビルド不要版です。
以下は得点処理の説明で、Combos 接続に必須のコードではありません。
if (!star.collected && Math.hypot(
star.x - state.player.x, star.y - state.player.y
) < 35) {
star.collected = true;
state.score++;
}
if (state.health <= 0 || state.elapsed >= 45) show('lost');
else if (state.score === 5) show('won');完成品 ZIP はどちらも展開先の直下に index.html があります。
出典：Combos 開発者向け導入ガイド 。原文の確認日：2026-10-08、CLI v1.14.2。検証結果は原文に記録された実行時のものです。