foxmunch/foxmunch.html at main · noluckmurphy/foxmunch · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fox Munch</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <div id="hud"></div>
    <div id="messageContainer">
        <div id="message"></div>
        <div class="game-over-buttons">
            <button id="playAgainButton">Play Again</button>
            <button id="newGameButton">Back to Menu</button>
        </div>
    </div>
    <div id="pauseOverlay">Paused</div>
    <div id="controlsLegend">
        Arrows: Move <br/>
        Space: Shoot acorns <br/>
        F: Melee attack <br/>
        S: Drop bomb <br/>
        P: Pause <br/>
        Volume: <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.5" />
    </div>
    <div id="gamepadIndicator">&#x1F3AE;</div>
    <div id="settingsScreen">
        <h2>Controller Settings</h2>
        <div>Axis X <input id="axisX" type="number" min="0" max="10"></div>
        <div>Axis Y <input id="axisY" type="number" min="0" max="10"></div>
        <div>Shoot Button <input id="shootButton" type="number" min="0" max="20"></div>
        <div>Melee Button <input id="meleeButton" type="number" min="0" max="20"></div>
        <div>Bomb Button <input id="bombButton" type="number" min="0" max="20"></div>
        <div>Pause Button <input id="pauseButton" type="number" min="0" max="20"></div>
        <div>Settings Button <input id="settingsButton" type="number" min="0" max="20"></div>
        <button id="saveSettings">Save</button>
    </div>

    <!-- Title Screen -->
    <div id="titleScreen">
        <div class="title-content">
            <h1 class="title-logo">Fox Munch</h1>
            <p class="title-subtitle">Co-op Multiplayer Survival</p>

            <div class="title-form">
                <label for="playerNameInput">Your Name</label>
                <input type="text" id="playerNameInput" placeholder="Enter your name" maxlength="12" autocomplete="off" />
            </div>

            <div class="title-buttons">
                <button id="startGameBtn" class="title-btn title-btn-primary">Start New Game</button>
                <div class="title-divider">or</div>
                <div class="title-join-row">
                    <input type="text" id="joinCodeInput" placeholder="Room code" maxlength="4" autocomplete="off" />
                    <button id="joinGameBtn" class="title-btn title-btn-secondary">Join Game</button>
                </div>
            </div>

            <div id="titleStatus" class="title-status"></div>
            <div id="titleError" class="title-error"></div>

            <div class="title-instructions">
                <p>Up to 4 players can join the same game!</p>
                <p>Start a game to get a room code, then share it with friends.</p>
            </div>
        </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="js/game.js" type="module"></script>
    <script src="js/sounds.js" type="module"></script>
</body>
</html>