Stanley's update

Main.html

@@ -11,17 +11,6 @@
       <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

@@ -1,5 +1,24 @@
 "use strict";
 
+
+// BGM system
+const bgmList = [
+    { normal: "music/Scary.mp3", gameover: "music/ScaryGO.mp3" },
+    { normal: "music/Fear.mp3", gameover: "music/FearGO.mp3" },
+    { normal: "music/Chill.mp3", gameover: "music/ChillGO.mp3" }
+];
+
+let currentBGM = new Audio();
+let gameOverBGM = new Audio();
+currentBGM.loop = true;
+gameOverBGM.loop = true;
+
+function pickRandomBGM() {
+    const bgm = bgmList[Math.floor(Math.random() * bgmList.length)];
+    currentBGM.src = bgm.normal;
+    gameOverBGM.src = bgm.gameover;
+}
+
 var canvasWidth = 1280;
 var canvasHeight = 650;
 var c = undefined;
@@ -8,8 +27,9 @@ var gameStarted = false;
 var musicMuted = false;
 /// 90 FPS (Cause I got motion sickness while playing our game fr)
 let lastFrameTime = 0;
-const frameInterval = 1000 / 30;   // 90 FPS limit
+const frameInterval = 1000 / 80;   // 90 FPS limit right now it's capped at 80
 // 90 FPS mark (change the const x/x to what fps you want)
+// Changing FPS actually makes the game slower ya or faster, tergantung(?)
 
 var game = {
   level: 1,
@@ -39,36 +59,39 @@ bg1.src = "img/bg_1.png";
 var bg2 = new Image();
 bg2.src = "img/bg_2.png";
 
-
 var enemy1 = new Image();
 enemy1.src = "img/alien_0.png";
 
-
 var enemyImgArray = [];
 enemyImgArray.length = 4;
 
-//Stanley
+///Key listen
+let audioStarted = false;
 
+window.addEventListener("keydown", () => {
+    if (!audioStarted) {
+        currentBGM.play();
+        audioStarted = true;
+    }
+});
+
+
+
+//Stanley
 for (var i = 0; i < enemyImgArray.length; i++) {
     enemyImgArray[i] = new Image();
     enemyImgArray[i].src = 'img/alien_' + [i] + '.png';
 }
 
-
-
-
 var missilesArray = [];
-
-
-
 var enemyShipArray = [];
 
-var backgroundMusic = document.createElement("audio");
-backgroundMusic.src = "music/Muriel-BobbyRichards.mp3";
-
 var laser = document.createElement("audio");
 laser.src = "music/laser2.mp3";
 
+var explosion_enemy = document.createElement("audio");
+explosion_enemy.src = "music/explosion-small.mp3"
+
 var planetImages = [];  
 for (let i = 1; i <= 4; i++) {
   let img = new Image();
@@ -83,40 +106,28 @@ window.onload = function () {
 function init() {
   c = document.getElementById("canvas");
   ctx = c.getContext("2d");
+
   document.addEventListener("keydown", keyDownPressed, false);
   document.addEventListener("keyup", keyUpPressed, false);
-  gameLoop();
 
-  document.getElementById("startBtn").onclick = () => {
-    document.getElementById("startMenu").style.display = "none";
   gameStarted = true;     
-    gameLoop();
+  //randomb bgm yg kita punya        we have 3 songs///    
-  };
+  pickRandomBGM();
+  currentBGM.volume = 1;
+  currentBGM.play();
 
-  document.getElementById("musicBtn").onclick = () => {
+  requestAnimationFrame(gameLoop);    
-    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();
-  };
 }
 
 //Aku ganti function game loop that follows the 90FPS Cap rule 
 function gameLoop(timestamp) {
     if (!gameStarted) return;
 
+    if (game.gameOver) {
+        drawGameOver();
+        return;
+    }
+
     if (timestamp - lastFrameTime >= frameInterval) {
         lastFrameTime = timestamp;
 
@@ -150,7 +161,6 @@ function keyDownPressed(e) {
     keys.fire = true;
     missilesArray.push(new LaserBullet(player1.x + 150, player1.y + 50));
 
-
     laser.currentTime = 0;
     laser.play();
     laser.volume = 0.4;
@@ -186,6 +196,9 @@ function updateGame() {
   addShips();
 
   player1.update();
+
+  if (player1.invincible > 0) player1.invincible--;
+
   spawnPlanet();
   if (currentPlanet) currentPlanet.update();
   game.frames++;
@@ -196,7 +209,6 @@ function drawGame() {
 
     player1.draw();
 
-    // Enemy ships
     for (var i = 0; i < enemyShipArray.length; i++) {
         var s = enemyShipArray[i];
         s.draw();
@@ -205,15 +217,58 @@ function drawGame() {
         if (s.x < -200) {
             enemyShipArray.splice(i, 1);
             i--;
+            continue;
+        }
+
+        if (Tabrakan(player1, s)) {
+            if (player1.invincible <= 0) {
+
+                player1.lives--;
+                player1.invincible = 60;
+                //self note: change this later
+                explosion_enemy.play();
+                player1.x = 15;
+                player1.y = 300;
+                game.frames = 0;
+              
+                enemyShipArray.splice(i, 1);
+                i--;
+
+                if (player1.lives <= 0) {
+                    game.gameOver = true;
+                    crossfadeToGameOver();
+
+                }
+
+                continue;
+            }
         }
     }
 
-    // Missiles
     for (var i = 0; i < missilesArray.length; i++) {
         var m = missilesArray[i];
         m.draw();
         m.update();
 
+
+
+
+        // Hit detecttion
+            for (var j = 0; j < enemyShipArray.length; j++) {
+        var en = enemyShipArray[j];
+
+        if (Tabrakan(m, en)) {
+            player1.score += 100;
+            explosion_enemy.play();
+            missilesArray.splice(i, 1);
+            enemyShipArray.splice(j, 1);
+        } 
+    } 
+        //Hits end 
+
+
+
+
         if (m.x > canvasWidth) {
             missilesArray.splice(i, 1);
             i--;
@@ -224,15 +279,6 @@ function drawGame() {
     drawNewText("Player Lives: " + player1.lives, 1100, 610, "white");
 }
 
-
-
-function gameLoop(timestamp) {
-  clearGame();
-  updateGame();
-  drawGame();
-  window.requestAnimationFrame(gameLoop);
-}
-
 class PlayerObject {
   constructor(x, y) {
     this.x = x;
@@ -244,6 +290,7 @@ class PlayerObject {
     this.lives = 3;
     this.score = 0;
     this.health = 100;
+    this.invincible = 0;
   }
   draw() {
     ctx.save();
@@ -365,14 +412,12 @@ class LaserBullet {
   }
 }
 
-
 class EnemyObj {
   constructor(x, y, speed, img) {
     this.x = x;
     this.y = y;
     this.width = 170;
     this.height = 105;
-    //gambar
     this.image = img;
     this.speed = speed;
     this.health = 100;
@@ -436,3 +481,45 @@ function addShips() {
 
     }
 }
+
+function Tabrakan(o, p){
+    if (o.x + o.width > p.x &&
+        o.x < p.x + p.width &&
+        o.y + o.height > p.y &&
+        o.y < p.y + p.height) {
+        return true;
+    }
+    return false;
+}
+
+function drawGameOver() {
+    ctx.fillStyle = "rgba(0,0,0,0.7)";
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+    ctx.font = "80px Arial";
+    ctx.fillStyle = "red";
+    ctx.textAlign = "center";
+    ctx.fillText("GAME OVER", canvasWidth / 2, canvasHeight / 2 - 50);
+
+    ctx.font = "40px Arial";
+    ctx.fillStyle = "white";
+    ctx.fillText("Refresh to Restart", canvasWidth / 2, canvasHeight / 2 + 30);
+}
+
+function crossfadeToGameOver() {
+    let fadeSpeed = 0.02; // smaller = slower fade
+    gameOverBGM.volume = 0;
+    gameOverBGM.play();
+
+    let fadeInterval = setInterval(() => {
+        currentBGM.volume -= fadeSpeed;
+        gameOverBGM.volume += fadeSpeed;
+
+        if (currentBGM.volume <= 0) {
+            currentBGM.pause();
+            currentBGM.volume = 1;
+            clearInterval(fadeInterval);
+        }
+    }, 1000 / 30); // 30 updates per second
+}
+