merge main sama branch

0 update
update none
2025-12-15 19:08:13 +07:00 · 2025-12-15 18:45:00 +07:00 · 2025-12-15 18:30:36 +07:00 · 2025-12-15 14:50:19 +07:00 · 2025-12-15 08:53:13 +07:00 · 2025-12-13 21:37:33 +07:00
10 changed files with 638 additions and 298 deletions
--- a/GameLogic.js
+++ b/GameLogic.js
@ -1,69 +1,82 @@
-      //bagian tempat main ama buat generate game 2d
-      var canvas = document.getElementById("game");
-      var content = canvas.getContext("2d");
-      const Text = document.getElementById("text");
-      const UpDead = document.getElementById("gameover-overlay");
-      const ScoreMain = document.getElementById("gameover-score");
-      const PlayAgain = document.getElementById("ulangi");
-      const Udahan = document.getElementById("keluar");
+// //bagian tempat main ama buat generate game 2d
+var canvas = document.getElementById("game");
+var content = canvas.getContext("2d");
+const Text = document.getElementById("text");
+const UpDead = document.getElementById("gameover-overlay");
+const ScoreMain = document.getElementById("gameover-score");
+const PlayAgain = document.getElementById("ulangi");
+const Udahan = document.getElementById("keluar");

-      //settingan awal
-      var grid = 24;
-      var count = 0;
-      var speed = 10;
-      var score = 0;
-      var highscore = 0;
-      var ArahUlar = 0;
-      var GameOverTimer = 0;
-      var GameStart = false;
-      var ModeH = false;
-      const persiapan = document.getElementById("start");
+//settingan awal
+var grid = 24;
+var count = 0;
+var speed = 10;
+var score = 0;
+var highscore = 0;
+var ArahUlar = 0;
+var GameOverTimer = 0;
+var GameStart = false;
+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
+//generate gambar external

-      var BadanUlarImage = new Image();
-      BadanUlarImage.src = "image/BadanVertikal.png";
-      // ↑ badan ular
+//kepala
+const kepala = {
+  kanan: new Image(),
+  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";

-      var ApelImage = new Image();
-      ApelImage.src = "image/ApelLayer.png"; // Apel
-      var TembokImage = new Image();
-      TembokImage.src = "image/Tembok.png"; // Tembok Batagor
+//badan 
+const badan = {
+  horizontal: new Image(),
+  vertical: new Image(),
+};
+badan.horizontal.src = "image/BadanHorizontal.png";
+badan.vertical.src   = "image/BadanVertikal.png";

-      //set posisi ular dan Apel
-      var Ular = { x: 528, y: 240, dx: grid, dy: 0, cells: [], maxCells: 4 };
-      var Apel = { x: 0, y: 0 };
-      var Tembok = [];
-      UpdateScore(0);
-      RandomizeApel();
+//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";

-      //mastiin gambar external generate dulu sebelum game start
-      KepalaUlarImage.onload = function () {
-        function gameLoop() {}
-      };
+//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";

-      //ngatur biar game ga langsung jalan
-      function StartingGame(menantang) {
-        ModeH = menantang;
-        persiapan.style.display = "none";
-        if (ModeH) {
-          RandomSpawnWall();
-        } else {
-          Tembok = [];
-        }
-        GameStart = true;
-      }
+
+var ApelImage = new Image();
+ApelImage.src = "image/ApelLayer.png";
+var TembokImage = new Image();
+TembokImage.src = "image/Tembok.png";
+
+//set posisi ular dan Apel
+var Ular = { x: 528, y: 240, dx: grid, dy: 0, cells: [], maxCells: 4 };
+var Apel = { x: 0, y: 0 };
+var Tembok = [];
+UpdateScore(0);
+RandomizeApel();

      //buat ngatur batu spwan apa ga nanti
      const halaman = document.querySelector(".HalamanFull");
@ -85,99 +98,141 @@
          StartingGame(true);
        });

-      //play again pas gameover
-      function resetGame() {
-        Ular.x = 528;
-        Ular.y = 240;
-        Ular.cells = [];
-        Ular.maxCells = 4;
-        Ular.dx = grid;
-        Ular.dy = 0;
-        Tembok = [];
-        RandomizeApel();
-        UpdateScore(0);
-        ModeH = false;
-        GameStart = false;
-      }

-      //ngatur tombol pas gameover kemana abis di klik
-      PlayAgain.addEventListener("click", function () {
-        UpDead.style.display = "none";
-        resetGame();
-        persiapan.style.display = "flex";
-      });

-      Udahan.addEventListener("click", function () {
-        UpDead.style.display = "none";
-        resetGame();
-      });
+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;
+}

-      //gameover terus ngatur ular ke setting awal
-      function gameLoop() {
-        if (!GameStart) {
-          requestAnimationFrame(gameLoop);
-          return;
-        }
-        ClearCanvas();
-        Movement();
-        IntiGame();
+//ngatur biar game ga langsung jalan
+function StartingGame(menantang) {
+    ModeH = menantang;
+    persiapan.style.display = "none";
+    if (ModeH) {
+        RandomSpawnWall();
+    } else {
+        Tembok = [];
+    }
+    GameStart = true;
+}

-        requestAnimationFrame(gameLoop);
-      }
+//buat ngatur batu spwan apa ga nanti
+document.getElementById("mode-normal").addEventListener("click", function () {
+    StartingGame(false);
+});

-      //random spawn Apel
-      function RandomizeApel() {
-        var pembataslebar = Math.floor(canvas.width / grid);
-        var pembatastinggi = Math.floor(canvas.height / grid);
-        Apel.x = Math.floor(Math.random() * pembataslebar) * grid;
-        Apel.y = Math.floor(Math.random() * pembatastinggi) * grid;
-      }
+document.getElementById("mode-tambahan").addEventListener("click", function () {
+    StartingGame(true);
+});

-      //random spawn tembok
-      function RandomSpawnWall() {
-        var TembokX, TembokY;
-        var kosong;
-        var pembataslebar = Math.floor(canvas.width / grid);
-        var pembatastinggi = Math.floor(canvas.height / grid);
+//play again pas gameover
+function resetGame() {
+    Ular.x = 528;
+    Ular.y = 240;
+    Ular.cells = [];
+    Ular.maxCells = 4;
+    Ular.dx = grid;
+    Ular.dy = 0;
+    Tembok = [];
+    RandomizeApel();
+    UpdateScore(0);
+}

-        //create tembok
-        do {
-          kosong = true;
+//ngatur tombol pas gameover kemana abis di klik
+PlayAgain.addEventListener("click", function () {
+    UpDead.style.display = "none";
+    resetGame();
+    ModeH = false; 
+    persiapan.style.display = "flex"; 
+});

-          TembokX = Math.floor(Math.random() * pembataslebar) * grid;
-          TembokY = Math.floor(Math.random() * pembatastinggi) * grid;
+Udahan.addEventListener("click", function () {
+    UpDead.style.display = "none";
+    resetGame();
+    ModeH = false; 
+});

-          //cek untuk posisi yang mau di kasih tembok ada/tidak ada ularnya
-          for (var i = 0; i < Ular.cells.length; i++) {
-            if (Ular.cells[i].x === TembokX && Ular.cells[i].y === TembokY) {
-              kosong = false;
-              break;
-            }
-          }
+//gameover terus ngatur ular ke setting awal
+function gameLoop() {
+    if (!GameStart) {
+        requestAnimationFrame(gameLoop);
+        return;
+    }
+    ClearCanvas();
+    Movement();
+    IntiGame();

-          //tidak memperbolehkan tembok spawn sama dengan apel
-          if (TembokX === Apel.x && TembokY === Apel.y) {
-            kosong = false;
-          }
+    requestAnimationFrame(gameLoop);
+}

-          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 });
-      }
+//random spawn Apel
+function RandomizeApel() {
+    var pembataslebar = Math.floor(canvas.width / grid);
+    var pembatastinggi = Math.floor(canvas.height / grid);
+    
+    do {
+        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);

-      //nambah tembok tiap score kelipatan ... berapa enaknya ya? 😁
-      function PenambahanTembok() {
-        if (ModeH) {
-          if (Tembok.length < Math.floor(score / 2)) {
-            RandomSpawnWall();
-          }
-        }
-      }
+    } while (isOverlapSnake || isOverlapWall);
+}
+
+//random spawn tembok
+function RandomSpawnWall() {
+    var TembokX, TembokY;
+    var kosong;
+    var pembataslebar = Math.floor(canvas.width / grid);
+    var pembatastinggi = Math.floor(canvas.height / grid);
+
+    //create tembok
+    do {
+        kosong = true;
+
+        TembokX = Math.floor(Math.random() * pembataslebar) * grid;
+        TembokY = Math.floor(Math.random() * pembatastinggi) * grid;
+
+        //cek untuk posisi yang mau di kasih tembok ada/tidak ada ularnya 
+        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) {
+                kosong = false;
+                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 
+function PenambahanTembok() {
+    if (ModeH) {
+        if (score > 0 && score % 2 === 0 && Tembok.length < 15 && Tembok.length < score / 2) {
+             RandomSpawnWall();
+        }
+    }
+}

      //set dan update score
      function UpdateScore(amount) {
@ -192,8 +247,8 @@
          "<br>Speed: " +
          speed;

-        PenambahanTembok();
-      }
+    PenambahanTembok();
+}

      //tampilin gameover
      function GameOver() {
@ -227,144 +282,222 @@
        form.submit();
      }

-      //reset isi canvas doang
-      function ClearCanvas() {
-        content.clearRect(0, 0, canvas.width, canvas.height);
-      }
+//reset isi canvas doang
+function ClearCanvas() {
+    content.clearRect(0, 0, canvas.width, canvas.height);
+}

-      //bagian utama:
-      //ular makan dan mati pas ketemu badannya
-      function IntiGame() {
-        //buat gambarnya bisa keluar
-        content.drawImage(ApelImage, Apel.x, Apel.y, grid, grid);
-        Tembok.forEach(function (bata) {
-          content.drawImage(TembokImage, bata.x, bata.y, grid, grid);
-        });
+//bagian utama:
+//ular makan dan mati pas ketemu badannya
+function IntiGame() {
+    // buat gambarnya bisa keluar
+    content.drawImage(ApelImage, Apel.x, Apel.y, grid, grid);
+    
+    // Gambar Tembok
+    Tembok.forEach(function (bata) {
+        content.drawImage(TembokImage, bata.x, bata.y, grid, grid);
+    });

-        Ular.cells.forEach(function (cell, index) {
-          if (index === 0) {
-            // Logika Pemilihan Gambar Kepala Ular
-            var posisiKepalaImage;
-            if (Ular.dx === grid) {
-              // KANAN
-              posisiKepalaImage = KepalaKanan;
-            } else if (Ular.dx === -grid) {
-              // KIRI
-              posisiKepalaImage = KepalaKiri;
-            } else if (Ular.dy === -grid) {
-              // ATAS
-              posisiKepalaImage = KepalAtas;
-            } else if (Ular.dy === grid) {
-              // BAWAH
-              posisiKepalaImage = KepalaBawah;
-            } else {
-              // Default, misalnya saat game baru mulai (dx=grid, dy=0, atau default awal)
-              posisiKepalaImage = KepalaKanan;
-            }
+    // 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;
+        }

-            content.drawImage(posisiKepalaImage, cell.x, cell.y, grid, grid);
-          } else {
-            content.drawImage(BadanUlarImage, cell.x, cell.y, grid, grid);
-          }
-        });
+        //bokong
+        else if (index === Ular.cells.length - 1) {
+            var sebelum = Ular.cells[index - 1];
+            var arahEkor = getDirection(sebelum, cell); 

-        //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);
-          }
+            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;
+        }

-          //buat pas ular makan Apel
-          if (cell.x === Apel.x && cell.y === Apel.y) {
-            Ular.maxCells += 1;
-            UpdateScore(1);
-            RandomizeApel();
-          }
+        //badan
+        else {
+            var sebelum = Ular.cells[index - 1];
+            var sesudah = Ular.cells[index + 1];

-          //tabrak tembok = mati
-          if (index === 0) {
-            Tembok.forEach(function (bata) {
-              if (cell.x === bata.x && cell.y === bata.y) {
-                GameOver();
-              }
-            });
-          }
+            var ArahMasuk = getDirection(sebelum, cell); 
+            var ArahKeluar = getDirection(cell, sesudah); 

-          //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();
-        });
-      }
+            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;

-      //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();
-      }
+                    // belok BawahKanan
+                    else if ((ArahMasuk === "atas" && ArahKeluar === "kanan") || (ArahMasuk === "kiri" && ArahKeluar === "bawah")) 
+                        gambarUlar = belok.BawahKanan;

-      //input keyboard
-      function InputKeyboard() {
-        document.addEventListener("keydown", function (e) {
-          if (!GameStart) return;
+                    // belok BawahKiri
+                    else if ((ArahMasuk === "atas" && ArahKeluar === "kiri") || (ArahMasuk === "kanan" && ArahKeluar === "bawah")) 
+                        gambarUlar = belok.BawahKiri;
+                }
+            }
+        }

-          // jalan buat ular
-          if (
-            ArahUlar == 0 &&
-            ((e.code == "KeyA" && Ular.dx === 0) ||
-              (e.code == "KeyD" && Ular.dx === 0))
-          ) {
-            ArahUlar = 1;
-            Ular.dx = e.code === "KeyA" ? -grid : grid;
-            Ular.dy = 0;
-          } else if (
-            ArahUlar == 0 &&
-            ((e.code === "KeyW" && Ular.dy === 0) ||
-              (e.code == "KeyS" && Ular.dy === 0))
-          ) {
-            ArahUlar = 1;
-            Ular.dy = e.code == "KeyW" ? -grid : grid;
-            Ular.dx = 0;
-          } else if (
-            ArahUlar == 0 &&
-            ((e.code === "ArrowUp" && Ular.dy === 0) ||
-              (e.code == "ArrowDown" && Ular.dy === 0))
-          ) {
-            ArahUlar = 1;
-            Ular.dy = e.code == "ArrowUp" ? -grid : grid;
-            Ular.dx = 0;
-          } else if (
-            ArahUlar == 0 &&
-            ((e.code === "ArrowLeft" && Ular.dx === 0) ||
-              (e.code == "ArrowRight" && Ular.dx === 0))
-          ) {
-            ArahUlar = 1;
-            Ular.dx = e.code == "ArrowLeft" ? -grid : grid;
-            Ular.dy = 0;
-          } 
+        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) {
+                Ular.maxCells += 1;
+                UpdateScore(1);
+                RandomizeApel();
+            }

-          if (e.code === "KeyE" || e.code == "KeyQ")
-            speed =
-              e.code == "KeyE" && speed > 5
-                ? speed - 1
-                : e.code == "KeyQ" && speed < 15
-                ? speed + 1
-                : speed;
-        });
-      }
-      InputKeyboard();
-      gameLoop();
+            //nabrak tembok
+            Tembok.forEach(function (bata) {
+                if (cell.x === bata.x && cell.y === bata.y) {
+                    GameOver();
+                }
+            });
+
+            //nabrak diri e dw
+            for (var i = 1; i < Ular.cells.length; i++) {
+                if (cell.x === Ular.cells[i].x && cell.y === Ular.cells[i].y) {
+                    GameOver();
+                }
+            }
+        }
+    });
+}
+
+//update 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) {
+        if (!GameStart) return;
+
+        if (
+            ArahUlar == 0 &&
+            ((e.code == "KeyA" && Ular.dx === 0) ||
+                (e.code == "KeyD" && Ular.dx === 0))
+        ) {
+            ArahUlar = 1;
+            Ular.dx = e.code === "KeyA" ? -grid : grid;
+            Ular.dy = 0;
+        } 
+
+        else if (
+            ArahUlar == 0 &&
+            ((e.code === "KeyW" && Ular.dy === 0) ||
+                (e.code == "KeyS" && Ular.dy === 0))
+        ) {
+            ArahUlar = 1;
+            Ular.dy = e.code == "KeyW" ? -grid : grid;
+            Ular.dx = 0;
+        } 
+
+        else if (
+            ArahUlar == 0 &&
+            ((e.code === "ArrowUp" && Ular.dy === 0) ||
+                (e.code == "ArrowDown" && Ular.dy === 0))
+        ) {
+            ArahUlar = 1;
+            Ular.dy = e.code == "ArrowUp" ? -grid : grid;
+            Ular.dx = 0;
+        } 
+
+        else if (
+            ArahUlar == 0 &&
+            ((e.code === "ArrowLeft" && Ular.dx === 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
+// 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();
--- a/GameStyle.css
+++ b/GameStyle.css
@ -105,6 +105,49 @@
      #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;
@ -159,7 +202,7 @@
        font-family: "Pixelify Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
-        font-style: normal;
+    font-style: normal;
      }
      #mode-normal {
        background-color: #73e4c2;
--- a/daftar.php
+++ b/daftar.php
@ -7,9 +7,23 @@ 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>
    <meta charset="UTF-8">
@ -17,7 +31,8 @@ include "koneksi.php";
    <title>Halaman: Daftar</title>
 </head>
 <body>
-    <?php
+    <div>
+        <?php
        if(isset($_POST['username'])) {
            $nama = $_POST['nama'];
            $username = $_POST['username'];
@ -61,6 +76,6 @@ include "koneksi.php";
            </tr>
        </table>
    </form>
-
+    </div>
 </body>
 </html>
--- a/game.html
+++ b/game.html
@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!-- tes merge -->
 <html>
  <head>
    <link rel="stylesheet" href="GameStyle.css" />
@ -17,7 +18,7 @@
        <h1>Snake</h1>
      </div>
    </header>
-
+<img src="" alt="">
    <!-- main konten -->
    <div class="HalamanFull">
      <canvas width="1056" height="480" id="game"></canvas>
@ -56,4 +57,4 @@
    <!-- akhir html body -->
    <script src="GameLogic.js"></script>
  </body>
-</html>
+</html>
--- a/index.php
+++ b/index.php
@ -11,23 +11,29 @@ 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;
-      border: 2px solid; /* Nanti dihapus */
+      padding: 5px; /* 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(); */
    }

@ -36,7 +42,9 @@ if(!isset($_SESSION['username'])) {
      margin-top: 5%;
      width: 50%;
      margin-bottom: 5%;
-      border: 1px solid;
+      border: 2px solid #5c5b58;
+      background-color: #5c5b58;
+      color: white;
      border-radius: 3pt;
      padding: 2px;
      justify-self: center;
--- a/leaderboard.php
+++ b/leaderboard.php
@ -33,9 +33,24 @@ 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>
@ -46,7 +61,8 @@ if($result && mysqli_num_rows($result) > 0) {
    <link rel="stylesheet" href="">
 </head>
 <body>
-    <table>
+    <div class=container>
+        <table>
        <thead>
            <tr>
                <th>#</th>
@ -80,5 +96,6 @@ if($result && mysqli_num_rows($result) > 0) {
        </tbody>
        
    </table>
+    </div>
 </body>
 </html>
--- a/leaderboard/Leaderboard.png
+++ b/leaderboard/Leaderboard.png
--- a/login.php
+++ b/login.php
@ -23,15 +23,31 @@ if(isset($_POST['username'])) {
 <html lang="id">
    <style>
        body {
-            background: linear-gradient(to bottom right, #A3D438, #004D40);
-            /* height: 568px; */
+            background-color: rgb(24, 24, 24);
        }
        .login {
            /* background-image: url('login/login.png'); */
-            background-repeat: no-repeat;
-            background-size: 300px 190px;
-            background-position: center top;
            height: 568px;
+            margin-top: 0;
+            background-image: url("login/log.png");
+            background-size: 50% 80%;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+        h3 {
+            color: white;
+        }
+        table {
+            padding: 42px;
+            font-size: 50px;
+        }
+        a {
+            color: white;
+            font-size: 21px;
+        }
+        input {
+            color: white;
+            background-color: rgb(24, 24, 24);
        }
    </style>
    <head>
@ -46,21 +62,47 @@ if(isset($_POST['username'])) {
            <table align="center">
                <tr>
                    <td colspan="2" align="center">
-                        <h3>Login User</h3>
+                        <div id="h3">
+                            <h3>Login User</h3>
+                        </div>
                    </td>
                </tr>
                <tr>
-
                    <td></td>
-                    <td><input type="text" name="username" placeholder="Username" style="border: none"></td>
+                    <td align="center"><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><input type="password" name="password" placeholder="Password" style="border: none"></td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td>
+                    <td align="center">
                        <button type="submit">Masuk</button>
                        <a href="daftar.php">Daftar</a>
                    </td>
--- a/login/login.png
+++ b/login/login.png
--- a/score.php
+++ b/score.php
@ -0,0 +1,81 @@
+<?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)]);
+}
+?>
Author	SHA1	Message	Date
JERRY F	66f7aef1e3	merge main sama branch	2025-12-15 19:08:13 +07:00
JERRY F	41db432a3b	0 update	2025-12-15 18:45:00 +07:00
JERRY F	98ed90f636	update none	2025-12-15 18:30:36 +07:00
Daud	edca5a4219	styling masuk semua -Wenzel	2025-12-15 14:50:19 +07:00
JERRY F	5eb3013dd6	merge	2025-12-15 08:53:13 +07:00
JERRY F	26ee13e313	merge branch	2025-12-13 21:37:33 +07:00
JERRY F	2d50580188	ular dah ga sengklek	2025-12-13 21:27:27 +07:00
JERRY F	867a449ed7	ga jadi ga isa konek database e dek aku	2025-12-13 21:26:18 +07:00
JERRY F	92cfd08b94	ga jadi ga isa konek database e dek aku	2025-12-13 19:04:37 +07:00
JERRY F	da8b69c174	ga jadi ga isa konek	2025-12-13 19:00:10 +07:00
JERRY F	e8975da670	sek belom selesai	2025-12-13 06:31:14 +07:00
JERRY F	ea60abb7f1	nyamain ama main	2025-12-07 22:47:41 +07:00
JERRY F	0bec0e3f83	P	2025-12-07 22:40:54 +07:00
JERRY F	06ffdaaf7d	test	2025-12-01 13:10:03 +07:00
JERRY F	1191fdfca7	update gameover	2025-11-29 21:50:33 +07:00
JERRY F	8d57266b16	update game ga langsung start	2025-11-29 19:38:35 +07:00