8-bit-armageddon/index.html at main · hunghvu/8-bit-armageddon · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>8-bit Armageddon</title>
  <link rel="stylesheet" href="css/stylesheet.css" type="text/css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="js/world/MapGenerator.js"></script>
  <script src="js/dataStructures/Point.js"></script>
  <script src="js/dataStructures/Rectangle.js"></script>
  <script src="js/dataStructures/ShootingAngle.js"></script>
  <script src="js/dataStructures/Turn.js"></script>
  <script src="js/controller/Controls.js"></script>
  <script src="js/entities/Entity.js"></script>
  <script src="js/entities/EntityOnMap.js"></script>
  <script src="js/entities/characters/HealthBar.js"></script>
  <script src="js/entities/characters/Player.js"></script>
  <script src="js/entities/characters/CPUPlayer.js"></script>
  <script src="js/entities/characters/DamageText.js"></script>
  <script src="js/entities/characters/Animator.js"></script>
  <script src="js/entities/weapons/CurrentWeapon.js"></script>
  <script src="js/entities/weapons/Projectile.js"></script>
  <script src="js/entities/weapons/Bullet.js"></script>
  <script src="js/entities/weapons/Sniper.js"></script>
  <script src="js/entities/weapons/Laser.js"></script>
  <script src="js/entities/weapons/Grenade.js"></script>
  <script src="js/entities/weapons/GrenadeLevel2.js"></script>
  <script src="js/entities/weapons/GrenadeLevel3.js"></script>
  <script src="js/entities/weapons/OPWeapon.js"></script>
  <script src="js/entities/weapons/PortalGun.js"></script>
  <script src="js/entities/weapons/Portal.js"></script>
  <script src="js/entities/weapons/TeleportGun.js"></script>
  <script src="js/entities/items/Crate.js"></script>
  <script src="js/world/MovingPlatform.js"></script>
  <script src="js/world/DestructibleMap.js"></script>
  <script src="js/world/Camera.js"></script>
  <script src="js/world/Timer.js"></script>
  <script src="js/world/ShootingPower.js"></script>
  <script src="js/world/Wind.js"></script>
  <script src="js/world/World.js"></script>
  <script src="js/Game.js"></script>
  <script src="js/AssetManager.js"></script>
  <script src="js/menu/MainMenu.js"></script>


  <!-- Library for main menu. -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    .bg {
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)), url("assets/background-menu.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
    }

    body {
      font-family: 'Press Start 2P', cursive;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <!-- The menu is built upon bootstrap starter template and is modified to serve the project, for example: https://getbootstrap.com/docs/4.0/components/modal/ -->
  <div class="bg" id="main-menu" style="visibility: visible;">
    <div class="input-wrapper d-flex justify-content-center">
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#matchSetting">
        Set up a match
      </button>

      <!-- Modal -->
      <div class="modal fade" id="matchSetting" tabindex="-1" role="dialog" aria-labelledby="matchSettingLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">

            <div class="modal-header">
              <h5 class="modal-title" id="matchSettingTitle">Match Settings</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div class="modal-body">
              <div class="form-group">
                <label for="limit-turn-input" class="col-form-label"><b>Turn Limit (optional):</b> Minimum is 20 turns,
                  and is divisible by 2</label>
                <input type="number" class="form-control" id="limit-turn-input" min="20">
              </div>
              <div class="form-group">
                <label for="limit-turn-time-input" class="col-form-label"><b>Time per turn:</b> Allow only integer values from 5 to 10 seconds</label>
                <input type="number" value="5" class="form-control" id="limit-turn-time-input" min="5" max="10">
              </div>
              <div class="form-group">
                <label class="col-form-label"><b>Play modes:</b></label>
                <br>
                <div class="form-check form-check-inline">
                  <input checked class="form-check-input" type="radio" name="playModeChoices" id="play-mode-1v1" value="1v1">
                  <label class="form-check-label" for="play-mode-1v1">1 v 1</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="playModeChoices" id="play-mode-2v2" value="2v2">
                  <label class="form-check-label" for="play-mode-2v2">2 v 2</label>
                </div>
                <br>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="playModeChoices" id="play-mode-3v3" value="3v3">
                  <label class="form-check-label" for="play-mode-3v3">3 v 3</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="playModeChoices" id="play-mode-4v4" value="4v4">
                  <label class="form-check-label" for="play-mode-4v4">4 v 4</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" name="CPU-choice" id="ai" value="CPU">
                    <label class="form-check-label" for="CPU-choice">CPU Enemies?</label>
                </div>
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" id="start-game">Start</button>
            </div>

          </div>
        </div>
      </div>
    </div>

    <br>
    <br>
    <p style="color:#e0f7fa; margin-left: 100px; margin-right: 100px;">
      Food has come to LIFE! Why? WE DON’T KNOW! But they are angry about humanity eating their kind and want to remake
      the world. Your mission is to pick a side (Humanity Team 1, Food Team 2), and battle it out for the survival of
      either race!
      <br>
      <br>
      This game is a worm-like 2D strategy shooter local multiplayer game! You must take account of the angle, power,
      and the wind each turn. Hitting crates in the air will give you a weapon upgrade. Each weapon upgrade will
      increase damage to the weapon and a few will act differently.
      <br>
      <br>
      There are three different weapon levels, starting out will give you weapon set level 1 to begin. (Please note, if you hit a crate, please switch to a different
      weapon at the start of the turn to start with that new weapon set level). Try unlocking the hidden weapon!! But
      also be careful welding all that power!
      <br>
      <br>
      When starting the game, you’ll have a choice of how many turns (20+ and
      must be divisible by 2), how much time per match (5-10 seconds plus 3 seconds to pass the browser to your
      opponent), and how many players you want on the field (1v1, 2v2, 3v3, 4v4). Use the minimap to your advantage to
      see where your bullet lands and where are the crates in the sky!
      <br>
      <br>
      Controls:<br>
      1. Key a or left arrow = move  <br>
      2. Key d or right arrow = move right <br>
      3. Key w or up arrow = change angle upward <br>
      4. Key s or down arrow = change angle downward <br>
      5. Key space = jump <br>
      6. Key q = previous weapon <br>
      7. Key e = next  <br>
      8. Key j = shoot <br>
      9. Key m = enter portal (if your team portal is on the field) <br>
      10. Key p = pass your turn <br>
      11. Key f = forfeit (press Y to accept the forfeit, or escape to cancel) <br>
      12. Mouse scroll = zoom in/out
      <br>
      <br>
      Sound credits: <br>
      Credit to https://www.FesliyanStudios.com for the (playing) background music. <br>
      Credit to https://freesound.org/people/Fupicat/ for the end game music. <br>
      Credit to https://freesound.org/people/SpliceSound/ for the referee whistle blow sound.
      <br>
      <br>
      Source code: <a href="https://github.com/hunghvu/8-bit-armageddon" style="color:aliceblue">https://github.com/hunghvu/8-bit-armageddon</a>
    </p>
  </div>

  <div class="container" id="game-canvas" style="visibility: hidden;">
    <canvas id="display"></canvas>
  </div>
</body>

</html>