242 lines
12 KiB
HTML
242 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<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" data-act="settings">设置</button>
|
||
</div>
|
||
<div id="title-user" class="title-user"></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>
|
||
<div class="head-btns">
|
||
<button class="btn tiny hidden" id="manage-btn" data-act="manage">管理地图</button>
|
||
<button class="btn tiny" data-act="back">返回</button>
|
||
</div>
|
||
</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>
|
||
<li><b>触屏</b> — 移动端自动显示：左下 <b>◀ ▶</b> 移动，右下 <b>跳</b> 与 🔫/▼ 道具键（桌面可加 <b>?touch=1</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>
|
||
|
||
<!-- ===== SETTINGS ===== -->
|
||
<div class="screen hidden" id="scr-settings">
|
||
<div class="panel">
|
||
<div class="panel-head">
|
||
<h2>设置</h2>
|
||
<button class="btn tiny" data-act="back">返回</button>
|
||
</div>
|
||
<div class="set-body">
|
||
<div class="set-row">
|
||
<label class="set-lab" for="set-username">用户名</label>
|
||
<input id="set-username" class="set-in" maxlength="16" placeholder="无名氏">
|
||
<span class="set-hint">显示在标题界面</span>
|
||
</div>
|
||
<div class="set-row col">
|
||
<label class="set-lab">手机操作按钮</label>
|
||
<span class="set-hint">拖动按钮调整位置，拖动右下角圆点调整大小（仅移动端生效）</span>
|
||
<div id="touch-preview" class="touch-preview">
|
||
<div class="tp-tip">拖动按钮移动位置 · 拖动右下角圆点缩放大小</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-btns set-btns">
|
||
<button class="btn tiny" data-act="set-reset">恢复默认</button>
|
||
<button class="btn tiny go" data-act="set-ok">确定</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 MAP">
|
||
<label class="ed-wh">宽<input id="ed-w" type="number" value="25" min="12" max="160"></label>
|
||
<label class="ed-wh">高<input id="ed-h" type="number" value="19" min="8" max="80"></label>
|
||
<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-import">导入地图</button>
|
||
<button class="btn tiny" data-act="ed-test">试玩</button>
|
||
<button class="btn tiny go" data-act="ed-save">保存</button>
|
||
<span id="ed-savestate" class="save-state">→ 新地图</span>
|
||
</div>
|
||
<canvas id="ed-canvas" width="800" height="608"></canvas>
|
||
<div class="editor-tip">左键放置 / 右键擦除，滚轮水平平移。<b>不会覆盖已有方块</b>——放在空格才生效，要换掉先擦除。选「⌖ 查看属性」再点方块可只查看不修改。<b>刺</b>只有一个，放好后在右侧「属性」面板调<b>方向（上/下/左/右）</b>；传送门 <b>W</b>、提示牌 <b>T</b>、炮台 <b>O</b>、摄像头 <b>C</b>、BOSS <b>B</b> 的属性也都在这里设置。每面至少 1 个 <b>S</b>(出生点) 与 1 个 <b>X</b>(终点)。</div>
|
||
</div>
|
||
<div class="editor-side">
|
||
<h3>属性（选中方块）</h3>
|
||
<div id="ed-props"><div class="prop-empty">点击画布上的方块，查看并设置它的属性</div></div>
|
||
<h3>面（多面地图）</h3>
|
||
<div class="face-btns">
|
||
<button class="btn tiny" data-act="ed-addface">+ 新增面</button>
|
||
<button class="btn tiny" data-act="ed-copyface">复制面</button>
|
||
<button class="btn tiny" data-act="ed-delface">删除面</button>
|
||
</div>
|
||
<div id="ed-faces"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 导入地图选择 -->
|
||
<div id="ed-importbox" class="modal hidden">
|
||
<div class="modal-panel">
|
||
<h3>导入地图</h3>
|
||
<p class="modal-tip">从以前保存过的地图里选一个载入编辑器（会替换当前编辑内容）</p>
|
||
<div id="ed-import-list"></div>
|
||
<div class="modal-btns">
|
||
<button class="btn tiny" data-act="ed-import-cancel">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== TOUCH CONTROLS（移动端虚拟手柄，参考 IWBT Creator 触屏布局） ===== -->
|
||
<div id="touch" class="hidden">
|
||
<!-- 左侧：左右移动 -->
|
||
<div class="tc-left">
|
||
<button class="tc-btn tc-move" data-touch="left" aria-label="左移"><span>◀</span></button>
|
||
<button class="tc-btn tc-move" data-touch="right" aria-label="右移"><span>▶</span></button>
|
||
</div>
|
||
<!-- 右侧：跳跃 + 各种道具 -->
|
||
<div class="tc-right">
|
||
<div class="tc-top">
|
||
<button class="tc-btn tc-sm" data-touch="pause" aria-label="暂停">❚❚</button>
|
||
<button class="tc-btn tc-sm" data-touch="suicide" aria-label="重生">↺</button>
|
||
</div>
|
||
<div class="tc-mid">
|
||
<button class="tc-btn tc-item" id="tc-gun" data-touch="shoot" aria-label="射击"><span>🔫</span><span class="lbl">射击</span></button>
|
||
<button class="tc-btn tc-item" data-touch="down" aria-label="下蹲/下穿"><span>▼</span><span class="lbl">下蹲</span></button>
|
||
</div>
|
||
<button class="tc-btn tc-jump" data-touch="jump" aria-label="跳跃"><span>跳</span></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|