pindah posisi teks sma tengain map

GameLogic.js

@@ -235,8 +235,10 @@ function PenambahanTembok() {
 }
 
       //set dan update score
-      function UpdateScore(amount) {
+      function UpdateScore(amount, addToScore = true) {
+        if (addToScore) {
             score = amount > 0 ? score + amount : 0;
+        }
         console.log("UPDATE SCORE , score:",score);
         highscore = score > highscore ? score : highscore;
         Text.innerHTML =
@@ -247,8 +249,10 @@ function PenambahanTembok() {
           "<br>Speed: " +
           speed;
 
+        if (addToScore) {
             PenambahanTembok();
         }
+}
 
       //tampilin gameover
       function GameOver() {
@@ -366,7 +370,7 @@ function IntiGame() {
         if (index === 0) {
             if (cell.x === Apel.x && cell.y === Apel.y) {
                 Ular.maxCells += 1;
-                UpdateScore(1);
+                UpdateScore(1, true);
                 RandomizeApel();
             }
 
@@ -454,50 +458,18 @@ function InputKeyboard() {
             Ular.dy = 0;
         }
 
-        if (e.code === "KeyE" || e.code == "KeyQ")
+        if (e.code === "KeyE" || e.code == "KeyQ") {
             speed =
-                e.code == "KeyE" && speed > 2
+                e.code == "KeyE" && speed > 5
                     ? speed - 1
-                    : e.code == "KeyQ" && speed < 30
+                    : e.code == "KeyQ" && speed < 20
                     ? speed + 1
                     : speed;
+          // Panggil UpdateScore hanya untuk memperbarui teks di layar, bukan skornya
+          UpdateScore(0, false);
+      }
     });
 }
 
-// nti ae la daud
-// function kirimSkorKeServer(skor, GameMode) {
-//     console.log(`Mengirim skor ${skor} (Mode: ${GameMode}) ke server...`);
-
-//     fetch('score.php', { 
-//         method: 'POST',
-//         headers: {
-//             'Content-Type': 'application/json',
-//         },
-//         body: JSON.stringify({
-//             score: skor,
-//             mode: GameMode
-//         }),
-//     })
-//     .then(response => {
-//         if (!response.ok) {
-//               return response.json().then(error => { throw new Error(error.message || 'Gagal menyimpan skor'); });
-//         }
-//         return response.json();
-//     })
-//     .then(data => {
-//         if (data.status === 'success') {
-//             console.log('✅ Berhasil:', data.message);
-//             if (data.message.includes('Highscore baru')) {
-//                  highscore = skor;
-//                  UpdateScore(0);
-//             }
-//         } else {
-//             console.error('❌ Error Server:', data.message);
-//         }
-//     })
-//     .catch((error) => {
-//         console.error('⚠️ Error Jaringan atau Proses:', error.message);
-//     });
-// }
 InputKeyboard();
 gameLoop();

GameStyle.css

@@ -4,7 +4,7 @@
         text-align: left;
         font-family: "Pixelify Sans", sans-serif;
         font-optical-sizing: auto;
-        font-weight: 400;
+        font-weight: 900;
         font-style: normal;
         font-size: 24px;
       }
@@ -27,8 +27,9 @@
         color: white;
         height: 100%;
         display: flex;
-        align-items: left;
-        justify-content: left;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
         padding-bottom: 20px;
         padding-top: 20px;
         background-image: url("halamanFull/cherryBlossom.png");
@@ -43,23 +44,15 @@
         background: rgba(0,0,0, var(-- overlay-opacity, 0.4));  /* 0.4 = opacity overlay */
         pointer-events: none;
       }
-      .starting {
-        border: 2px solid pink;
-        position: absolute;
-        top: 21px;
-        left: 51px;
+      .game-container {
+        position: relative; 
         width: 1056px;
         height: 480px;
-        background-color: rgba(100, 100, 100, 0.8);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 10;
       }
-      #start {
+      .starting {
         position: absolute;
-        top: 21px;
-        left: 51px;
+        top: 0;
+        left: 0;
         width: 1056px;
         height: 480px;
         background-color: rgba(100, 100, 100, 0.8);
@@ -105,39 +98,6 @@
       #keluar:hover {
         background-color: #d32f2f;
       }
-      .starting {
-        position: absolute;
-        top: 21px;
-        left: 51px;
-        width: 1056px;
-        height: 480px;
-        background-color: rgba(100, 100, 100, 0.8);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 10;
-      }
-      #start {
-        position: absolute;
-        top: 21px;
-        left: 51px;
-        width: 1056px;
-        height: 480px;
-        background-color: rgba(100, 100, 100, 0.8);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 10;
-      }
-      .popAwal {
-        text-align: center;
-        border-radius: 10px;
-        background-color: rgb(50, 50, 50);
-        padding: 30px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-        width: 80%;
-        max-width: 400px;
-      }
       .popAwal h1 {
         margin-left: 30px;
         margin-right: 25px;
@@ -151,7 +111,7 @@
       .icon {
         width: 70px;
         height: 70px;
-        background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Nazi_Swastika.svg/2048px-Nazi_Swastika.svg.png");
+        background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0u9JtOtWHBixNexCHGzcnrI3bbe1SxzjJtQ&s");
         background-size: cover;
         margin-right: 20px;
         margin-left: 20px;
@@ -168,7 +128,15 @@
       .text {
         padding-top: 30px;
         padding-left: 50px;
-        color: white;
+        color: rgb(0, 0, 0);
+        font-weight: 90px;
+      }
+      .text-spd {
+        padding-bottom: 0px;
+        padding-left: 50px;
+        font-size: 28px;
+        color: rgb(0, 0, 0);
+        font-weight: 1000;
       }
       #gameover {
         color: red;
@@ -189,7 +157,7 @@
         padding: 15px 30px;
         font-size: 20px;
         cursor: pointer;
-        color: rgb(255, 255, 255);
+        color: rgb(0, 0, 0);
         border: none;
         border-radius: 5px;
         margin: 10px 5px;

game.html

@@ -21,7 +21,11 @@
 <img src="" alt="">
     <!-- main konten -->
     <div class="HalamanFull">
+        <div class="text-spd">UP & DOWN SPD: E Q<br /><br /></div>
+      <!-- Kontainer baru untuk game dan overlay-nya -->
+      <div class="game-container">
         <canvas width="1056" height="480" id="game"></canvas>
+
         <div id="gameover-overlay" class="starting" style="display: none">
           <div class="popAwal1">
             <h1 style="color: red" id="gameover-title">YOU DIED</h1>
@@ -30,10 +34,11 @@
             <a href="http://localhost/uas_sem_1/index.php">
               <button id="keluar" class="">Keluar?</button>
             </a>
+          </div>
+        </div>
 
-        </div>
-      </div>
         <div id="gameover" class="gameover"></div>
+
         <div id="start" class="starting">
           <div class="popAwal">
             <h1>Start Game?</h1>
@@ -42,10 +47,12 @@
             <button id="mode-tambahan" class="modegame">Normal++</button>
           </div>
         </div>
+      </div>
+
       <div>
-        <!-- <div class="text">Controls: <br />Movement: W A S D <br /><br /></div> -->
         <div id="text" class="text"></div>
       </div>
+
     </div>
 
     <!-- footer -->