space_invaders_microbit/index.html at main · mrenne/space_invaders_microbit · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Invaders :: micro:bit Edition</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app">
    <header>
      <h1>SPACE INVADERS <span class="accent">micro:bit</span></h1>
      <div id="connection-bar">
        <button id="connect-btn" class="btn">Connect micro:bit</button>
        <span id="conn-status" class="status disconnected">Disconnected</span>
        <button id="keyboard-btn" class="btn secondary">Play with Keyboard Instead</button>
      </div>
    </header>

    <main>
      <div id="game-wrap">
        <canvas id="game-canvas" width="800" height="600"></canvas>
        <div id="overlay" class="overlay">
          <div class="overlay-content">
            <h2 id="overlay-title">Ready, Player One?</h2>
            <p id="overlay-text">Connect your micro:bit (or use the keyboard) then press Start.</p>
            <button id="start-btn" class="btn primary">Start Game</button>
          </div>
        </div>
      </div>

      <aside id="hud">
        <div class="panel">
          <h3>Status</h3>
          <div class="row"><span>Score</span><span id="score">0</span></div>
          <div class="row"><span>Lives</span><span id="lives">3</span></div>
          <div class="row"><span>Wave</span><span id="wave">1</span></div>
        </div>

        <div class="panel">
          <h3>micro:bit Telemetry</h3>
          <div class="row"><span>Tilt X</span><span id="tilt-x">0</span></div>
          <div class="row"><span>Button A</span><span id="btn-a">-</span></div>
          <div class="row"><span>Button B</span><span id="btn-b">-</span></div>
        </div>

        <div class="panel">
          <h3>Controls</h3>
          <p class="hint">Tilt micro:bit left/right to move. Press <b>Button A</b> or <b>Button B</b> to fire.</p>
          <p class="hint">Keyboard fallback: <b>Arrow keys</b> to move, <b>Space</b> to fire.</p>
        </div>
      </aside>
    </main>

    <footer>
      <p>Requires a Chromium-based browser (Chrome/Edge) with Web Bluetooth support, served over HTTPS or localhost.</p>
    </footer>
  </div>

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