From 0bec0e3f83ce1d751f12f1e3922f9b62d64fe962 Mon Sep 17 00:00:00 2001
From: JERRY F <boanerges-y.inf25@ukwms.ac.id>
Date: Sun, 7 Dec 2025 22:40:54 +0700
Subject: [PATCH] P

---
 GameLogic.js | 648 +++++++++++++++++++++++++--------------------------
 game.html    |   2 +-
 2 files changed, 320 insertions(+), 330 deletions(-)

diff --git a/GameLogic.js b/GameLogic.js
index 85f0940..e75221c 100644
--- a/GameLogic.js
+++ b/GameLogic.js
@@ -1,340 +1,330 @@
-      //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 KepalaKeKanan = new Image();
+KepalaKeKanan.src = "image/KepalaHorizontalKanan.png";
+var KepalaKeAtas = new Image();
+KepalaKeAtas.src = "image/KepalaVertikalAtas.png";
+var KepalaKeKiri = new Image();
+KepalaKeKiri.src = "image/KepalaVertikalBawah.png";
+var KepalaKeBawah = new Image();
+KepalaKeBawah.src = "image/KepalaHorizontalKiri.png";
+// ↑ kepala ular
 
-      var BadanUlarImage = new Image();
-      BadanUlarImage.src = "image/BadanVertikal.png";
-      // ↑ badan ular
+var BadanHori = new Image();
+BadanHori.src = "image/BadanHorizontal.png";
+var BadanVerti = new Image();
+BadanVerti.src = "image/BadanVertical.png";
+// ↑ badan ular
 
-      var ApelImage = new Image();
-      ApelImage.src = "image/ApelLayer.png"; // Apel
-      var TembokImage = new Image();
-      TembokImage.src = "image/Tembok.png"; // Tembok Batagor
+var ApelImage = new Image();
+ApelImage.src = "image/ApelLayer.png"; // Apel
+var TembokImage = new Image();
+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 };
-      var Apel = { x: 0, y: 0 };
-      var Tembok = [];
-      UpdateScore(0);
+//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();
+
+//mastiin gambar external generate dulu sebelum game start
+KepalaKeKanan.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
+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.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();
+});
+
+//gameover terus ngatur ular ke setting awal
+function gameLoop() {
+  if (!GameStart) {
+    requestAnimationFrame(gameLoop);
+    return;
+  }
+  ClearCanvas();
+  Movement();
+  IntiGame();
+
+  requestAnimationFrame(gameLoop);
+}
+
+//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;
+}
+
+//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 (Ular.cells[i].x === TembokX && Ular.cells[i].y === TembokY) {
+        kosong = false;
+        break;
+      }
+    }
+
+    //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 (Tembok.length < Math.floor(score / 2)) {
+      RandomSpawnWall();
+    }
+  }
+}
+
+//set dan update score
+function UpdateScore(amount) {
+  score = amount > 0 ? score + amount : 0;
+  highscore = score > highscore ? score : highscore;
+  Text.innerHTML =
+    "Score: " + score + "<br>Highscore: " + highscore + "<br>Speed: " + speed;
+
+  PenambahanTembok();
+}
+
+//tampilin gameover
+function GameOver() {
+  GameStart = false;
+  ClearCanvas();
+
+  // TAMPILKAN POP-UP GAME OVER
+  ScoreMain.innerHTML = "Score: " + score;
+  UpDead.style.display = "flex";
+}
+
+//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);
+  });
+
+  Ular.cells.forEach(function (cell, index) {
+    if (index === 0) {
+      // Logika Pemilihan Gambar Kepala Ular
+      var posisiKepalaImage;
+      if (Ular.dx === grid) {
+        // KANAN
+        posisiKepalaImage = KepalaKeKanan;
+      } else if (Ular.dx === -grid) {
+        // KIRI
+        posisiKepalaImage = KepalaKeKiri;
+      } else if (Ular.dy === -grid) {
+        // ATAS
+        posisiKepalaImage = KepalaKeBawah;
+      } else if (Ular.dy === grid) {
+        // BAWAH
+        posisiKepalaImage = KepalaKeAtas;
+      } else {
+        // Default, misalnya saat game baru mulai (dx=grid, dy=0, atau default awal)
+        posisiKepalaImage = KepalaKeKanan;
+      }
+
+      content.drawImage(posisiKepalaImage, cell.x, cell.y, grid, grid);
+    } else {
+      content.drawImage(BadanHori, cell.x, cell.y, grid, grid);
+    }
+  });
+
+  //bagian generate ular
+  Ular.cells.forEach(function (cell, index) {
+    if (index === 0) {
+      content.drawImage(KepalaKeKanan, cell.x, cell.y, grid, grid);
+    } else {
+      content.drawImage(BadanHori, 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();
+    }
 
-      //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
-      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.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();
-      });
-
-      //gameover terus ngatur ular ke setting awal
-      function gameLoop() {
-        if (!GameStart) {
-          requestAnimationFrame(gameLoop);
-          return;
-        }
-        ClearCanvas();
-        Movement();
-        IntiGame();
-
-        requestAnimationFrame(gameLoop);
-      }
-
-      //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;
-      }
-
-      //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 (Ular.cells[i].x === TembokX && Ular.cells[i].y === TembokY) {
-              kosong = false;
-              break;
-            }
-          }
-
-          //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 (Tembok.length < Math.floor(score / 2)) {
-            RandomSpawnWall();
-          }
-        }
-      }
-
-      //set dan update score
-      function UpdateScore(amount) {
-        score = amount > 0 ? score + amount : 0;
-        highscore = score > highscore ? score : highscore;
-        Text.innerHTML =
-          "Score: " +
-          score +
-          "<br>Highscore: " +
-          highscore +
-          "<br>Speed: " +
-          speed;
-
-        PenambahanTembok();
-      }
-
-      //tampilin gameover
-      function GameOver() {
-        GameStart = false;
-        ClearCanvas();
-
-        // TAMPILKAN POP-UP GAME OVER
-        ScoreMain.innerHTML = "Score: " + score;
-        UpDead.style.display = "flex";
-      }
-
-      //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);
-        });
-
-        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;
-            }
-
-            content.drawImage(posisiKepalaImage, cell.x, cell.y, grid, grid);
-          } else {
-            content.drawImage(BadanUlarImage, cell.x, cell.y, grid, grid);
-          }
-        });
-
-        //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
-        )
+    //tabrak tembok = mati
+    if (index === 0) {
+      Tembok.forEach(function (bata) {
+        if (cell.x === bata.x && cell.y === bata.y) {
           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;
+    //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();
+  });
+}
 
-          // 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;
-          } 
+//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();
+}
 
-          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();
\ No newline at end of file
+//input keyboard
+function InputKeyboard() {
+  document.addEventListener("keydown", function (e) {
+    if (!GameStart) return;
+
+    // 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 (e.code === "KeyE" || e.code == "KeyQ")
+      speed =
+        e.code == "KeyE" && speed > 2
+          ? speed - 1
+          : e.code == "KeyQ" && speed < 30
+          ? speed + 1
+          : speed;
+  });
+}
+InputKeyboard();
+gameLoop();
diff --git a/game.html b/game.html
index 0540269..6b3cdac 100644
--- a/game.html
+++ b/game.html
@@ -17,7 +17,7 @@
         <h1>Snake</h1>
       </div>
     </header>
-
+<img src="" alt="">
     <!-- main konten -->
     <div class="HalamanFull">
       <canvas width="1056" height="480" id="game"></canvas>