test

GameLogic.js

@@ -2,7 +2,6 @@
       var canvas = document.getElementById("game");
       var content = canvas.getContext("2d");
       const Text = document.getElementById("text");
-      // const GameoverText = document.getElementById("gameover");
       const UpDead = document.getElementById("gameover-overlay");
       const ScoreMain = document.getElementById("gameover-score");
       const PlayAgain = document.getElementById("ulangi");
@@ -270,6 +269,7 @@
         });
       }
 
+      //update teks pada speed kalau score update
       function Movement() {
         if (++count < speed) return;
         if (ArahUlar > 0) ArahUlar--;
@@ -287,10 +287,12 @@
         if (Ular.cells.length > Ular.maxCells) Ular.cells.pop();
       }
 
-      //input keyboard buat jalan
+      //input keyboard
       function InputKeyboard() {
         document.addEventListener("keydown", function (e) {
           if (!GameStart) return;
+
+          // jalan buat ular
           if (
             ArahUlar == 0 &&
             ((e.code == "KeyA" && Ular.dx === 0) ||
@@ -307,12 +309,29 @@
             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 > 4
+              e.code == "KeyE" && speed > 5
                 ? speed - 1
-                : e.code == "KeyQ" && speed < 9
+                : e.code == "KeyQ" && speed < 15
                 ? speed + 1
                 : speed;
         });

GameStyle.css

@@ -2,7 +2,10 @@
         background-color: rgb(24, 24, 24);
         color: white;
         text-align: left;
-        font-family: "Comic Sans MS", cursive, sans-serif;
+        font-family: "Pixelify Sans", sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 400;
+        font-style: normal;
         font-size: 24px;
       }
       header,
@@ -72,6 +75,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;
@@ -109,7 +155,7 @@
         padding: 15px 30px;
         font-size: 20px;
         cursor: pointer;
-        color: white;
+        color: rgb(255, 255, 255);
         border: none;
         border-radius: 5px;
         margin: 10px 5px;
@@ -119,6 +165,10 @@
         margin-left: auto;
         margin-right: auto;
         transition: background-color 0.2s, color 0.25s;
+        font-family: "Pixelify Sans", sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 400;
+    font-style: normal;
       }
       #mode-normal {
         background-color: #73e4c2;

game.html

@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="GameStyle.css">
+    <link rel="stylesheet" href="GameStyle.css" />
-     </head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Coral+Pixels&family=Jacquarda+Bastarda+9&family=Pixelify+Sans:wght@400..700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
   <body>
     <!-- header -->
     <header>
@@ -33,7 +39,7 @@
         </div>
       </div>
       <div>
-        <div class="text">Controls: <br />Movement: W A S D <br /><br /></div>
+        <!-- <div class="text">Controls: <br />Movement: W A S D <br /><br /></div> -->
         <div id="text" class="text"></div>
       </div>
     </div>
@@ -45,6 +51,6 @@
       </div>
     </footer>
     <!-- akhir html body -->
-     <script src="GameLogic.js"></script>
+    <script src="GameLogic.js"></script>
   </body>
 </html>

home.html

@@ -0,0 +1,47 @@
+<html>
+    <style>
+        body {
+            background-image: url();
+        }
+        h1 {
+            text-align: center;
+            margin-top: 10%;
+            font-size: 85px;
+        }
+
+        .container {
+            padding: 5px;
+            border: 2px solid;          /* Nanti dihapus */
+            border-radius: 7pt;         /* Nanti dihapus */
+            width: 70%;
+            justify-self: center;
+            background-image: url();
+            
+        }
+
+        #button {
+            font-size: 35px;
+            margin-top: 5%;
+            width: 50%;
+            margin-bottom: 5%;
+            border: 1px solid;
+            border-radius: 3pt;
+            padding: 2px;
+            justify-self: center;
+            text-align: center;
+        }
+    </style>
+
+    <body>
+        <h1>EAT THAT APPLE</h1>
+        <div class="container">
+            <div id="button">Play Game</div>
+            <div id="button">Leaderboard</div>
+            <div id="button">Quit</div>
+        </div>
+    </body>
+
+    <script>
+
+    </script>
+</html>