Files
HexTrails/labs/airport/index.html
T
toshiocn c99716b1d5 feat(airport): bind landings to the six visual flats
Entry side is the 60-degree wedge of the port, not the cell-edge direction. Levels regenerated; hint line joins the waiting plane to the on-board path.
2026-09-21 17:55:06 +08:00

37 lines
3.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="airport">
<header class="topbar">
<button class="icon-button" id="levels" aria-label="选择关卡"><canvas data-icon="grid" width="48" height="48"></canvas></button>
<div><p class="eyebrow">六角机场</p><h1 id="level-title">第 1 关</h1></div>
<button class="icon-button" id="settings" aria-label="设置与玩法"><canvas data-icon="gear" width="48" height="48"></canvas></button>
</header>
<section class="status" aria-label="关卡状态">
<div><span class="caption">剩余操作</span><strong id="moves">—</strong></div>
<div class="mission"><span class="caption">接机进度</span><strong id="progress">0 / 1</strong><div class="progress-track"><i id="progress-bar"></i></div></div>
</section>
<div class="notice" id="notice" role="status" aria-live="polite">清开通路,把来机接入同色停机位。</div>
<section class="airspace" id="airspace" aria-label="机场棋盘与六边停机坪">
<canvas id="board" aria-label="六角轨道、停机位与飞机"></canvas>
<div id="plane-controls" aria-label="可操作飞机"></div>
</section>
<div class="rotation-controls">
<button id="left" class="rotate"><canvas data-icon="left" width="56" height="56"></canvas><span>左转</span><small>1 次</small></button>
<span class="rotation-note">只转轨道<br>飞机与机位保持不动</span>
<button id="right" class="rotate"><canvas data-icon="right" width="56" height="56"></canvas><span>右转</span><small>1 次</small></button>
</div>
<footer><button id="restart" class="restart"><canvas data-icon="restart" width="28" height="28"></canvas>重来</button><span id="level-name">留一点空间</span></footer>
</main>
<dialog id="menu"><button class="close" data-close aria-label="关闭">×</button><h2>选择关卡</h2><p>接齐来机即可过关,无需清空棋盘。</p><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><li>每次起降尝试和旋转都消耗一次操作。</li></ol><p>标有 P 的是已经停靠的来机。所有来机同时停好,才算完成。</p><button id="sound" class="secondary">声音:开</button><p class="small">独立实验版 · 马卡龙视觉 · 进度单独保存</p></dialog>
<dialog id="result"><h2 id="result-title">全部到位</h2><p id="result-copy"></p><div class="dialog-actions"><button id="next" class="primary">下一关</button><button id="reward" class="primary" hidden></button><button id="retry" class="secondary">重新挑战</button></div><p id="reward-note" class="small" hidden>本实验版尚未接入真实广告,测试补充只用于验证奖励流程。</p></dialog>
<script type="module" src="./app.js"></script>
</body>
</html>