208 lines
9.6 KiB
HTML
208 lines
9.6 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="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>
|
|
|
|
<!-- ===== 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" id="set-keys-row">
|
|
<label class="set-lab">键盘按键</label>
|
|
<span class="set-hint">点击按键后按下新键即可重绑；同一动作可绑定多个键，点 × 删除</span>
|
|
<div id="set-keys" class="set-keys"></div>
|
|
</div>
|
|
<div class="set-row col" id="set-touch-row">
|
|
<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>
|