114 lines
3.3 KiB
HTML
114 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Space Game</title>
|
|
<link rel="stylesheet" href="Style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mainMenu">
|
|
<div class="menu-content">
|
|
<h1 class="game-title">
|
|
<span class="title-word">SPACE</span>
|
|
<span class="title-word">ODYSSEY</span>
|
|
</h1>
|
|
|
|
<div class="menu-buttons">
|
|
<button class="menu-btn" id="startBtn">
|
|
<span class="btn-icon">▶</span>
|
|
<span class="btn-text">START GAME</span>
|
|
</button>
|
|
|
|
<button class="menu-btn" id="optionBtn">
|
|
<span class="btn-icon">⚙</span>
|
|
<span class="btn-text">OPTIONS</span>
|
|
</button>
|
|
|
|
<button class="menu-btn" id="leaderboardBtn">
|
|
<span class="btn-icon">🏆</span>
|
|
<span class="btn-text">LEADERBOARD</span>
|
|
</button>
|
|
|
|
<button class="menu-btn" id="exitBtn">
|
|
<span class="btn-icon">✕</span>
|
|
<span class="btn-text">EXIT</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="footer-info">
|
|
<p>WASD - Move | Space - Fire | Q - Missile | Shift - Bomb | P - Pause</p>
|
|
</div>
|
|
<div class="footer-info">
|
|
<p>Stanley Timothy Gunawan - 5803025021 | Jeremy Christian - 5803025025 | Philippo Mariernest A.B - 58030250</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="optionsMenu" style="display: none;">
|
|
<div class="menu-content">
|
|
<h2 class="options-title">OPTIONS</h2>
|
|
|
|
<div class="options-container">
|
|
<div class="option-item">
|
|
<label>Music</label>
|
|
<div class="button-group">
|
|
<button class="toggle-btn active" data-music="on">ENABLE</button>
|
|
<button class="toggle-btn" data-music="off">DISABLE</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<label>Sound Effects</label>
|
|
<div class="button-group">
|
|
<button class="toggle-btn active" data-sfx="on">ENABLE</button>
|
|
<button class="toggle-btn" data-sfx="off">DISABLE</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="menu-btn back-btn" id="backBtn">
|
|
<span class="btn-icon">←</span>
|
|
<span class="btn-text">BACK</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="leaderboardMenu" style="display: none;">
|
|
<div class="menu-content" style="min-width: 800px;">
|
|
<h2 class="options-title">TOP PILOTS</h2>
|
|
|
|
<div class="leaderboard-container">
|
|
<table class="leaderboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>RANK</th>
|
|
<th>PILOT NAME</th>
|
|
<th>LEVEL</th>
|
|
<th>SCORE</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="leaderboardList">
|
|
<tr><td colspan="4">Loading Flight Data...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<button class="menu-btn back-btn" id="lbBackBtn">
|
|
<span class="btn-icon">←</span>
|
|
<span class="btn-text">BACK</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="gameContainer" style="display: none;">
|
|
<canvas id="canvas"></canvas>
|
|
</div>
|
|
|
|
<script src="Script.js"></script>
|
|
</body>
|
|
|
|
</html> |