feat: add sounds after game end

src/css/game.css

@@ -131,7 +131,6 @@
     display: flex;
     flex-direction: column;
     border: 10px solid white;
-    border-radius: 10px;
 }
 
 .container-first .content .quiz h2 {
@@ -142,23 +141,16 @@
 }
 
 .container-first #scoreAlert {
-    text-align: center;
+    margin-bottom: 30px;
     padding: 10px;
     color: #ffdf12;
     font-size: 40px;
-    bottom: 22px;
-    background-color: #101010f5;
+    bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     position: absolute;
 }
 
-.container-first #scoreAlert.border {
-    width: 550px;
-    border: 6px solid white;
-    border-radius: 10px;
-}
-
 .container-first .content .quiz #btn-answer {
     color: #ffdf12;
     display: flex;
@@ -245,20 +237,3 @@
         transform: translate(-50%, -150%) scale(1.5)
     }
 }
-
-.dmg{
-    width: 800px;
-    
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-
-    z-index: 9999;
-    pointer-events: none;
-
-    display: none;
-    image-rendering: pixelated;
-    background-repeat: no-repeat;
-    background-size: cover;
-}

src/css/style.css

@@ -132,11 +132,15 @@ input:-webkit-autofill {
     justify-content: space-around;
     align-items: center;
     height: 100dvh;
+    /* Hapus properti background dari sini dan pindahkan ke ::before */
+
+    /* Tambahkan posisi relatif agar pseudo-element bisa diposisikan absolut di dalamnya */
     position: relative;
+    /* Pastikan konten di dalam container ada di atas latar */
     z-index: 1;
 }
 
-
+/* Pseudo-element untuk menampung gambar latar transparan */
 .container-board::before {
     content: "";
     position: absolute;
@@ -144,12 +148,19 @@ input:-webkit-autofill {
     left: 0;
     right: 0;
     bottom: 0;
+
+    /* Pindahkan properti background Anda ke sini */
     background-image: url(/assets/Design/CampFire8WESFIX!-export.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     image-rendering: pixelated;
+
+    /* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */
     opacity: 1;
+    /* Contoh nilai 40% transparan */
+
+    /* Pindahkan latar ini ke lapisan paling bawah */
     z-index: -1;
 }
 

src/game/firstperson.html

@@ -21,6 +21,7 @@
         <div class="content">
             <div class="boss">
                 <img id="boss" src="/assets/Design/PYTHON-BOSSFIGHTMODEFINALt.gif" alt="">
+                <img id="dmg" class="dmg" src="/assets/Design/damageeffectNEWSLASH.gif"/>
             </div>
             <div class="hearts" id="hrt">
                 <img id="h1" src="/assets/Design/Heartfull.png">
@@ -37,7 +38,6 @@
                 </div>
             </div>
             <h2 id="scoreAlert"></h2>
-            <img id="dmg" class="dmg" src="/assets/Design/damageeffectNEWSLASH.gif"/>
         </div>
     </div>
     <script type="module" src="/js/firstperson.js"></script>

src/js/firstperson.js

@@ -129,7 +129,6 @@ function showScore(){
     bgm.play()
     setTimeout(()=> {
         const alerts = document.getElementById("scoreAlert")
-        alerts.classList.add("border")
         alerts.textContent = `you scored ${score} out of 200 !`;
     }, 200);
     setTimeout(()=> {