typing-practice/racing.html at main · fishcoco-code/typing-practice · 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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="帅气逼人吊炸天 · 漫画风 F1 赛车" />
    <title>F1 赛车 · 帅气逼人吊炸天</title>
    <link rel="stylesheet" href="racing.css?v=12" />
  </head>
  <body>
    <main class="game-shell">
      <header class="game-header">
        <a class="game-back" href="./">← 首页</a>
        <div class="game-title">
          <span>FORMULA CIRCUIT</span>
          <h1>漫画 F1 极速赛</h1>
        </div>
        <div class="game-stats" aria-live="polite">
          <div><span>速度</span><strong id="speedValue">0</strong><small>KM/H</small></div>
          <div><span>状态</span><strong id="driveState">待发车</strong></div>
        </div>
      </header>

      <section class="game-stage" id="gameStage" aria-label="F1 赛车游戏区域">
        <canvas id="raceCanvas" width="1000" height="650" aria-label="带弯道和空气墙的 F1 赛道"></canvas>

        <div class="control-card" id="controlCard">
          <span class="control-title">驾驶方式</span>
          <div><kbd>W</kbd><kbd>↑</kbd><span>油门</span></div>
          <div><kbd>A</kbd><kbd>D</kbd><kbd>←</kbd><kbd>→</kbd><span>转向</span></div>
          <div><kbd>R</kbd><span>重置车辆</span></div>
        </div>

        <div class="route-hint"><i></i> 沿双轮车印路线前进</div>

        <div class="map-selector" id="mapSelector">
          <button class="map-toggle" id="mapToggle" type="button" aria-expanded="false" aria-controls="mapMenu">
            <span>选择地图</span>
            <strong id="currentMapName">绿野大奖赛</strong>
            <b aria-hidden="true">⌃</b>
          </button>
          <div class="map-menu" id="mapMenu" role="group" aria-label="选择地图" hidden>
            <span class="map-menu-title">点击地图立即开赛</span>
            <button class="map-option selected" type="button" data-map="meadow" aria-pressed="true">
              <i class="map-swatch" aria-hidden="true"></i>
              <span><strong>绿野大奖赛</strong><small>8弯 · 连续高速大弯</small></span>
            </button>
            <button class="map-option" type="button" data-map="coast" aria-pressed="false">
              <i class="map-swatch" aria-hidden="true"></i>
              <span><strong>海岸公路</strong><small>6弯 · 双长直道</small></span>
            </button>
            <button class="map-option" type="button" data-map="neon" aria-pressed="false">
              <i class="map-swatch" aria-hidden="true"></i>
              <span><strong>霓虹都市</strong><small>18弯 · 连续S弯</small></span>
            </button>
            <button class="map-option" type="button" data-map="canyon" aria-pressed="false">
              <i class="map-swatch" aria-hidden="true"></i>
              <span><strong>沙漠峡谷</strong><small>17弯 · 发卡回头弯</small></span>
            </button>
            <button class="map-option" type="button" data-map="alpine" aria-pressed="false">
              <i class="map-swatch" aria-hidden="true"></i>
              <span><strong>雪山发卡</strong><small>14弯 · 上山发卡</small></span>
            </button>
            <button class="map-option" type="button" data-map="harbor" aria-pressed="false">
              <i class="map-swatch" aria-hidden="true"></i>
              <span><strong>港湾街区</strong><small>12弯 · 直角减速弯</small></span>
            </button>
            <button class="map-option" type="button" data-map="oval" aria-pressed="false">
              <i class="map-swatch" aria-hidden="true"></i>
              <span><strong>极速椭圆</strong><small>4弯 · 双高速直道</small></span>
            </button>
            <button class="map-option" type="button" data-map="crossing" aria-pressed="false">
              <i class="map-swatch" aria-hidden="true"></i>
              <span><strong>交叉八字</strong><small>10弯 · 交叉复合弯</small></span>
            </button>
            <button class="map-option" type="button" data-map="straight" aria-pressed="false">
              <i class="map-swatch" aria-hidden="true"></i>
              <span><strong>直道</strong><small>0弯 · 纯直线加速</small></span>
            </button>
          </div>
        </div>

        <div class="touch-controls" aria-label="触控驾驶按钮">
          <button type="button" data-control="left" aria-label="左转">←</button>
          <button type="button" data-control="up" aria-label="油门">↑</button>
          <button type="button" data-control="right" aria-label="右转">→</button>
        </div>
      </section>

      <p class="game-note">9种真实赛道结构：高速弯、S弯、发卡弯、交叉弯与纯直道；镜头视野同步加宽。</p>
    </main>
    <script src="racing.js?v=16"></script>
  </body>
</html>