Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok09-SPOILER

Script.js

@@ -1355,24 +1355,133 @@ class Explosion {
 }
 
 function drawGameOver() {
-  ctx.fillStyle = "rgba(53, 0, 0, 0.7)";
+  // Dark overlay with gradient
+  const gradient = ctx.createRadialGradient(
+    canvasWidth / 2,
+    canvasHeight / 2,
+    0,
+    canvasWidth / 2,
+    canvasHeight / 2,
+    canvasWidth / 1.5
+  );
+  gradient.addColorStop(0, "rgba(10, 0, 0, 0.85)");
+  gradient.addColorStop(0.5, "rgba(30, 0, 10, 0.92)");
+  gradient.addColorStop(1, "rgba(0, 0, 0, 0.97)");
+  ctx.fillStyle = gradient;
   ctx.fillRect(0, 0, canvasWidth, canvasHeight);
 
-  ctx.font = "80px Arial";
+  // Animated pulsing effect
-  ctx.fillStyle = "red";
+  const pulseTime = Date.now() / 1000;
+  const pulse = Math.sin(pulseTime * 2) * 0.15 + 0.85;
+
+  ctx.save();
   ctx.textAlign = "center";
-  ctx.fillText("GAME OVER", canvasWidth / 2, canvasHeight / 2 - 50);
 
-  ctx.font = "40px Arial";
+  // "GAME OVER" main title with glowing effect
-  ctx.fillStyle = "white";
+  ctx.font = "900 100px Orbitron, Arial";
-  ctx.fillText(
+
-    "Final Score: " + player1.score,
+  // Outer glow layers
-    canvasWidth / 2,
+  for (let i = 30; i > 0; i -= 3) {
-    canvasHeight / 2 + 20
+    ctx.shadowColor = `rgba(255, 50, 50, ${(30 - i) / 100})`;
+    ctx.shadowBlur = i;
+    ctx.fillStyle = `rgba(255, 0, 0, ${(30 - i) / 100})`;
+    ctx.fillText("GAME OVER", canvasWidth / 2, canvasHeight / 2 - 120);
+  }
+
+  // Main title gradient
+  const titleGradient = ctx.createLinearGradient(
+    canvasWidth / 2 - 300,
+    0,
+    canvasWidth / 2 + 300,
+    0
   );
-  ctx.fillText("Refresh to Restart", canvasWidth / 2, canvasHeight / 2 + 70);
+  titleGradient.addColorStop(0, "#ff0033");
+  titleGradient.addColorStop(0.5, "#ff3366");
+  titleGradient.addColorStop(1, "#ff0033");
 
-  ctx.textAlign = "left";
+  ctx.shadowColor = "rgba(255, 51, 102, 0.8)";
+  ctx.shadowBlur = 40 * pulse;
+  ctx.fillStyle = titleGradient;
+  ctx.fillText("GAME OVER", canvasWidth / 2, canvasHeight / 2 - 120);
+
+  // Reset shadow
+  ctx.shadowBlur = 0;
+
+  // Statistics panel background
+  const panelY = canvasHeight / 2 - 20;
+  const panelWidth = 500;
+  const panelHeight = 200;
+  const panelX = canvasWidth / 2 - panelWidth / 2;
+
+  // Panel border glow
+  ctx.strokeStyle = "rgba(0, 234, 255, 0.6)";
+  ctx.lineWidth = 3;
+  ctx.shadowColor = "rgba(0, 234, 255, 0.8)";
+  ctx.shadowBlur = 20;
+  ctx.strokeRect(panelX, panelY, panelWidth, panelHeight);
+
+  // Panel background
+  const panelGradient = ctx.createLinearGradient(
+    panelX,
+    panelY,
+    panelX,
+    panelY + panelHeight
+  );
+  panelGradient.addColorStop(0, "rgba(10, 10, 30, 0.85)");
+  panelGradient.addColorStop(1, "rgba(20, 20, 40, 0.9)");
+  ctx.fillStyle = panelGradient;
+  ctx.fillRect(panelX, panelY, panelWidth, panelHeight);
+
+  ctx.shadowBlur = 0;
+
+  // Statistics text - centered
+  ctx.textAlign = "center";
+
+  // "Your score:" label
+  ctx.font = "700 28px Orbitron, Arial";
+  ctx.fillStyle = "#00eaff";
+  ctx.fillText("Your score:", canvasWidth / 2, panelY + 70);
+
+  // Score value
+  ctx.font = "900 64px Orbitron, Arial";
+  ctx.shadowColor = "rgba(255, 255, 255, 0.5)";
+  ctx.shadowBlur = 15;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillText(player1.score.toString(), canvasWidth / 2, panelY + 145);
+  ctx.shadowBlur = 0;
+
+  // Restart instruction with pulsing effect
+  ctx.textAlign = "center";
+  ctx.font = "700 28px Orbitron, Arial";
+  const instructionAlpha = Math.sin(pulseTime * 3) * 0.3 + 0.7;
+  ctx.fillStyle = `rgba(0, 234, 255, ${instructionAlpha})`;
+  ctx.shadowColor = "rgba(0, 234, 255, 0.6)";
+  ctx.shadowBlur = 15 * pulse;
+  ctx.fillText("PRESS F5 TO RESTART", canvasWidth / 2, panelY + panelHeight + 60);
+
+  // Additional decorative elements
+  ctx.shadowBlur = 0;
+
+  // Corner decorations (top-left and bottom-right)
+  const cornerSize = 40;
+  ctx.strokeStyle = "rgba(255, 51, 102, 0.5)";
+  ctx.lineWidth = 3;
+
+  // Top-left corner
+  ctx.beginPath();
+  ctx.moveTo(panelX - 10, panelY - 10 + cornerSize);
+  ctx.lineTo(panelX - 10, panelY - 10);
+  ctx.lineTo(panelX - 10 + cornerSize, panelY - 10);
+  ctx.stroke();
+
+  // Bottom-right corner
+  ctx.beginPath();
+  ctx.moveTo(panelX + panelWidth + 10, panelY + panelHeight + 10 - cornerSize);
+  ctx.lineTo(panelX + panelWidth + 10, panelY + panelHeight + 10);
+  ctx.lineTo(panelX + panelWidth + 10 - cornerSize, panelY + panelHeight + 10);
+  ctx.stroke();
+
+  ctx.restore();
 }
 
 function drawPauseOverlay() {
@@ -1717,7 +1826,7 @@ musicBtns.forEach(btn => {
       if (gameSettings.musicEnabled) {
         currentBGM.volume = 1;
         if (!game.gameOver && gameStarted) {
-          currentBGM.play().catch(() => {});
+          currentBGM.play().catch(() => { });
         }
       } else {
         currentBGM.volume = 0;
@@ -1775,7 +1884,7 @@ function playSound(audio) {
   if (gameSettings.sfxEnabled) {
     audio.volume = 0.3;
     audio.currentTime = 0;
-    audio.play().catch(() => {});
+    audio.play().catch(() => { });
   }
 }
 
@@ -1827,7 +1936,7 @@ function returnToMenu() {
   particles = [];
 
   player1 = new PlayerObject(100, 300);
-  player1.lives = 6;
+  player1.lives = 1;
   player1.score = 0;
 
   respawnCounter = 0;