Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cosmic Defender - Space Shooter Game</title> | |
| <meta name="description" content="An exciting space shooter game with multiple levels, power-ups, and intense gameplay"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <nav> | |
| <div class="logo">Cosmic Defender</div> | |
| <div class="nav-links"> | |
| <a href="#" id="playBtn">Play</a> | |
| <a href="#" id="instructionsBtn">Instructions</a> | |
| <a href="#" id="leaderboardBtn">Leaderboard</a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| </nav> | |
| </header> | |
| <main> | |
| <div id="gameContainer"> | |
| <div id="startScreen" class="screen"> | |
| <h1>Cosmic Defender</h1> | |
| <p>Defend Earth from the alien invasion!</p> | |
| <div class="menu-buttons"> | |
| <button id="startGameBtn" class="primary-btn">Start Game</button> | |
| <button id="difficultyBtn" class="secondary-btn">Difficulty: Normal</button> | |
| <button id="soundBtn" class="secondary-btn">Sound: ON</button> | |
| </div> | |
| <div class="high-score"> | |
| High Score: <span id="highScoreValue">0</span> | |
| </div> | |
| </div> | |
| <div id="gameScreen" class="screen hidden"> | |
| <div class="game-ui"> | |
| <div class="score-display">Score: <span id="score">0</span></div> | |
| <div class="lives-display">Lives: <span id="lives">3</span></div> | |
| <div class="level-display">Level: <span id="level">1</span></div> | |
| <div class="power-display">Power: <span id="powerLevel">1</span></div> | |
| </div> | |
| <canvas id="gameCanvas"></canvas> | |
| <div class="game-over-overlay hidden" id="gameOverOverlay"> | |
| <h2>Game Over</h2> | |
| <p>Final Score: <span id="finalScore">0</span></p> | |
| <button id="restartBtn" class="primary-btn">Play Again</button> | |
| </div> | |
| <div class="level-complete-overlay hidden" id="levelCompleteOverlay"> | |
| <h2>Level Complete!</h2> | |
| <p>Score: <span id="levelScore">0</span></p> | |
| <button id="nextLevelBtn" class="primary-btn">Next Level</button> | |
| </div> | |
| </div> | |
| <div id="instructionsScreen" class="screen hidden"> | |
| <h2>How to Play</h2> | |
| <div class="instructions-content"> | |
| <div class="instruction-item"> | |
| <span class="key">←→</span> | |
| <span>Move spaceship</span> | |
| </div> | |
| <div class="instruction-item"> | |
| <span class="key">SPACE</span> | |
| <span>Fire lasers</span> | |
| </div> | |
| <div class="instruction-item"> | |
| <span class="key">P</span> | |
| <span>Pause game</span> | |
| </div> | |
| <div class="instruction-item"> | |
| <span class="key">M</span> | |
| <span>Mute/Unmute</span> | |
| </div> | |
| </div> | |
| <div class="power-ups-info"> | |
| <h3>Power-Ups</h3> | |
| <div class="power-up-item"> | |
| <div class="power-up-icon rapid-fire"></div> | |
| <span>Rapid Fire - Increased fire rate</span> | |
| </div> | |
| <div class="power-up-item"> | |
| <div class="power-up-icon triple-shot"></div> | |
| <span>Triple Shot - Fire 3 lasers</span> | |
| </div> | |
| <div class="power-up-item"> | |
| <div class="power-up-icon shield"></div> | |
| <span>Shield - Temporary invincibility</span> | |
| </div> | |
| <div class="power-up-item"> | |
| <div class="power-up-icon life"></div> | |
| <span>Extra Life - Gain one life</span> | |
| </div> | |
| </div> | |
| <button id="backFromInstructions" class="primary-btn">Back</button> | |
| </div> | |
| <div id="leaderboardScreen" class="screen hidden"> | |
| <h2>Leaderboard</h2> | |
| <div class="leaderboard-list" id="leaderboardList"> | |
| <!-- Leaderboard entries will be inserted here --> | |
| </div> | |
| <button id="backFromLeaderboard" class="primary-btn">Back</button> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>© 2024 Cosmic Defender. All rights reserved.</p> | |
| </footer> | |
| <script src="assets/js/game.js"></script> | |
| </body> | |
| </html> |