hackathon/index.html at main · UnrealAS/hackathon · 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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>青云劫 - 修仙肉鸽模板</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main class="game-shell">
      <section class="topbar">
        <div>
          <p class="eyebrow">Ancient Cultivation Roguelite</p>
          <h1>青云劫</h1>
        </div>
        <div class="pill-row">
          <span class="pill">WASD / 方向键移动</span>
          <span class="pill">Space 冲刺</span>
          <span class="pill">自动施法</span>
        </div>
      </section>

      <section class="stage">
        <aside class="panel">
          <h2>境界</h2>
          <div class="stat">
            <span>修为</span>
            <strong id="levelText">炼气一层</strong>
          </div>
          <div class="stat">
            <span>灵息</span>
            <strong id="hpText">100 / 100</strong>
          </div>
          <div class="bar"><span id="hpBar"></span></div>
          <div class="stat">
            <span>历练</span>
            <strong id="xpText">0 / 12</strong>
          </div>
          <div class="bar xp"><span id="xpBar"></span></div>
          <div class="stat">
            <span>劫数</span>
            <strong id="waveText">第 1 波</strong>
          </div>
          <div class="stat">
            <span>斩妖</span>
            <strong id="killText">0</strong>
          </div>

          <h2>本命法器</h2>
          <ul id="relicList" class="relic-list">
            <li>青竹剑：每秒自动飞剑</li>
          </ul>
        </aside>

        <div class="canvas-wrap">
          <canvas id="game" width="960" height="620"></canvas>
          <div id="startOverlay" class="overlay">
            <div class="overlay-card">
              <p class="eyebrow">模板已就绪</p>
              <h2>入山渡劫</h2>
              <p>在妖雾中存活，拾取灵蕴升级。每次突破可选择一个功法强化。</p>
              <button id="startBtn">开始试炼</button>
            </div>
          </div>
          <div id="choiceOverlay" class="overlay hidden">
            <div class="choice-card">
              <p class="eyebrow">突破机缘</p>
              <h2>选择一门功法</h2>
              <div id="choices" class="choices"></div>
            </div>
          </div>
          <div id="gameOverOverlay" class="overlay hidden">
            <div class="overlay-card">
              <p class="eyebrow">道心未泯</p>
              <h2>试炼结束</h2>
              <p id="resultText"></p>
              <button id="restartBtn">再入轮回</button>
            </div>
          </div>
        </div>
      </section>
    </main>

    <script src="./game.js"></script>
  </body>
</html>