browser-game-arcade/ember-gate.html at main · opanai404/browser-game-arcade · GitHub

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!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='%23140604'/%3E%3Cpath d='M10 46h44v8H10z' fill='%23542a15'/%3E%3Cpath d='M20 16h24l-4 14H24z' fill='%23fb923c'/%3E%3Cpath d='M26 26h12v14H26z' fill='%23facc15'/%3E%3C/svg%3E"
    />
    <link rel="stylesheet" href="src/css/ember-gate.css" />
  </head>
  <body class="ember-page">
    <main class="pixel-shell">
      <header class="pixel-hero">
        <a class="pixel-back" href="index.html">返回合集</a>
        <div>
          <p class="pixel-eyebrow">Ember Gate Recovery</p>
          <h1 class="pixel-title">余烬闸门</h1>
          <p class="pixel-lead">
            熔门之后还压着可回收的余烬芯。你要在火浪扩散之前踩开闸门、扫清近身火点，把回收路线和撤离路线硬生生抢出来。
          </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 / 5</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">先打开熔门，再收回 5 枚余烬芯。</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>Q 能清掉近身火点，但冷却时必须主动绕行。</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/ember-gate.js"></script>
  </body>
</html>