Start Menu

Main.html

@@ -10,6 +10,18 @@
     <div id="game">
       <canvas id="canvas" height="650" width="1280"></canvas>
     </div>
+
+
+
+    <div id="startMenu">
+    <h1 class="title">GALAXY STRIKER</h1>
+
+    <button class="menuButton" id="startBtn">Start</button>
+    <button class="menuButton" id="optionsBtn">Options</button>
+    <button class="menuButton" id="musicBtn">Music: ON</button>
+    <button class="menuButton" id="exitBtn">Exit</button>
+</div>
+
     <script src="Script.js"></script>
 </body>
 </html>

Script.js

@@ -84,8 +84,61 @@ function init() {
     document.addEventListener('keydown', keyDownPressed, false);
     document.addEventListener('keyup', keyUpPressed, false);
     gameLoop();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    document.getElementById("startBtn").onclick = () => {
+      document.getElementById("startMenu").style.display = "none";
+      gameStarted = true;
+      gameLoop();
+    };
+
+    document.getElementById("musicBtn").onclick = () => {
+      musicMuted = !musicMuted;
+      backgroundMusic.muted = musicMuted;
+
+      document.getElementById("musicBtn").innerText = musicMuted
+        ? "Music: OFF"
+        : "Music: ON";
+    };
+
+    document.getElementById("optionsBtn").onclick = () => {
+      alert(
+        "Options menu belum dibuat. Kamu bisa tambah difficulty, sensitivity, dll."
+      );
+    };
+
+    document.getElementById("exitBtn").onclick = () => {
+      window.close();
+    };
+
 }
 
+
+
+function gameLoop() {
+  if (!gameStarted) return;
+
+  clearGame();
+  updateGame();
+  drawGame();
+  requestAnimationFrame(gameLoop);
+}
+
+
 function keyDownPressed(e) {
     if (e.keyCode == 87) {
         keys.up = true;

Style.css

@@ -23,3 +23,52 @@ body {
     margin: 0px;
     background-color: rgb(0, 0, 0);
 }
+
+
+
+
+
+
+
+
+
+
+
+#startMenu {
+    position: absolute;
+    width: 1280px;
+    height: 650px;
+    top: 0;
+    left: 0;
+    background: rgba(0,0,0,0.85);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    font-family: Arial, sans-serif;
+}
+
+.title {
+    font-size: 60px;
+    margin-bottom: 50px;
+    color: white;
+    letter-spacing: 3px;
+}
+
+.menuButton {
+    font-size: 30px;
+    padding: 10px 40px;
+    margin: 10px;
+    cursor: pointer;
+    background: #222;
+    border: 2px solid white;
+    color: white;
+    border-radius: 10px;
+    transition: 0.2s;
+}
+
+.menuButton:hover {
+    background: white;
+    color: black;
+}