-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
306 lines (283 loc) · 20.7 KB
/
index.html
File metadata and controls
306 lines (283 loc) · 20.7 KB
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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!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">
<meta name="description" content="Missile Command - Atari Classic Clone Game">
<meta property="og:title" content="Missile Command - Classic Arcade Action!" />
<meta property="og:description" content="Defend your cities from relentless attacks in this modern HTML5 remake of the Atari classic. Features upgrades, special weapons, and online leaderboards!" />
<meta property="og:image" content="https://missile-command-game.centminmod.com/images/social-preview.jpg" /> <meta property="og:url" content="https://missile-command-game.centminmod.com/" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Missile Command Game" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Missile Command - Classic Arcade Action!" />
<meta name="twitter:description" content="Defend your cities from relentless attacks in this modern HTML5 remake of the Atari classic. Features upgrades, special weapons, and online leaderboards!" />
<meta name="twitter:image" content="https://missile-command-game.centminmod.com/images/social-preview.jpg" /> <meta name="twitter:url" content="https://missile-command-game.centminmod.com/" /> </head>
<meta name="theme-color" content="#000000"/>
<link rel="preload" href="css/fonts.css" as="style">
<link rel="preload" href="css/style.css" as="style">
<link rel="preload" href="fonts/press-start-2p-v15-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="manifest" href="manifest.json">
<!-- ADDED: Enhanced mobile meta tags -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Missile Cmd">
<meta name="mobile-web-app-capable" content="yes">
<title>Missile Command</title>
<link href="css/fonts.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script>
!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
posthog.init('phc_6REHoxpbU0fesAuHK6uS6FtPeJ7A7MuXmLEv2H22ceo', {
api_host: 'https://posthog.centminmod.com',
person_profiles: 'identified_only',
})
</script>
</head>
<body>
<div id="startMenuContainer">
<h1 id="mainTitle">MISSILE COMMAND</h1>
<div id="difficultySelection">
<h3>SELECT DIFFICULTY</h3>
<button class="difficulty-button" data-ammo="150" data-multiplier="1.0">Easy (150 Ammo)</button>
<button class="difficulty-button" data-ammo="100" data-multiplier="1.25">Normal (100 Ammo)</button>
<button class="difficulty-button" data-ammo="75" data-multiplier="1.5">Hard (75 Ammo)</button>
<button class="difficulty-button" data-ammo="50" data-multiplier="2.0">Insane (50 Ammo)</button>
</div>
<button id="actualStartButton" style="display: none;">Start Game</button>
<div id="startHighScore">High Score: $0</div>
<div id="leaderboardContainer">
<h3>Top Scores</h3>
<ol id="leaderboardList">
<li id="leaderboardLoading">Loading...</li>
</ol>
<div id="leaderboardViewMoreContainer" style="margin-top: 10px; display: none;">
<a href="#" id="leaderboardViewMoreLink" style="color: #00ffff; text-decoration: underline; font-size: clamp(10px, 2.8vw, 12px);">View Top 1000</a>
</div>
</div>
<div id="aboutGameButtonContainer" style="text-align: center; margin-top: 15px; margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;">
<button id="aboutGameButton" class="difficulty-button" style="background-color: #333; width: auto; max-width: 200px;">About Game</button>
<button id="installPwaButton" class="difficulty-button" style="display: none; width: auto; max-width: 200px;">Install App</button>
</div>
</div>
<div id="uiContainer">
<div id="score">CURRENT SCORE: $0</div>
<div id="highScore">TOTAL: $0</div>
<div id="wave">WAVE: 1</div>
<div id="citiesLeft">CITIES: 6</div>
<div id="multiplier">MULT: 1.0x</div>
<div id="bonusIndicator">BONUS FIRE +0!</div>
</div>
<div id="canvasContainer">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="pauseOverlay">PAUSED</div>
</div>
<div id="specialWeaponsUI">
<div class="weaponControl" id="sonicWaveControl">
<div class="weaponIcon">🌊</div>
<span class="weaponCount" id="sonicWaveCount">0</span>
</div>
<div class="weaponControl" id="bombControl">
<div class="weaponIcon">💣</div>
<span class="weaponCount" id="bombCount">0</span>
</div>
</div>
<div id="controlsContainer">
<button id="restartButton" style="display: none;">Restart Game</button>
<button id="pauseButton" style="display: none;">Pause</button>
<button id="screenshotButton" style="display: none;">Save Screenshot</button>
</div>
<div id="messageBox">
<h2 id="messageTitle"></h2>
<p id="messageText"></p>
<p id="messageSubText"></p>
<p id="messageBonusText" class="bonus-alert"></p>
<div id="statsContainer" style="display: none;"> </div>
<div id="scoreSubmission">
<label for="playerNameInput">Enter Name (max 18 chars):</label>
<input type="text" id="playerNameInput" maxlength="18" placeholder="ACE" size="18">
<button id="submitScoreButton">Submit Score</button>
<div id="submissionStatus"></div>
</div>
<div class="messageBoxButtons">
<button id="goToStoreButton">Go to Store</button>
<button id="skipStoreButton">Next Wave</button>
<button id="restartButton" style="display: none;">Restart Game</button>
</div>
</div>
<div id="storeModal">
<h2>Inter-Wave Store</h2>
<div id="storeScore">Current Score: $0</div>
<div id="storeItemsContainer">
<div class="storeItem" title="Clears all enemy missiles and bombs currently on screen.">
<div class="storeItemInfo">
<span>Sonic Wave</span>
<span class="itemCost" id="costSonicWaveDisplay">Cost: $...</span>
<span class="itemStock" id="stockSonicWave">Stock: ...</span>
</div>
<div class="storeItemButtons">
<button class="buyButton buyMultipleButton" id="buySonicWave10Button">BUY x10</button>
<button class="buyButton" id="buySonicWaveButton">BUY</button>
</div>
</div>
<div class="storeItem" title="Creates a large, powerful explosion at the clicked location.">
<div class="storeItemInfo">
<span>Mega Bomb</span>
<span class="itemCost" id="costBombDisplay">Cost: $...</span>
<span class="itemStock" id="stockBomb">Stock: ...</span>
</div>
<div class="storeItemButtons">
<button class="buyButton buyMultipleButton" id="buyBomb10Button">BUY x10</button>
<button class="buyButton" id="buyBombButton">BUY</button>
</div>
</div>
<div class="storeItem" title="Adds an orbital missile base. Fires from a higher altitude. Max 3 active.">
<div class="storeItemInfo">
<span>Satellite Base (Max 3)</span>
<span class="itemCost" id="costSatelliteDisplay">Cost: $...</span>
<span class="itemStock" id="stockSatellite">Stock: ...</span>
</div>
<div class="storeItemButtons"> <button class="buyButton" id="buySatelliteButton">BUY</button> </div>
</div>
<div class="storeItem" title="Adds a temporary shield to an active satellite base.">
<div class="storeItemInfo">
<span>Satellite Shield</span>
<span class="itemCost" id="costSatShieldDisplay">Cost: $...</span>
<span class="itemStock" id="stockSatShield">Stock: ...</span>
</div>
<div class="storeItemButtons"> <button class="buyButton" id="buySatShieldButton">BUY</button> </div>
</div>
<div class="storeItem" title="Rebuilds one destroyed missile base.">
<div class="storeItemInfo">
<span>Replacement Base</span>
<span class="itemCost" id="costBaseDisplay">Cost: $...</span>
<span class="itemStock" id="stockBase">Stock: ...</span>
</div>
<div class="storeItemButtons"> <button class="buyButton" id="buyBaseButton">BUY</button> </div>
</div>
<div class="storeItem" title="Rebuilds one destroyed city.">
<div class="storeItemInfo">
<span>Replacement City</span>
<span class="itemCost" id="costCityDisplay">Cost: $...</span>
<span class="itemStock" id="stockCity">Stock: ...</span>
</div>
<div class="storeItemButtons"> <button class="buyButton" id="buyCityButton">BUY</button> </div>
</div>
<div class="storeItem" title="Adds a temporary shield to an active ground base.">
<div class="storeItemInfo">
<span>Base Shield</span>
<span class="itemCost" id="costShieldDisplay">Cost: $...</span>
<span class="itemStock" id="stockShield">Stock: ...</span>
</div>
<div class="storeItemButtons"> <button class="buyButton" id="buyShieldButton">BUY</button> </div>
</div>
<div class="storeItem" title="Increases the speed of your missiles.">
<div class="storeItemInfo">
<span>Faster Missiles (Max 15)</span>
<span class="itemCost" id="costFasterMissile">Cost: $...</span>
<span class="itemLevel" id="levelFasterMissile">Level: ...</span>
</div>
<div class="storeItemButtons"> <button class="buyButton" id="buyFasterMissileButton">BUY</button> </div>
</div>
<div class="storeItem" title="Increases the blast radius of your missile explosions.">
<div class="storeItemInfo">
<span>Wider Explosions (Max 15)</span>
<span class="itemCost" id="costWiderExplosion">Cost: $...</span>
<span class="itemLevel" id="levelWiderExplosion">Level: ...</span>
</div>
<div class="storeItemButtons"> <button class="buyButton" id="buyWiderExplosionButton">BUY</button> </div>
</div>
</div>
<button id="storeContinueButton">Continue to Next Wave</button>
</div>
<footer>
<div class="footer-links"> <!-- Added wrapper -->
<div class="link-group social-links">
<a href="https://x.com/George_SLiu" target="_blank" rel="noopener noreferrer">Twitter</a>
<a href="https://www.threads.net/@george_sl_liu" target="_blank" rel="noopener noreferrer">Threads</a>
<a href="https://bsky.app/profile/georgesl.bsky.social" target="_blank" rel="noopener noreferrer">BlueSky</a>
</div>
<div class="link-group github-links">
<a href="https://github.com/sponsors/centminmod" target="_blank" rel="noopener noreferrer">
<img src="https://img.shields.io/github/sponsors/centminmod" alt="GitHub Sponsors" loading="lazy">
</a>
<a href="https://github.com/centminmod/atari-missile-command/stargazers" target="_blank" rel="noopener noreferrer">
<img src="https://img.shields.io/github/stars/centminmod/atari-missile-command.svg?style=flat-square" alt="Centmin Mod GitHub stars" loading="lazy">
</a>
<a href="https://github.com/centminmod/atari-missile-command/network" target="_blank" rel="noopener noreferrer">
<img src="https://img.shields.io/github/forks/centminmod/atari-missile-command.svg?style=flat-square" alt="Centmin Mod GitHub forks" loading="lazy">
</a>
<a href="https://github.com/centminmod/atari-missile-command/issues" target="_blank" rel="noopener noreferrer">
<img src="https://img.shields.io/github/issues/centminmod/atari-missile-command.svg?style=flat-square" alt="Centmin Mod GitHub issues" loading="lazy">
</a>
<a target="_blank" href="https://jam.pieter.com" style="font-family: 'system-ui', sans-serif; position: fixed; bottom: -1px; right: -1px; padding: 7px; font-size: 14px; font-weight: bold; background: #fff; color: #000; text-decoration: none; z-index: 10; border-top-left-radius: 12px; z-index: 10000; border: 1px solid #fff;">🕹️ Vibe Jam 2025</a>
</div>
</div>
<!-- Sound Controls (Removed inline styles) -->
<div class="sound-controls">
<div>
<button id="muteMusicButton">Unmute Music</button>
<label for="musicVolumeSlider">Music Vol:</label>
<input type="range" id="musicVolumeSlider" min="0" max="1" step="0.05" value="0.2">
</div>
<div>
<button id="muteSfxButton">Mute SFX</button>
<label for="sfxVolumeSlider">SFX Vol:</label>
<input type="range" id="sfxVolumeSlider" min="0" max="1" step="0.05" value="0.5">
</div>
</div>
<div id="iosInstallInstructions" class="pwa-install-instructions">
<p>To install this app on your iPhone/iPad:</p>
<ol>
<li>Tap the 'Share' button <img src="images/ios_share_icon.png" alt="iOS Share Icon" style="height: 1em; vertical-align: middle;" loading="lazy"> (usually at the bottom or top of Safari).</li>
<li>Scroll down and tap 'Add to Home Screen'.</li>
</ol>
<button id="closeInstallInstructions">Dismiss</button> {/* Optional dismiss button */}
</div>
</footer>
<!-- About Game Modal -->
<div id="aboutGameModal">
<h2 style="font-size: clamp(12px, 5vw, 14px); margin: 0 0 clamp(8px, 3vw, 15px) 0; text-align: center; color: #ffff00; line-height: 1.2;">About Missile Command</h2>
<div style="margin-bottom: clamp(10px, 3vw, 20px);">
<h3 style="color: #ffff00; margin: 6px 0; font-size: clamp(11px, 4vw, 13px); line-height: 1.3;">Game Overview</h3>
<p style="line-height: 1.5; margin: 8px 0; font-size: clamp(10px, 4vw, 11px);">Modern HTML5 canvas remake of the classic Atari game. Defend your cities from incoming attacks.</p>
</div>
<div style="margin-bottom: clamp(10px, 3vw, 20px);">
<h3 style="color: #ffff00; margin: 6px 0; font-size: clamp(11px, 4vw, 13px); line-height: 1.3;">Key Features</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px;">
<div>
<h4 style="color: #88ccff; margin: 5px 0; font-size: clamp(10px, 3.5vw, 12px); line-height: 1.3;">Core Gameplay</h4>
<ul style="padding-left: clamp(15px, 5vw, 20px); margin: 5px 0; line-height: 1.5;">
<li style="margin-bottom: 4px;">In-Game Store</li>
</ul>
</div>
<div>
<h4 style="color: #88ccff; margin: 5px 0; font-size: clamp(10px, 3.5vw, 12px); line-height: 1.3;">Special Weapons</h4>
<ul style="padding-left: clamp(15px, 5vw, 20px); margin: 5px 0; line-height: 1.5;">
<li style="margin-bottom: 4px;">Sonic Waves</li>
<li style="margin-bottom: 4px;">Mega Bombs</li>
<li style="margin-bottom: 4px;">Satellite Defense Bases</li>
</ul>
</div>
</div>
</div>
<div style="margin-bottom: clamp(10px, 3vw, 20px);">
<h3 style="color: #ffff00; margin: 6px 0; font-size: clamp(11px, 4vw, 13px); line-height: 1.3;">Controls</h3>
<p style="line-height: 1.5; margin: 8px 0; font-size: clamp(10px, 4vw, 11px);">Click/tap to fire missiles at targets. Use special weapons by clicking their icon to arm, then clicking the target area. Press Space Bar to pause/resume the game.</p>
</div>
<div style="margin-bottom: clamp(10px, 3vw, 20px);">
<h3 style="color: #ffff00; margin: 6px 0; font-size: clamp(11px, 4vw, 13px); line-height: 1.3;">Credits & Technical Info</h3>
<p style="line-height: 1.5; margin: 8px 0; font-size: clamp(10px, 4vw, 11px);"><strong>Developer:</strong> George Liu • <a href="https://github.com/centminmod/atari-missile-command" target="_blank" rel="noopener noreferrer" style="color: #00ffff;">GitHub Repository</a></p>
<p style="line-height: 1.5; margin: 8px 0; font-size: clamp(10px, 4vw, 11px);"><strong>AI Assistance:</strong> Developed initially with Google Gemini 2.5 Pro with assists from Claude 3.7 Sonnet, Quasar Alpha, Optimus Alpha, GPT 4.1</p>
<p style="line-height: 1.5; margin: 8px 0; font-size: clamp(10px, 4vw, 11px);"><strong>Infrastructure:</strong></p>
<ul style="padding-left: clamp(15px, 5vw, 20px); margin: 5px 0; line-height: 1.5;">
<li style="margin-bottom: 4px;">Hosted on Cloudflare Pages</li>
<li style="margin-bottom: 4px;">Leaderboard powered by Cloudflare Page Functions/KV</li>
<li style="margin-bottom: 4px;">Gameplay analysis via Cloudflare AI Gateway with OpenRouter AI</li>
</ul>
</div>
<button id="closeAboutButton" style="display: block; margin: 0 auto; font-family: 'Press Start 2P', cursive; background-color: #333; color: #00ff00; border: 2px solid #00ff00; padding: clamp(8px, 3vw, 12px) clamp(15px, 4vw, 20px); font-size: clamp(11px, 3vw, 14px); cursor: pointer; box-shadow: 0 0 8px #00ff00 inset; transition: background-color 0.3s, box-shadow 0.3s; border-radius: 5px; min-height: 44px; min-width: 120px;">Close</button>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>