177 lines
7.7 KiB
HTML
177 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>I WANNA BE THE CREATOR — Fan Project</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="stage">
|
||
<canvas id="game" width="800" height="608"></canvas>
|
||
|
||
<!-- ===== HUD ===== -->
|
||
<div id="hud" class="hidden">
|
||
<div class="hud-row">
|
||
<div class="hud-box" id="hud-level">—</div>
|
||
<div class="hud-box" id="hud-deaths">DEATH 0</div>
|
||
<div class="hud-box" id="hud-time">0:00.00</div>
|
||
<div class="hud-box" id="hud-apples" style="display:none">🍎 0/0</div>
|
||
<div class="hud-box" id="hud-save" style="display:none">SAVE 0/0</div>
|
||
</div>
|
||
<div id="boss-bar" class="hidden">
|
||
<div class="boss-name" id="boss-name">BOSS</div>
|
||
<div class="boss-track"><div class="boss-fill" id="boss-fill"></div></div>
|
||
</div>
|
||
<div id="toast"></div>
|
||
</div>
|
||
|
||
<!-- ===== MAIN MENU ===== -->
|
||
<div class="screen" id="scr-title">
|
||
<div class="title-wrap">
|
||
<div class="title-sub">FAN-MADE TRIBUTE PROJECT</div>
|
||
<h1 class="title-main">I WANNA BE<br>THE <span class="red">CREATOR</span></h1>
|
||
<div class="title-tag">跳刺 · 耐久 · BOSS · 坑向 — 23 个内置关卡</div>
|
||
</div>
|
||
<div class="menu">
|
||
<button class="btn big" data-act="levels">关卡选择</button>
|
||
<button class="btn" data-act="editor">自制关卡</button>
|
||
<button class="btn" data-act="help">操作说明</button>
|
||
<button class="btn small" data-act="wipe">清除存档</button>
|
||
</div>
|
||
<div class="foot">非商业同人作品 · 致敬 I Wanna Be The Guy / I Wanna Be The Creator · 素材与代码原创</div>
|
||
</div>
|
||
|
||
<!-- ===== LEVEL SELECT ===== -->
|
||
<div class="screen hidden" id="scr-levels">
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<h2>关卡选择</h2>
|
||
<button class="btn tiny" data-act="back">返回</button>
|
||
</div>
|
||
<div class="tabs" id="level-tabs"></div>
|
||
<div class="level-grid" id="level-grid"></div>
|
||
<div class="legend">
|
||
<span class="tag t-jump">跳刺</span>
|
||
<span class="tag t-endur">耐久</span>
|
||
<span class="tag t-boss">BOSS</span>
|
||
<span class="tag t-troll">坑向</span>
|
||
<span class="tag t-custom">自制</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== HELP ===== -->
|
||
<div class="screen hidden" id="scr-help">
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<h2>操作说明</h2>
|
||
<button class="btn tiny" data-act="back">返回</button>
|
||
</div>
|
||
<div class="help-body">
|
||
<div class="help-col">
|
||
<h3>按键</h3>
|
||
<ul>
|
||
<li><b>← →</b> / <b>A D</b> — 移动（IWBT 手感：松手即停，无惯性）</li>
|
||
<li><b>Shift</b> / <b>空格</b> / <b>Z</b> — 跳跃（空中再按一次＝二段跳）</li>
|
||
<li><b>X</b> / <b>J</b> — 射击（需先拾取手枪）</li>
|
||
<li><b>R</b> — 自杀，回到<b>最近的存档点</b>（死亡数 +1）</li>
|
||
<li><b>Backspace</b> — 整关从头再来（会清空存档点进度）</li>
|
||
<li><b>Esc</b> — 暂停 <b>↑ ↓</b> — 水中上浮 / 下潜</li>
|
||
</ul>
|
||
</div>
|
||
<div class="help-col">
|
||
<h3>规则与道具</h3>
|
||
<ul>
|
||
<li><b>刺</b>（灰白三角）碰到即死，回最近存档点</li>
|
||
<li><b>存档点</b>（紫色果实）触碰后在此复活</li>
|
||
<li><b>手枪</b>（灰色枪）拾取后获得射击能力，子弹可击杀敌人与 BOSS</li>
|
||
<li><b>摄像头</b>（黑色镜头）进入区域会锁定 / 缩放视角——坑向关卡的元凶</li>
|
||
<li><b>美味水果</b>（红苹果）看着像补给，其实是即死陷阱</li>
|
||
<li><b>传送门</b>（紫色漩涡）成对传送，坑向关卡会把你送回起点</li>
|
||
<li><b>跳跃刷新器</b>（绿色箭头）空中触碰可重置二段跳</li>
|
||
<li><b>消失方块</b>踩上后会塌，<b>冰面</b>会打滑，<b>水</b>中可游泳</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="help-tip">提示：死亡是这个游戏的一部分。别放弃，IWBT 玩家的平均死亡数是三位数。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== PAUSE ===== -->
|
||
<div class="screen hidden" id="scr-pause">
|
||
<div class="panel narrow">
|
||
<div class="panel-head"><h2>暂停</h2></div>
|
||
<div class="menu">
|
||
<button class="btn" data-act="resume">继续</button>
|
||
<button class="btn" data-act="restart">从头再来（清空存档点）</button>
|
||
<button class="btn" data-act="quit">返回关卡选择</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== RESULT ===== -->
|
||
<div class="screen hidden" id="scr-result">
|
||
<div class="panel narrow">
|
||
<h2 class="clear-title">CLEAR!</h2>
|
||
<div class="result-body">
|
||
<div class="rline"><span>关卡</span><b id="r-name">—</b></div>
|
||
<div class="rline"><span>用时</span><b id="r-time">—</b></div>
|
||
<div class="rline"><span>死亡</span><b id="r-death">—</b></div>
|
||
<div class="rline"><span>苹果</span><b id="r-apple">—</b></div>
|
||
<div class="rbest" id="r-best"></div>
|
||
</div>
|
||
<div class="menu">
|
||
<button class="btn" data-act="next">下一关</button>
|
||
<button class="btn" data-act="retry">再挑战</button>
|
||
<button class="btn" data-act="quit">关卡选择</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== EDITOR ===== -->
|
||
<div class="screen hidden" id="scr-editor">
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<h2>自制关卡</h2>
|
||
<button class="btn tiny" data-act="back">返回</button>
|
||
</div>
|
||
<div class="editor-wrap">
|
||
<div class="palette" id="palette"></div>
|
||
<div class="editor-main">
|
||
<div class="editor-bar">
|
||
<input id="ed-name" placeholder="关卡名" value="MY STAGE">
|
||
<select id="ed-type">
|
||
<option value="jump">跳刺</option>
|
||
<option value="endur">耐久</option>
|
||
<option value="boss">BOSS</option>
|
||
<option value="troll">坑向</option>
|
||
</select>
|
||
<input id="ed-w" type="number" value="25" min="12" max="120" title="宽度(格)">
|
||
<button class="btn tiny" data-act="ed-resize">调整</button>
|
||
<button class="btn tiny" data-act="ed-fill">铺底</button>
|
||
<button class="btn tiny" data-act="ed-clear">清空</button>
|
||
<button class="btn tiny" data-act="ed-test">试玩</button>
|
||
<button class="btn tiny go" data-act="ed-save">保存</button>
|
||
</div>
|
||
<canvas id="ed-canvas" width="800" height="608"></canvas>
|
||
<div class="editor-tip">左键放置 / 右键擦除，滚轮平移。至少要有一个 <b>S</b>(出生点) 和一个 <b>X</b>(终点)。</div>
|
||
</div>
|
||
<div class="editor-side">
|
||
<h3>我的关卡</h3>
|
||
<div id="my-levels"></div>
|
||
<h3 style="margin-top:14px">导入 / 导出</h3>
|
||
<textarea id="ed-json" placeholder="粘贴关卡 JSON 后点导入"></textarea>
|
||
<button class="btn tiny" data-act="ed-import">导入</button>
|
||
<button class="btn tiny" data-act="ed-export">导出选中</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|