64 lines
2.5 KiB
HTML
64 lines
2.5 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#F5EFE7">
|
||
<title>进场调度 · 刻度环试玩</title>
|
||
<link rel="stylesheet" href="./style.css">
|
||
</head>
|
||
<body>
|
||
<main class="inbound">
|
||
<header class="topbar">
|
||
<button class="icon-button" id="levels" aria-label="选择关卡">关</button>
|
||
<div><p class="eyebrow">进场调度 · 试玩</p><h1 id="level-title">第 1 关</h1></div>
|
||
<button class="icon-button" id="help-open" aria-label="怎么读刻度">?</button>
|
||
</header>
|
||
<section class="status" aria-label="进度">
|
||
<div><span>提交</span><strong id="stars">0</strong><small id="standard">/ 1</small></div>
|
||
<div><span>停好</span><strong id="progress">0 / 1</strong></div>
|
||
</section>
|
||
<p class="notice" id="notice" role="status"></p>
|
||
<section class="airspace" id="airspace">
|
||
<canvas id="board" aria-label="固定机场、进场口和刻度环"></canvas>
|
||
</section>
|
||
<div class="controls">
|
||
<button id="left" class="turn">左转一格</button>
|
||
<button id="confirm" class="confirm" disabled>确认这一转</button>
|
||
<button id="right" class="turn">右转一格</button>
|
||
</div>
|
||
<p class="preview-note" id="preview-note">缺口和刻度差几格，转之前就能数。预览不计星。</p>
|
||
<footer>
|
||
<button id="undo">撤销</button>
|
||
<button id="relocate" hidden>调边</button>
|
||
<button id="restart">重来</button>
|
||
</footer>
|
||
</main>
|
||
<dialog id="menu">
|
||
<button class="close" data-close aria-label="关闭">×</button>
|
||
<h2>六关竖切</h2>
|
||
<div id="level-list"></div>
|
||
</dialog>
|
||
<dialog id="help">
|
||
<button class="close" data-close aria-label="关闭">×</button>
|
||
<h2>刻度环</h2>
|
||
<ol>
|
||
<li>棋盘、轨道、飞机都不转。转的是环上的缺口。</li>
|
||
<li>每个口固定在一条边上。环上同色的点是它的刻度。</li>
|
||
<li>缺口盖住刻度，这个口才开。差几格，转之前数。</li>
|
||
<li>左右转是预览，不计星。确认才写入，跨几格计几星。</li>
|
||
<li>点场外飞机进场。点已停飞机，再按调边。调边落到已经画出的出口边，转不改变它。</li>
|
||
</ol>
|
||
</dialog>
|
||
<dialog id="result">
|
||
<h2>全部到位</h2>
|
||
<p id="result-copy"></p>
|
||
<div class="dialog-actions">
|
||
<button id="next" class="confirm">下一关</button>
|
||
<button id="retry" class="turn">再打一次</button>
|
||
</div>
|
||
</dialog>
|
||
<script type="module" src="./app.js"></script>
|
||
</body>
|
||
</html>
|