-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcrystal-conduit.html
More file actions
114 lines (109 loc) · 6.48 KB
/
Copy pathcrystal-conduit.html
File metadata and controls
114 lines (109 loc) · 6.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="晶流导管：像素风战术推箱小游戏，开门、换边、推晶匣，接通导管后撤离。"
/>
<title>晶流导管 | DemoCodex</title>
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%2307111f'/%3E%3Cpath d='M32 10 48 28 32 54 16 28Z' fill='%2393c5fd'/%3E%3Cpath d='M24 30h16' stroke='%235eead4' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M32 16v32' stroke='%23facc15' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"
/>
<link rel="stylesheet" href="src/css/crystal-conduit.css" />
</head>
<body>
<main class="pixel-shell">
<header class="pixel-hero">
<a class="pixel-back" href="index.html">返回首页</a>
<div>
<p class="pixel-eyebrow">Crystal Conduit</p>
<h1 class="pixel-title">晶流导管</h1>
<p class="pixel-lead">导管被晶噪切断，传导门只传送人不传送晶匣。你要踩稳压板开门，绕位推箱，接通 3 段导管后撤离。</p>
</div>
<div class="pixel-actions">
<button class="pixel-cta" id="app-start" type="button">接管导管</button>
<button class="pixel-cta pixel-cta--ghost" id="app-reset" type="button">重置线路</button>
</div>
</header>
<section class="pixel-layout">
<section class="pixel-panel pixel-panel--primary">
<div class="pixel-stats">
<article class="pixel-stat"><span class="pixel-stat__label">关卡</span><strong class="pixel-stat__value" id="stat-stage">1</strong></article>
<article class="pixel-stat"><span class="pixel-stat__label">得分</span><strong class="pixel-stat__value" id="stat-score">0</strong></article>
<article class="pixel-stat"><span class="pixel-stat__label">护盾</span><strong class="pixel-stat__value" id="stat-life">3</strong></article>
<article class="pixel-stat"><span class="pixel-stat__label">导管</span><strong class="pixel-stat__value" id="stat-target">0 / 3</strong></article>
<article class="pixel-stat"><span class="pixel-stat__label">凝滞</span><strong class="pixel-stat__value" id="stat-skill">就绪</strong></article>
<article class="pixel-stat"><span class="pixel-stat__label">纪录</span><strong class="pixel-stat__value" id="stat-best">0</strong></article>
</div>
<div class="pixel-board-shell">
<canvas class="pixel-canvas" id="pixel-canvas" width="840" height="840" role="img" aria-label="晶流导管棋盘"></canvas>
<div class="pixel-overlay is-visible" id="pixel-overlay" aria-live="polite">
<p class="pixel-overlay__kicker">导管简报</p>
<h2 class="pixel-overlay__title" id="overlay-title">按开始或 Enter 接管导管</h2>
<p class="pixel-overlay__body" id="overlay-body">方向键移动和推箱，空格稳压，Q 展开凝滞场。开门后先换边，再从正确角度推晶匣。</p>
</div>
</div>
<section class="pixel-pad">
<button class="pixel-pad__button" data-action="up" type="button">上</button>
<button class="pixel-pad__button" data-action="left" type="button">左</button>
<button class="pixel-pad__button" data-action="wait" type="button">停</button>
<button class="pixel-pad__button" data-action="right" type="button">右</button>
<button class="pixel-pad__button" data-action="down" type="button">下</button>
<button class="pixel-pad__button pixel-pad__button--accent" data-action="skill" type="button">凝滞</button>
</section>
</section>
<aside class="pixel-panel pixel-panel--side">
<section class="pixel-sidecard">
<h2 class="pixel-sidecard__title">任务状态</h2>
<p class="pixel-sidecard__body" id="status-text">把 3 个晶匣推上导管座，再从右上出口撤离。</p>
<p class="pixel-sidecard__body pixel-sidecard__body--hint" id="objective-text">传导门只送人不送箱，别把晶匣推到回不来的角落。</p>
</section>
<section class="pixel-sidecard">
<h2 class="pixel-sidecard__title">玩法说明</h2>
<ul class="pixel-rules">
<li>踩稳压板会打开封闭导管门。</li>
<li>晶匣进入导管座后会锁定得分。</li>
<li>凝滞场能让晶噪停住一拍。</li>
</ul>
</section>
<section class="pixel-sidecard">
<h2 class="pixel-sidecard__title">控制方式</h2>
<ul class="pixel-rules">
<li>WASD / 方向键：移动和推箱</li>
<li>Space：稳压等待</li>
<li>Q：凝滞场</li>
<li>Enter：开始</li>
<li>R：重置</li>
</ul>
</section>
<section class="pixel-sidecard">
<h2 class="pixel-sidecard__title">行动面板</h2>
<div class="pixel-mini-actions">
<button class="pixel-button pixel-button--ghost" id="action-wait" type="button">稳压</button>
<button class="pixel-button pixel-button--accent" id="action-skill" type="button">凝滞</button>
<button class="pixel-button pixel-button--ghost" id="action-restart" type="button">重开</button>
</div>
</section>
<section class="pixel-sidecard">
<h2 class="pixel-sidecard__title">遥测</h2>
<dl class="pixel-metrics">
<div class="pixel-metrics__row"><dt>当前回合</dt><dd id="metric-turn">0</dd></div>
<div class="pixel-metrics__row"><dt>晶噪数</dt><dd id="metric-danger">0</dd></div>
<div class="pixel-metrics__row"><dt>最佳关卡</dt><dd id="metric-best-stage">0</dd></div>
</dl>
</section>
<section class="pixel-sidecard">
<h2 class="pixel-sidecard__title">行动日志</h2>
<ul class="pixel-feed" id="feed-list"></ul>
</section>
</aside>
</section>
</main>
<script src="src/js/grid-arcade-core.js"></script>
<script src="src/js/pixel-page-runtime.js"></script>
<script src="src/js/crystal-conduit.js"></script>
</body>
</html>