| <!doctype html> |
| <html lang="zh-Hant"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> |
| <meta name="theme-color" content="#101722"> |
| <title>Ikemen-GO HTML/JS 移植｜Kung Fu Man</title> |
| <style> |
| :root{color-scheme:dark;--bg:#101722;--panel:#182330;--line:#344556;--gold:#ffd36a;--ink:#e9f1f6;--muted:#a8bac8} |
| *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:14px system-ui,"Noto Sans TC",sans-serif;touch-action:none} |
| #root{height:100dvh;display:grid;grid-template-rows:auto 1fr auto}.head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#0a1018;border-bottom:1px solid #334352} |
| .brand{font-weight:800;letter-spacing:.08em}.brand small{display:block;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0} |
| button{background:#233342;color:var(--ink);border:1px solid #526777;border-radius:7px;padding:8px 13px;font:inherit;cursor:pointer}button:hover{background:#30475b}.actions{display:flex;gap:7px} |
| #frame{position:relative;min-height:0;background:#111a24}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}#status{position:absolute;left:12px;bottom:12px;padding:8px 10px;border:1px solid #526777;border-radius:7px;background:#0b111bd9;color:#dfeaf2;font:12px ui-monospace,monospace;max-width:min(500px,90vw)} |
| .foot{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;background:#0a1018;color:var(--muted);font-size:11px}.foot a{color:#9dccff} |
| #intro{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse,#1a2938eF,#070b10f5);z-index:2}.card{max-width:600px;margin:18px;padding:28px;background:#182330;border:1px solid #455969;border-radius:13px;box-shadow:0 18px 70px #0009}.card h1{margin:0 0 8px;font-size:clamp(22px,5vw,34px);color:var(--gold)}.card p{line-height:1.65;color:#cad7e0}.card .primary{width:100%;margin:8px 0;background:#a84b28;border-color:#ea9664;font-weight:800;font-size:18px}.badges{display:flex;gap:7px;flex-wrap:wrap}.badges span{padding:4px 8px;background:#253747;border-radius:20px;color:#cde4f2;font-size:11px} |
| #intro[hidden]{display:none} |
| @media(max-width:640px){.head{padding:8px}.foot{font-size:10px}.actions button{padding:7px 9px}} |
| </style> |
| </head> |
| <body> |
| <div id="root"> |
| <header class="head"><div class="brand">IKEMEN-GO <small>HTML / JavaScript 移植 · native KFM assets</small></div><div class="actions"><button id="pause" aria-label="Pause">Ⅱ</button><button id="debug">碰撞框</button><button id="restart">重開</button></div></header> |
| <main id="frame"><canvas id="game" aria-label="Kung Fu Man fighting game"></canvas><div id="status">正在讀取 Kung Fu Man 原始角色資料…</div> |
| <section id="intro"><div class="card"><h1>Ikemen-GO Browser Port</h1><div class="badges"><span>Elecbyte KFM</span><span>原始 SFF v2</span><span>AIR 動畫</span><span>CNS/HitDef</span><span>CPU vs CPU</span></div><p>本展示直接載入上游 Screenpack 隨附的 Kung Fu Man `.sff` 精靈、`.air` 動作與 `.cns/.cmd` 角色定義，依 Ikemen/M.U.G.E.N 的座標、動作編號、命中框和攻擊資料執行瀏覽器版戰鬥核心。</p><p><b>觀戰模式：</b>雙方 CPU 自動走位、跳躍、格擋與使用 KFM 招式。點「暫停」停止或繼續對戰；點「重開」重置並重新觀戰。</p><button class="primary" id="start">開始 CPU 對戰</button><small style="color:#91a5b5">移植狀態：可玩角色核心切片；不是原生 Go/SDL 程式，也未宣稱支援全部 ZSS/Lua、網路回滾或所有控制器。</small></div></section> |
| </main> |
| <footer class="foot"><span>引擎與官方角色資料：Ikemen-GO / Screenpack · MIT / CC BY-NC KFM</span><span><a href="https://github.com/ikemen-engine/Ikemen-GO" target="_blank" rel="noreferrer">原始碼</a> · <a href="https://github.com/ikemen-engine/Ikemen-GO-Screenpack/tree/master/chars/kfm" target="_blank" rel="noreferrer">KFM 資料</a></span></footer> |
| </div> |
| <script type="module" src="./js/port.js"></script> |
| </body> |
| </html> |
|
|
