18 changed files with 0 additions and 316 deletions
--- a/ApelLayer.png
+++ b/ApelLayer.png
--- a/BadanHorizontal.png
+++ b/BadanHorizontal.png
--- a/BadanVertikal.png
+++ b/BadanVertikal.png
--- a/BelokAtasKanan.png
+++ b/BelokAtasKanan.png
--- a/BelokAtasKiri.png
+++ b/BelokAtasKiri.png
--- a/BelokBawahKanan.png
+++ b/BelokBawahKanan.png
--- a/BelokBawahKiri.png
+++ b/BelokBawahKiri.png
--- a/BokongHorizontalKanan.png
+++ b/BokongHorizontalKanan.png
--- a/BokongHorizontalKiri.png
+++ b/BokongHorizontalKiri.png
--- a/BokongVertikalAtas.png
+++ b/BokongVertikalAtas.png
--- a/BokongVertikalBawah.png
+++ b/BokongVertikalBawah.png
--- a/KepalaHorizontalKanan.png
+++ b/KepalaHorizontalKanan.png
--- a/KepalaHorizontalKiri.png
+++ b/KepalaHorizontalKiri.png
--- a/KepalaVertikalAtas.png
+++ b/KepalaVertikalAtas.png
--- a/KepalaVertikalBawah.png
+++ b/KepalaVertikalBawah.png
--- a/PialaLayer.png
+++ b/PialaLayer.png
--- a/Tembok.png
+++ b/Tembok.png
--- a/copy.html
+++ b/copy.html
@ -1,316 +0,0 @@
 <!DOCTYPE html>
 <!--Code by GameDev Freddie - Youtube.com/@GameDev-Freddie-->
 <html>
  <head>
    <style>
      body {
        background-color: rgb(24, 24, 24);
        color: white;
        text-align: left;
        font-family: "Comic Sans MS", cursive, sans-serif;
        font-size: 24px;
      }
      header,
      footer,
      .HalamanFull {
        padding-left: 50px;
        padding-right: 50px;
      }
      header,
      footer {
        background-color: rgb(18, 18, 18);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .HalamanFull {
        background-color: rgb(28, 28, 28);
        color: white;
        height: 100%;
        display: flex;
        align-items: left;
        justify-content: left;
        padding-bottom: 20px;
        padding-top: 20px;
      }
      .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-size: cover;
        margin-right: 20px;
        margin-left: 20px;
      }
      .centered {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      h1 {
        font-size: 40px;
        margin-right: 100px;
      }
      .text {
        padding-top: 30px;
        padding-left: 50px;
        color: white;
      }
      #gameover {
        color: red;
        font-size: 90px;
        position: absolute;
        top: 450px;
        left: 210px;
      }
      #game {
        background: rgb(192, 232, 255);
        border: 1px solid white;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="centered">
        <div class="icon"></div>
        <h1>Snake</h1>
      </div>
    </header>
    <div class="HalamanFull">
      <canvas width="800" height="800" id="game"></canvas>
      <div id="gameover" class="gameover"></div>
      <div>
        <div class="text">
          Controls: <br />Movement: W A S D <br /><br />
        </div>
        <div id="text" class="text"></div>
      </div>
    </div>
    <script>
      //bagian tempat main ama buat generate game 2d
      var canvas = document.getElementById("game");
      var content = canvas.getContext("2d");
      const Text = document.getElementById("text");
      const GameoverText = document.getElementById("gameover");
      //settingan awal
      var grid = 16;
      var count = 0;
      var speed = 8;
      var score = 0;
      var highscore = 0;
      var ArahUlar = 0;
      var GameOverTimer = 0;
      //generate gambar external
      var KepalaUlarImage = new Image();
      KepalaUlarImage.src = "KepalaVertikalAtas.png"; // kepala ular
      var BadanUlarImage = new Image();
      BadanUlarImage.src = "BadanVertikal.png"; // badan ular awal
      var ApelImage = new Image();
      ApelImage.src = "ApelLayer.png"; // Apel
      var TembokImage = new Image();
      TembokImage.src = "Tembok.png"; // Tembok Batagor
      //set posisi ular dan Apel
      var Ular = { x: 400, y: 400, dx: grid, dy: 0, cells: [], maxCells: 4 };
      var Apel = { x: 0, y: 0 };
      var Tembok = [];
      UpdateScore(-1);
      RandomizeApel();
      RandomSpawnWall();
      //mastiin gambar external generate dulu sebelum game start
      KepalaUlarImage.onload = function () {
        function gameLoop() {}
      };
      //gameover terus ngatur ular ke setting awal
      function gameLoop() {
        if (GameOverTimer > 0) {
          GameOverTimer -= 0.006;
          GameoverText.innerHTML =
            GameOverTimer > 0
              ? "Gameover " + GameOverTimer.toFixed(0).toString()
              : "";
          if (GameOverTimer <= 0) {
            Ular.x = 400;
            Ular.y = 400;
            Ular.cells = [];
            Ular.maxCells = 4;
            Ular.dx = grid;
            Ular.dy = 0;
            RandomizeApel();
            UpdateScore(-1);
          }
        } else {
          InputKeyboard();
          ClearCanvas();
          Movement();
          IntiGame();
        }
        requestAnimationFrame(gameLoop);
      }
      //random spawn Apel
      function RandomizeApel() {
        Apel.x = Math.floor(Math.random() * 50) * grid;
        Apel.y = Math.floor(Math.random() * 50) * grid;
      }
      function RandomSpawnWall() {
        var TembokX, TembokY;
        var kosong;
        //create tembok
        do {
          kosong = true;
          TembokX = Math.floor(Math.random() * 50) * grid;
          TembokY = Math.floor(Math.random() * 50) * 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;
          }
        } while (kosong === false);
        Tembok.push({x:TembokX, y:TembokY})
      }
      //nambah tembok tiap score +10
      function PenambahanTembok() {
        if (score > 0 && score % 10 === 0 && Tembok.length < (score/10)) {
          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();
      }
      //gameover countdown
      function GameOver() {
        GameOverTimer = 3;
      }
      //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 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 === wall.x && cell.y === wall.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();
        });
      }
      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 buat jalan
      function InputKeyboard() {
        document.addEventListener("keydown", function (e) {
          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;
          }
          if (e.code === "KeyE" || e.code == "KeyQ")
            speed =
              e.code == "KeyE" && speed > 4
                ? speed - 1
                : e.code == "KeyQ" && speed < 9
                ? speed + 1
                : speed;
        });
      }
      gameLoop();
    </script>
    <footer class="centered">
      <div class="centered">
        <p></p>
      </div>
    </footer>
  </body>
 </html>