d49bed1541
- Add interval management system to fix memory leaks and cleanup bugs - Implement win condition (survive 3 minutes) with victory screen - Add pause functionality (ESC/P key) with pause overlay menu - Add progressive difficulty (enemy speed/spawn rate increase over time) - Implement enemy variety: Normal, Fast (green), and Tank (larger, 2 HP) - Add boss fights every 60 seconds with health bar - Add power-ups: Extra Life, Triple Shot, Shield (10-15s spawn interval) - Implement Hardcore Mode (1 life, faster enemies, no power-ups) - Add high score system with localStorage persistence - Add background music support with volume control - Add visual feedback (player hit flash, enemy death animation, shield glow) - Add mobile touch controls (auto-detected on touch devices) - Improve collision detection using getBoundingClientRect - Add responsive styles for mobile devices
75 lines
2.8 KiB
HTML
75 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<title>Scriptocalypse</title>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div id="game-intro">
|
|
<img src="./images/logo.png" alt="" class="logo-img" />
|
|
<br />
|
|
<div class="button-container">
|
|
<button id="start-button">Start Game</button>
|
|
<button id="hardcore-button">Hardcore Mode</button>
|
|
</div>
|
|
<p id="high-score-display">High Score: 0<br>Hardcore High: 0</p>
|
|
<h2>Use the arrows keys to move and spacebar to shoot, try survive if you are able.</h2>
|
|
<p class="controls-hint">Press ESC or P to pause</p>
|
|
<img src="./images/arrows.png" />
|
|
</div>
|
|
|
|
<div id="gameArea">
|
|
<div id="volume-control">
|
|
<label for="volume">Volume:</label>
|
|
<input type="range" id="volume" min="0" max="1" step="0.1" value="0.4">
|
|
</div>
|
|
<div id="stats">
|
|
<h2>Stats</h2>
|
|
<h2 id="timer"></h2>
|
|
<h2>Lives: <span id="lives">3</span></h2>
|
|
<h2>Score: <span id="score">0</span></h2>
|
|
</div>
|
|
|
|
<!-- Pause Overlay -->
|
|
<div id="pause-overlay">
|
|
<div class="pause-content">
|
|
<h1>PAUSED</h1>
|
|
<button id="resume-button">Resume</button>
|
|
<button id="main-menu-button">Main Menu</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="game-end">
|
|
<h1>Game Over</h1>
|
|
<p>Final Score: <span id="final-score">0</span></p>
|
|
<p><span id="final-time">Time elapsed: 0:00</span></p>
|
|
<p id="final-high-score">High Score: 0</p>
|
|
<button id="restart-button">Restart</button>
|
|
</div>
|
|
|
|
<div id="game-victory">
|
|
<h1>VICTORY!</h1>
|
|
<p>You survived the apocalypse!</p>
|
|
<p>Final Score: <span id="victory-score">0</span></p>
|
|
<p><span id="victory-time">Time survived: 3:00</span></p>
|
|
<p id="victory-high-score">High Score: 0</p>
|
|
<button id="victory-restart-button">Play Again</button>
|
|
</div>
|
|
|
|
<!-- Touch Controls for Mobile -->
|
|
<div id="touch-controls">
|
|
<div class="touch-move">
|
|
<button id="touch-up" class="touch-btn">UP</button>
|
|
<button id="touch-down" class="touch-btn">DOWN</button>
|
|
</div>
|
|
<button id="touch-shoot" class="touch-btn touch-shoot-btn">SHOOT</button>
|
|
</div>
|
|
</main>
|
|
<script type="text/javascript" src="script.js"></script>
|
|
</body>
|
|
</html>
|