mars-attacks/index.html at main · sergotero/mars-attacks · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS STYLES -->
    <link rel="stylesheet" href="assets/css/styles.css">
    <!-- GOOGLE FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
    <!-- <link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Press+Start+2P&display=swap" rel="stylesheet"> -->
    <link rel="shortcut icon" href="/assets/images/sprites/spacecraft.sprite.png" type="image/x-icon">
    <!-- FONT AWESOME -->
    <script src="https://kit.fontawesome.com/92c8ed6d3a.js" crossorigin="anonymous"></script>
    <title>Mars Attacks</title>
</head>
<body>

    <div class="audio"><i class="fa-solid fa-volume-high"></i></div>
    <div class="main-screen">
        <div class="start-screen">
            <div class="empty"></div>
            <div class="load">
                <h1>BEWARE!</h1>
                <p>
                    Alien forces are closing in! Defend your ship, dodge incoming fire, and push back the Martian invasion. For decades, Mars has watched humanity grow stronger—now they strike to seize the solar frontier. As Earth’s last line of defense, you’re launched into the skies to stop the first wave before it reaches the surface. Stay sharp, pilot—Earth’s fate is in your hands. Ready to begin?
                </p>
                <a href="" id="start">Let the war begin!</a>
            </div>
        </div>
        <div class="extra">
            <div class="game-info-card">
                <div class="game-info">
                    <div class="game-info-score">
                        <h1>SCORE</h1>
                        <p id="score">0</p>
                    </div>
                    <div class="game-info-lives">
                        <h1>LIVES</h1>
                        <p id="lives">3</p>
                    </div>
                </div>
                <p id="time">00:00:00</p>
            </div>
            <div class="game-instructions">
                <h1>INSTRUCTIONS</h1>
                <p>Press the left or right arrow keys to move the spacecraft horizontally.</p>
                <img alt="keys" src="/assets/images/elements/keys.svg" name="keys">
                <p>Press the space bar to shoot.</p>
                <img alt="space bar" src="/assets/images/elements/space-bar.svg" name="space-bar">
                <p>Avoid the enemy fire and try to catch as many fruits as possible. Remember: an apple a day, keeps the doctor away!</p>
            </div>
        </div>
        <canvas id="game-screen" width="400" height="800">
        </canvas>
        <!-- Only for debuggin -->
        <!-- <div class="framework">
            <div class="inner-framework"></div>
        </div> -->
    </div>

</body>
    <!-- CONSTANTS -->
    <script src="assets/js/utils/constants.js"></script>
    <script src="assets/js/utils/utils.js"></script>
    <script src="assets/js/utils/time-counter.js"></script>
    <!-- BASE MODELS -->
    <script src="assets/js/models/base/base-model.js"></script>
    <script src="assets/js/models/base/spritable.js"></script>
    <script src="assets/js/models/enemies/enemy.js"></script>
    <script src="assets/js/models/armies/army.js"></script>
    <script src="assets/js/models/weapons/beam.js"></script>
    <!-- MODELS -->
    <script src="assets/js/models/enemies/pawn.js"></script>
    <script src="assets/js/models/enemies/special.js"></script>
    <script src="assets/js/models/armies/weak-army.js"></script>
    <script src="assets/js/models/armies/normal-army.js"></script>
    <script src="assets/js/models/armies/strong-army.js"></script>
    <script src="assets/js/models/enemies/boss.js"></script>
    <script src="assets/js/models/characters/spacecraft.js"></script>
    <!-- WEAPONS -->
    <script src="assets/js/models/weapons/final-beam.js"></script>
    <!-- BOOSTERS -->
    <script src="assets/js/models/base/booster.js"></script>
    <!-- BACKGROUND -->
    <script src="assets/js/models/backgrounds/space.js"></script>
    <!-- GAME -->
    <script src="assets/js/game.js"></script>
    <!-- INDEX -->
    <script src="assets/js/index.js"></script>
</html>