GameLogic.js

@@ -1,4 +1,4 @@
-// //bagian tempat main ama buat generate game 2d
+      //bagian tempat main ama buat generate game 2d
       var canvas = document.getElementById("game");
       var content = canvas.getContext("2d");
       const Text = document.getElementById("text");
@@ -20,56 +20,26 @@ var ModeH = false;
       const persiapan = document.getElementById("start");
 
       //generate gambar external
+      var KepalaUlarImage = new Image();
+      KepalaUlarImage.src = "image/KepalaHorizontalKanan.png";
+      var KepalAtas = new Image();
+      KepalAtas.src = "image/KepalaVertikalAtas.png";
+      var KepalaBawah = new Image();
+      KepalaBawah.src = "image/KepalaVertikalBawah.png";
+      var KepalaKiri = new Image();
+      KepalaKiri.src = "image/KepalaHorizontalKiri.png";
+      var KepalaKanan = new Image();
+      KepalaKanan.src = "image/KepalaHorizontalKanan.png";
+      // ↑ kepala ular
 
-//kepala
+      var BadanUlarImage = new Image();
-const kepala = {
+      BadanUlarImage.src = "image/BadanVertikal.png";
-  kanan: new Image(),
+      // ↑ badan ular
-  kiri: new Image(),
-  atas: new Image(),
-  bawah: new Image(),
-};
-kepala.kanan.src = "image/KepalaHorizontalKanan.png";
-kepala.kiri.src  = "image/KepalaHorizontalKiri.png";
-kepala.atas.src    = "image/KepalaVertikalAtas.png";
-kepala.bawah.src  = "image/KepalaVertikalBawah.png";
-
-//badan 
-const badan = {
-  horizontal: new Image(),
-  vertical: new Image(),
-};
-badan.horizontal.src = "image/BadanHorizontal.png";
-badan.vertical.src   = "image/BadanVertikal.png";
-
-//const beluk 
-const belok = {
-  AtasKanan: new Image(),
-  AtasKiri: new Image(),
-  BawahKanan: new Image(),
-  BawahKiri: new Image(),
-};
-belok.AtasKanan.src   = "image/BelokAtasKanan.png";
-belok.AtasKiri.src    = "image/BelokAtasKiri.png";
-belok.BawahKanan.src = "image/BelokBawahKanan.png";
-belok.BawahKiri.src  = "image/BelokBawahKiri.png";
-
-//bokong 
-const bokong = {
-  kanan: new Image(),
-  kiri: new Image(),
-  atas: new Image(),
-  bawah: new Image(),
-};
-bokong.kanan.src = "image/BokongHorizontalKanan.png";
-bokong.kiri.src  = "image/BokongHorizontalKiri.png";
-bokong.atas.src    = "image/BokongVertikalAtas.png";
-bokong.bawah.src  = "image/BokongVertikalBawah.png";
-
 
       var ApelImage = new Image();
-ApelImage.src = "image/ApelLayer.png";
+      ApelImage.src = "image/ApelLayer.png"; // Apel
       var TembokImage = new Image();
-TembokImage.src = "image/Tembok.png";
+      TembokImage.src = "image/Tembok.png"; // Tembok Batagor
 
       //set posisi ular dan Apel
       var Ular = { x: 528, y: 240, dx: grid, dy: 0, cells: [], maxCells: 4 };
@@ -78,6 +48,23 @@ var Tembok = [];
       UpdateScore(0);
       RandomizeApel();
 
+      //mastiin gambar external generate dulu sebelum game start
+      KepalaUlarImage.onload = function () {
+        function gameLoop() {}
+      };
+
+      //ngatur biar game ga langsung jalan
+      function StartingGame(menantang) {
+        ModeH = menantang;
+        persiapan.style.display = "none";
+        if (ModeH) {
+          RandomSpawnWall();
+        } else {
+          Tembok = [];
+        }
+        GameStart = true;
+      }
+
       //buat ngatur batu spwan apa ga nanti
       const halaman = document.querySelector(".HalamanFull");
       const gameCanvas = document.getElementById("game");
@@ -98,140 +85,98 @@ RandomizeApel();
           StartingGame(true);
         });
 
-
-
-function getDirection(cell1, cell2) {
-    if (cell2.x > cell1.x) return "kanan"; 
-    if (cell2.x < cell1.x) return "kiri";
-    if (cell2.y > cell1.y) return "bawah";
-    if (cell2.y < cell1.y) return "atas";
-    return null;
-}
-
-//ngatur biar game ga langsung jalan
-function StartingGame(menantang) {
-    ModeH = menantang;
-    persiapan.style.display = "none";
-    if (ModeH) {
-        RandomSpawnWall();
-    } else {
-        Tembok = [];
-    }
-    GameStart = true;
-}
-
-//buat ngatur batu spwan apa ga nanti
-document.getElementById("mode-normal").addEventListener("click", function () {
-    StartingGame(false);
-});
-
-document.getElementById("mode-tambahan").addEventListener("click", function () {
-    StartingGame(true);
-});
-
       //play again pas gameover
       function resetGame() {
-    Ular.x = 528;
+        Ular.x = 528;
-    Ular.y = 240;
+        Ular.y = 240;
-    Ular.cells = [];
+        Ular.cells = [];
-    Ular.maxCells = 4;
+        Ular.maxCells = 4;
-    Ular.dx = grid;
+        Ular.dx = grid;
-    Ular.dy = 0;
+        Ular.dy = 0;
-    Tembok = [];
+        Tembok = [];
-    RandomizeApel();
+        RandomizeApel();
-    UpdateScore(0);
+        UpdateScore(0);
+        ModeH = false;
+        GameStart = false;
       }
 
       //ngatur tombol pas gameover kemana abis di klik
       PlayAgain.addEventListener("click", function () {
-    UpDead.style.display = "none";
+        UpDead.style.display = "none";
-    resetGame();
+        resetGame();
-    ModeH = false; 
+        persiapan.style.display = "flex";
-    persiapan.style.display = "flex"; 
       });
 
       Udahan.addEventListener("click", function () {
-    UpDead.style.display = "none";
+        UpDead.style.display = "none";
-    resetGame();
+        resetGame();
-    ModeH = false; 
       });
 
       //gameover terus ngatur ular ke setting awal
       function gameLoop() {
-    if (!GameStart) {
+        if (!GameStart) {
-        requestAnimationFrame(gameLoop);
+          requestAnimationFrame(gameLoop);
-        return;
+          return;
-    }
+        }
-    ClearCanvas();
+        ClearCanvas();
-    Movement();
+        Movement();
-    IntiGame();
+        IntiGame();
 
-    requestAnimationFrame(gameLoop);
+        requestAnimationFrame(gameLoop);
       }
 
       //random spawn Apel
       function RandomizeApel() {
-    var pembataslebar = Math.floor(canvas.width / grid);
+        var pembataslebar = Math.floor(canvas.width / grid);
-    var pembatastinggi = Math.floor(canvas.height / grid);
+        var pembatastinggi = Math.floor(canvas.height / grid);
-    
+        Apel.x = Math.floor(Math.random() * pembataslebar) * grid;
-    do {
+        Apel.y = Math.floor(Math.random() * pembatastinggi) * grid;
-        Apel.x = Math.floor(Math.random() * pembataslebar) * grid;
-        Apel.y = Math.floor(Math.random() * pembatastinggi) * grid;
-        
-        //mastiin Apel gak spawn di atas ular
-        var isOverlapSnake = Ular.cells.some(cell => cell.x === Apel.x && cell.y === Apel.y);
-        
-        //mastiin Apel gak spawn di atas tembok
-        var isOverlapWall = Tembok.some(bata => bata.x === Apel.x && bata.y === Apel.y);
-
-    } while (isOverlapSnake || isOverlapWall);
       }
 
       //random spawn tembok
       function RandomSpawnWall() {
-    var TembokX, TembokY;
+        var TembokX, TembokY;
-    var kosong;
+        var kosong;
-    var pembataslebar = Math.floor(canvas.width / grid);
+        var pembataslebar = Math.floor(canvas.width / grid);
-    var pembatastinggi = Math.floor(canvas.height / grid);
+        var pembatastinggi = Math.floor(canvas.height / grid);
 
-    //create tembok
+        //create tembok
-    do {
+        do {
-        kosong = true;
+          kosong = true;
 
-        TembokX = Math.floor(Math.random() * pembataslebar) * grid;
+          TembokX = Math.floor(Math.random() * pembataslebar) * grid;
-        TembokY = Math.floor(Math.random() * pembatastinggi) * grid;
+          TembokY = Math.floor(Math.random() * pembatastinggi) * grid;
 
-        //cek untuk posisi yang mau di kasih tembok ada/tidak ada ularnya 
+          //cek untuk posisi yang mau di kasih tembok ada/tidak ada ularnya
-        for (var i = 0; i < Ular.cells.length; i++) {
+          for (var i = 0; i < Ular.cells.length; i++) {
-            if (Math.abs(Ular.cells[i].x - TembokX) <= grid * 5 && Math.abs(Ular.cells[i].y - TembokY) <= grid * 5) {
+            if (Ular.cells[i].x === TembokX && Ular.cells[i].y === TembokY) {
-                kosong = false;
+              kosong = false;
-                break;
+              break;
-            }
+            }
-        }
-
-        // tidak memperbolehkan tembok spawn sama dengan apel
-        if (TembokX === Apel.x && TembokY === Apel.y) {
-            kosong = false;
-        }
-
-        //cek agar tembok tidak menumpuk
-        for (var i = 0; i < Tembok.length; i++) {
-            if (Tembok[i].x === TembokX && Tembok[i].y === TembokY) {
-                kosong = false;
-                break;
-            }
-        }
-    } while (kosong === false);
-    Tembok.push({ x: TembokX, y: TembokY });
           }
 
-//nambah tembok tiap score kelipatan 
+          //tidak memperbolehkan tembok spawn sama dengan apel
+          if (TembokX === Apel.x && TembokY === Apel.y) {
+            kosong = false;
+          }
+
+          for (var i = 0; i < Tembok.length; i++) {
+            if (Tembok[i].x === TembokX && Tembok[i].y === TembokY) {
+              kosong = false;
+              break;
+            }
+          }
+        } while (kosong === false);
+        Tembok.push({ x: TembokX, y: TembokY });
+      }
+
+      //nambah tembok tiap score kelipatan ... berapa enaknya ya? 😁
       function PenambahanTembok() {
-    if (ModeH) {
+        if (ModeH) {
-        if (score > 0 && score % 2 === 0 && Tembok.length < 15 && Tembok.length < score / 2) {
+          if (Tembok.length < Math.floor(score / 2)) {
-             RandomSpawnWall();
+            RandomSpawnWall();
-        }
+          }
-    }
+        }
       }
 
       //set dan update score
@@ -247,7 +192,7 @@ function PenambahanTembok() {
           "<br>Speed: " +
           speed;
 
-    PenambahanTembok();
+        PenambahanTembok();
       }
 
       //tampilin gameover
@@ -284,220 +229,142 @@ function PenambahanTembok() {
 
       //reset isi canvas doang
       function ClearCanvas() {
-    content.clearRect(0, 0, canvas.width, canvas.height);
+        content.clearRect(0, 0, canvas.width, canvas.height);
       }
 
       //bagian utama:
       //ular makan dan mati pas ketemu badannya
       function IntiGame() {
-    // buat gambarnya bisa keluar
+        //buat gambarnya bisa keluar
-    content.drawImage(ApelImage, Apel.x, Apel.y, grid, grid);
+        content.drawImage(ApelImage, Apel.x, Apel.y, grid, grid);
-    
+        Tembok.forEach(function (bata) {
-    // Gambar Tembok
+          content.drawImage(TembokImage, bata.x, bata.y, grid, grid);
-    Tembok.forEach(function (bata) {
+        });
-        content.drawImage(TembokImage, bata.x, bata.y, grid, grid);
-    });
 
-    // Gambar Ular
         Ular.cells.forEach(function (cell, index) {
-        var gambarUlar = null;
-        //pala ulo
-        if (index === 0) {
-            if (Ular.dx === grid) gambarUlar = kepala.kanan;
-            else if (Ular.dx === -grid) gambarUlar = kepala.kiri;
-            else if (Ular.dy === -grid) gambarUlar = kepala.atas;
-            else if (Ular.dy === grid) gambarUlar = kepala.bawah;
-        }
-
-        //bokong
-        else if (index === Ular.cells.length - 1) {
-            var sebelum = Ular.cells[index - 1];
-            var arahEkor = getDirection(sebelum, cell); 
-
-            if (arahEkor === "kanan") gambarUlar = bokong.kanan;
-            else if (arahEkor === "kiri") gambarUlar = bokong.kiri;
-            else if (arahEkor === "atas") gambarUlar = bokong.atas;
-            else if (arahEkor === "bawah") gambarUlar = bokong.bawah;
-        }
-
-        //badan
-        else {
-            var sebelum = Ular.cells[index - 1];
-            var sesudah = Ular.cells[index + 1];
-
-            var ArahMasuk = getDirection(sebelum, cell); 
-            var ArahKeluar = getDirection(cell, sesudah); 
-
-            if (ArahMasuk && ArahKeluar) {
-                if (ArahMasuk === ArahKeluar) {
-                    // Badan Lurus (Horizontal/Vertical)
-                    if (ArahMasuk === "kiri" || ArahMasuk === "kanan") {
-                        gambarUlar = badan.horizontal;
-                    } else {
-                        gambarUlar = badan.vertical;
-                    }
-                }
-                
-                else {
-                    // belok AtasKanan
-                    if ((ArahMasuk === "bawah" && ArahKeluar === "kanan") || (ArahMasuk === "kiri" && ArahKeluar === "atas")) 
-                        gambarUlar = belok.AtasKanan; 
-                    
-                    // belok AtasKiri
-                    else if ((ArahMasuk === "bawah" && ArahKeluar === "kiri") || (ArahMasuk === "kanan" && ArahKeluar === "atas")) 
-                        gambarUlar = belok.AtasKiri;
-
-                    // belok BawahKanan
-                    else if ((ArahMasuk === "atas" && ArahKeluar === "kanan") || (ArahMasuk === "kiri" && ArahKeluar === "bawah")) 
-                        gambarUlar = belok.BawahKanan;
-
-                    // belok BawahKiri
-                    else if ((ArahMasuk === "atas" && ArahKeluar === "kiri") || (ArahMasuk === "kanan" && ArahKeluar === "bawah")) 
-                        gambarUlar = belok.BawahKiri;
-                }
-            }
-        }
-
-        if (gambarUlar) {
-            content.drawImage(gambarUlar, cell.x, cell.y, grid, grid);
-        }
-        
-        //ular makan apel
           if (index === 0) {
-            if (cell.x === Apel.x && cell.y === Apel.y) {
+            // Logika Pemilihan Gambar Kepala Ular
-                Ular.maxCells += 1;
+            var posisiKepalaImage;
-                UpdateScore(1);
+            if (Ular.dx === grid) {
-                RandomizeApel();
+              // KANAN
-            }
+              posisiKepalaImage = KepalaKanan;
-
+            } else if (Ular.dx === -grid) {
-            //nabrak tembok
+              // KIRI
-            Tembok.forEach(function (bata) {
+              posisiKepalaImage = KepalaKiri;
-                if (cell.x === bata.x && cell.y === bata.y) {
+            } else if (Ular.dy === -grid) {
-                    GameOver();
+              // ATAS
-                }
+              posisiKepalaImage = KepalAtas;
-            });
+            } else if (Ular.dy === grid) {
-
+              // BAWAH
-            //nabrak diri e dw
+              posisiKepalaImage = KepalaBawah;
-            for (var i = 1; i < Ular.cells.length; i++) {
+            } else {
-                if (cell.x === Ular.cells[i].x && cell.y === Ular.cells[i].y) {
+              // Default, misalnya saat game baru mulai (dx=grid, dy=0, atau default awal)
-                    GameOver();
+              posisiKepalaImage = KepalaKanan;
-                }
-            }
-        }
-    });
             }
 
-//update speed kalau score update
+            content.drawImage(posisiKepalaImage, cell.x, cell.y, grid, grid);
-function Movement() {
+          } else {
-    if (++count < speed) return;
+            content.drawImage(BadanUlarImage, cell.x, cell.y, grid, grid);
-    if (ArahUlar > 0) ArahUlar--;
+          }
-    count = 0;
+        });
-    
-    Ular.x += Ular.dx;
-    Ular.y += Ular.dy;
-    
-    if (
-        Ular.x < 0 ||
-        Ular.x >= canvas.width ||
-        Ular.y < 0 ||
-        Ular.y >= canvas.height
-    )
-        GameOver();
-        
-    Ular.cells.unshift({ x: Ular.x, y: Ular.y });
 
-    if (Ular.cells.length > Ular.maxCells) Ular.cells.pop();
+        //bagian generate ular
+        Ular.cells.forEach(function (cell, index) {
+          if (index === 0) {
+            content.drawImage(KepalaUlarImage, cell.x, cell.y, grid, grid);
+          } else {
+            content.drawImage(BadanUlarImage, cell.x, cell.y, grid, grid);
+          }
+
+          //buat pas ular makan Apel
+          if (cell.x === Apel.x && cell.y === Apel.y) {
+            Ular.maxCells += 1;
+            UpdateScore(1);
+            RandomizeApel();
+          }
+
+          //tabrak tembok = mati
+          if (index === 0) {
+            Tembok.forEach(function (bata) {
+              if (cell.x === bata.x && cell.y === bata.y) {
+                GameOver();
+              }
+            });
+          }
+
+          //buat pas ular mati kena badan sendiri
+          for (var i = index + 1; i < Ular.cells.length; i++)
+            if (cell.x === Ular.cells[i].x && cell.y === Ular.cells[i].y)
+              GameOver();
+        });
+      }
+
+      //update teks pada speed kalau score update
+      function Movement() {
+        if (++count < speed) return;
+        if (ArahUlar > 0) ArahUlar--;
+        count = 0;
+        Ular.x += Ular.dx;
+        Ular.y += Ular.dy;
+        if (
+          Ular.x < 0 ||
+          Ular.x >= canvas.width ||
+          Ular.y < 0 ||
+          Ular.y >= canvas.height
+        )
+          GameOver();
+        Ular.cells.unshift({ x: Ular.x, y: Ular.y });
+        if (Ular.cells.length > Ular.maxCells) Ular.cells.pop();
       }
 
       //input keyboard
       function InputKeyboard() {
-    document.addEventListener("keydown", function (e) {
+        document.addEventListener("keydown", function (e) {
-        if (!GameStart) return;
+          if (!GameStart) return;
 
-        if (
+          // jalan buat ular
-            ArahUlar == 0 &&
+          if (
-            ((e.code == "KeyA" && Ular.dx === 0) ||
+            ArahUlar == 0 &&
-                (e.code == "KeyD" && Ular.dx === 0))
+            ((e.code == "KeyA" && Ular.dx === 0) ||
-        ) {
+              (e.code == "KeyD" && Ular.dx === 0))
-            ArahUlar = 1;
+          ) {
-            Ular.dx = e.code === "KeyA" ? -grid : grid;
+            ArahUlar = 1;
-            Ular.dy = 0;
+            Ular.dx = e.code === "KeyA" ? -grid : grid;
-        } 
+            Ular.dy = 0;
-
+          } else if (
-        else if (
+            ArahUlar == 0 &&
-            ArahUlar == 0 &&
+            ((e.code === "KeyW" && Ular.dy === 0) ||
-            ((e.code === "KeyW" && Ular.dy === 0) ||
+              (e.code == "KeyS" && Ular.dy === 0))
-                (e.code == "KeyS" && Ular.dy === 0))
+          ) {
-        ) {
+            ArahUlar = 1;
-            ArahUlar = 1;
+            Ular.dy = e.code == "KeyW" ? -grid : grid;
-            Ular.dy = e.code == "KeyW" ? -grid : grid;
+            Ular.dx = 0;
-            Ular.dx = 0;
+          } else if (
-        } 
+            ArahUlar == 0 &&
-
+            ((e.code === "ArrowUp" && Ular.dy === 0) ||
-        else if (
+              (e.code == "ArrowDown" && Ular.dy === 0))
-            ArahUlar == 0 &&
+          ) {
-            ((e.code === "ArrowUp" && Ular.dy === 0) ||
+            ArahUlar = 1;
-                (e.code == "ArrowDown" && Ular.dy === 0))
+            Ular.dy = e.code == "ArrowUp" ? -grid : grid;
-        ) {
+            Ular.dx = 0;
-            ArahUlar = 1;
+          } else if (
-            Ular.dy = e.code == "ArrowUp" ? -grid : grid;
+            ArahUlar == 0 &&
-            Ular.dx = 0;
+            ((e.code === "ArrowLeft" && Ular.dx === 0) ||
-        } 
+              (e.code == "ArrowRight" && Ular.dx === 0))
-
+          ) {
-        else if (
+            ArahUlar = 1;
-            ArahUlar == 0 &&
+            Ular.dx = e.code == "ArrowLeft" ? -grid : grid;
-            ((e.code === "ArrowLeft" && Ular.dx === 0) ||
+            Ular.dy = 0;
-                (e.code == "ArrowRight" && Ular.dx === 0))
-        ) {
-            ArahUlar = 1;
-            Ular.dx = e.code == "ArrowLeft" ? -grid : grid;
-            Ular.dy = 0;
-        }
-
-        if (e.code === "KeyE" || e.code == "KeyQ")
-            speed =
-                e.code == "KeyE" && speed > 2
-                    ? speed - 1
-                    : e.code == "KeyQ" && speed < 30
-                    ? speed + 1
-                    : speed;
-    });
           } 
 
-// nti ae la daud
+          if (e.code === "KeyE" || e.code == "KeyQ")
-// function kirimSkorKeServer(skor, GameMode) {
+            speed =
-//     console.log(`Mengirim skor ${skor} (Mode: ${GameMode}) ke server...`);
+              e.code == "KeyE" && speed > 5
-
+                ? speed - 1
-//     fetch('score.php', { 
+                : e.code == "KeyQ" && speed < 15
-//         method: 'POST',
+                ? speed + 1
-//         headers: {
+                : speed;
-//             '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

@@ -105,49 +105,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;
-      }
-      #keluar {
-        background-color: #f44336;
-      }
-      #keluar:hover {
-        background-color: #d32f2f;
-      }
       .icon {
         width: 70px;
         height: 70px;

daftar.php

@@ -7,22 +7,8 @@ include "koneksi.php";
 <html lang="en">
 <style>
     body {
+            background: linear-gradient(to bottom right, #A3D438, #004D40);
             height: 568px;
-            rgb(24, 24, 24)
-        }
-    div {
-            border-radius: 7px;
-            justify-content: center;
-            justify-self: center;
-            width: 540px;
-            height: 280px;
-            background-image: url("succes/loginSuccess.png");
-            background-size: 100% 100%;
-            background-position: center;
-            background-repeat: no-repeat;
-    }
-    h3 {
-        margin-top: 50px;
         }
 </style>
 <head>
@@ -31,7 +17,6 @@ include "koneksi.php";
     <title>Halaman: Daftar</title>
 </head>
 <body>
-    <div>
     <?php
         if(isset($_POST['username'])) {
             $nama = $_POST['nama'];
@@ -76,6 +61,6 @@ include "koneksi.php";
             </tr>
         </table>
     </form>
-    </div>
+
 </body>
 </html>

game.html

@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-<!-- tes merge -->
 <html>
   <head>
     <link rel="stylesheet" href="GameStyle.css" />
@@ -18,7 +17,7 @@
         <h1>Snake</h1>
       </div>
     </header>
-<img src="" alt="">
+
     <!-- main konten -->
     <div class="HalamanFull">
       <canvas width="1056" height="480" id="game"></canvas>

index.php

@@ -11,29 +11,23 @@ if(!isset($_SESSION['username'])) {
 <html lang="id">
     <style>
     body {
+            background: linear-gradient(to bottom right, #A3D438, #004D40);
             height: 526px;
-            background-color: rgb(24, 24, 24);
     }
     h1 {
       text-align: center;
       margin-top: 10%;
       font-size: 40px;
       box-sizing: border-box;
-      color: white;
-    }
-    h3 {
-      color: white;
     }
+
     .container {
-      padding: 5px; /* Nanti dihapus */
+      padding: 5px;
+      border: 2px solid; /* Nanti dihapus */
       border-radius: 7pt; /* Nanti dihapus */
       width: 65%;
       height: 55%;
       justify-self: center;
-      background-image: url("gameOver/gameOver.png");
-      background-size: 100% 100%;
-      background-position: center;
-      background-repeat: no-repeat;
       /* background-image: url(); */
     }
 
@@ -42,9 +36,7 @@ if(!isset($_SESSION['username'])) {
       margin-top: 5%;
       width: 50%;
       margin-bottom: 5%;
-      border: 2px solid #5c5b58;
+      border: 1px solid;
-      background-color: #5c5b58;
-      color: white;
       border-radius: 3pt;
       padding: 2px;
       justify-self: center;

leaderboard.php

@@ -33,24 +33,9 @@ if($result && mysqli_num_rows($result) > 0) {
 <!DOCTYPE html>
 <html lang="id">
     <style>
-        .container {
-            padding: 10px;
-            justify-items: center;
-            justify-self: center;
-            border-radius: 7pt;
-            width: 540px;
-            height: 540px;
-            background-image: url("leaderboard/Leaderboard.png");
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-        }
         body {
+            background: linear-gradient(to bottom right, #A3D438, #004D40);
             height: 568px;
-            background-color: rgb(24, 24, 24);
-        }
-        table {
-            margin-top: 20px;
         }
     </style>
 <head>
@@ -61,7 +46,6 @@ if($result && mysqli_num_rows($result) > 0) {
     <link rel="stylesheet" href="">
 </head>
 <body>
-    <div class=container>
     <table>
         <thead>
             <tr>
@@ -96,6 +80,5 @@ if($result && mysqli_num_rows($result) > 0) {
         </tbody>
         
     </table>
-    </div>
 </body>
 </html>

login.php

@@ -23,31 +23,15 @@ if(isset($_POST['username'])) {
 <html lang="id">
     <style>
         body {
-            background-color: rgb(24, 24, 24);
+            background: linear-gradient(to bottom right, #A3D438, #004D40);
+            /* height: 568px; */
         }
         .login {
             /* background-image: url('login/login.png'); */
-            height: 568px;
-            margin-top: 0;
-            background-image: url("login/log.png");
-            background-size: 50% 80%;
-            background-position: center;
             background-repeat: no-repeat;
-        }
+            background-size: 300px 190px;
-        h3 {
+            background-position: center top;
-            color: white;
+            height: 568px;
-        }
-        table {
-            padding: 42px;
-            font-size: 50px;
-        }
-        a {
-            color: white;
-            font-size: 21px;
-        }
-        input {
-            color: white;
-            background-color: rgb(24, 24, 24);
         }
     </style>
     <head>
@@ -62,47 +46,21 @@ if(isset($_POST['username'])) {
             <table align="center">
                 <tr>
                     <td colspan="2" align="center">
-                        <div id="h3">
                         <h3>Login User</h3>
-                        </div>
                     </td>
                 </tr>
                 <tr>
+
                     <td></td>
-                    <td align="center"><input type="text" name="username" placeholder="Username" style="border: none"></td>
+                    <td><input type="text" name="username" placeholder="Username" style="border: none"></td>
-                </tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr>
-                    <td></td>
-                    <td align="center"><input type="password" name="password" placeholder="Password" style="border: none"></td>
-                    <!-- <td><input type="password" name="password" placeholder="Password" style="border: none"></td> -->
                 </tr>
                 <tr>
                     <td></td>
-                    <td align="center">
+                    <td><input type="password" name="password" placeholder="Password" style="border: none"></td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td>
                         <button type="submit">Masuk</button>
                         <a href="daftar.php">Daftar</a>
                     </td>

score.php

@@ -1,81 +0,0 @@
-<?php
-session_start();
-require_once 'koneksi.php';
-
-header('Content-Type: application/json');
-
-if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
-    http_response_code(405);
-    echo json_encode(['status' => 'error', 'message' => 'Metode tidak diizinkan.']);
-    exit;
-}
-
-if (!isset($_SESSION['id_user']) && !isset($_SESSION['username'])) {
-    http_response_code(401);
-    echo json_encode(['status' => 'error', 'message' => 'Anda harus login untuk menyimpan skor.']);
-    exit;
-}
-
-$input = json_decode(file_get_contents('php://input'), true);
-
-$final_score = (int)($input['score'] ?? 0);
-
-if ($final_score <= 0) {
-    http_response_code(400);
-    echo json_encode(['status' => 'error', 'message' => 'Skor tidak valid atau 0.']);
-    exit;
-}
-
-$user_id = null;
-if (isset($_SESSION['id_user'])) {
-    $user_id = $_SESSION['id_user'];
-} elseif (isset($_SESSION['username'])) {
-
-    $username = $_SESSION['username'];
-
-    $getID_sql = "SELECT id_user FROM users WHERE username = '$username'";
-    $result_id = mysqli_query($koneksi, $getID_sql);
-    
-    if ($result_id && mysqli_num_rows($result_id) > 0) {
-        $row = mysqli_fetch_assoc($result_id);
-        $user_id = $row['id_user'];
-    }
-}
-
-if (!$user_id) {
-    http_response_code(401);
-    echo json_encode(['status' => 'error', 'message' => 'ID pengguna tidak ditemukan.']);
-    exit;
-}
-
-$sql = "UPDATE users SET score = ? WHERE id_user = ? AND score < ?";
-
-if ($stmt = mysqli_prepare($koneksi, $sql)) {
-    mysqli_stmt_bind_param($stmt, "iii", $final_score, $user_id, $final_score);
-    $exec = mysqli_stmt_execute($stmt);
-
-    if ($exec) {
-        $rows_affected = mysqli_stmt_affected_rows($stmt);
-        
-        if ($rows_affected > 0) {
-            $message = 'Skor berhasil diperbarui. Ini adalah Highscore baru!';
-        } else {
-            $message = 'Skor berhasil dikirim, tetapi skor tidak lebih tinggi dari Highscore sebelumnya.';
-        }
-
-        echo json_encode([
-            'status' => 'success', 
-            'message' => $message,
-            'skor_terkirim' => $final_score
-        ]);
-    } else {
-        http_response_code(500);
-        echo json_encode(['status' => 'error', 'message' => 'Gagal menjalankan kueri update: ' . mysqli_stmt_error($stmt)]);
-    }
-    mysqli_stmt_close($stmt);
-
-} else {
-    http_response_code(500);
-    echo json_encode(['status' => 'error', 'message' => 'Gagal mempersiapkan statement: ' . mysqli_error($koneksi)]);
-}
-?>