pong/index.html at main · geraldy1st/pong · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Pong - 2072</title>
    <link rel="stylesheet" href="css/styles.css">
    <audio id="hitSound" src="audio/09 SFX.mp3"></audio>
    <audio id="scoreSound" src="audio/18 SFX.mp3"></audio>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="game-menu" class="menu-container">
        <h1>CYBER PONG</h1>
        <button id="start-game">Initialize Game</button>
        <button id="options-button">System Config</button>
        <div id="instructions" class="instructions hidden">
            <h2>Neural Interface:</h2>
            <p>Player 1: S (↑) and Z (↓)</p>
            <p>Player 2: ↑ and ↓ arrows</p>
            <div class="game-mode">
                <h2>Runtime Mode:</h2>
                <label class="mode-switch">
                    <input type="checkbox" id="classic-mode">
                    <span class="slider">Legacy Protocol</span>
                </label>
                <h2>Opponent:</h2>
                <div class="opponent-select">
                    <label class="mode-switch">
                        <input type="radio" name="opponent" id="player-mode" checked>
                        <span class="slider">Player 2</span>
                    </label>
                    <label class="mode-switch">
                        <input type="radio" name="opponent" id="cpu-mode">
                        <span class="slider">CPU</span>
                    </label>
                </div>
                <div id="cpu-difficulty" class="difficulty-select hidden">
                    <h3>CPU Difficulty:</h3>
                    <label class="mode-switch">
                        <input type="radio" name="difficulty" id="easy-mode" checked>
                        <span class="slider">Easy</span>
                    </label>
                    <label class="mode-switch">
                        <input type="radio" name="difficulty" id="normal-mode">
                        <span class="slider">Normal</span>
                    </label>
                    <label class="mode-switch">
                        <input type="radio" name="difficulty" id="unbeatable-mode">
                        <span class="slider">Unbeatable</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <canvas id="board"></canvas>
    <button id="pause-button" class="pause-button hidden">⏸️</button>
    <div id="controls">
        <div class="control-section">
          <h3>Player 1</h3>
          <button class="control-button" id="p1-up">↑</button>
          <button class="control-button" id="p1-down">↓</button>
        </div>
        <div class="control-section">
          <h3>Player 2</h3>
          <button class="control-button" id="p2-up">↑</button>
          <button class="control-button" id="p2-down">↓</button>
        </div>
      </div>
      <script src="js/script.js"></script>
</body>
</html>