added coordinate system

avdol0521 · Oct 28, 2023 · b2874c9 · b2874c9
1 parent aba99e4
commit b2874c9
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.cdnfonts.com/css/minecraft-3" rel="stylesheet">
     <title>Movement :D</title>
 </head>
 <body>
@@ -10,6 +11,10 @@
             <button class="left"><i class="fa-solid fa-arrow-left"></i></button>
             <button class="right"><i class="fa-solid fa-arrow-right"></i></button>
         </div>
+        <div class="coords">
+            <span class="X">X: 0</span>
+            <span class="Y">Y: 0</span>
+        </div>
         <div class="screen">
             <div class="box">-_-</div>
         </div>

diff --git a/script.js b/script.js
@@ -6,6 +6,8 @@ const leftB = document.querySelector(".left");
 const rightB = document.querySelector(".right");
 let newT = 0;
 let newL = 0;
+const X = document.querySelector(".X");
+const Y = document.querySelector(".Y");
 
 // functions for movement
 const moveU = () => {
@@ -16,6 +18,7 @@ const moveU = () => {
         box.innerHTML = ":D";
         newT -= 10;
         box.style.top = newT + "px";
+        X.innerHTML = "X: " + ((-1) * newT);
         console.log(newT);
     }
 };
@@ -28,6 +31,7 @@ const moveD = () => {
         box.innerHTML = ":D";
         newT += 10;
         box.style.top = newT + "px";
+        X.innerHTML = "X: " + ((-1) * newT);
         console.log(newT);
     }
 };
@@ -40,6 +44,7 @@ const moveL = () => {
         box.innerHTML = ":D";
         newL -= 10;
         box.style.left = newL + "px";
+        Y.innerHTML = "Y: " + newL;
         console.log(newL);
     }
 };
@@ -52,6 +57,7 @@ const moveR = () => {
         box.innerHTML = ":D";
         newL += 10;
         box.style.left = newL + "px";
+        Y.innerHTML = "Y: " + newL;
         console.log(newL);
     }
 };

diff --git a/style.css b/style.css
@@ -5,6 +5,7 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 90vh;
+    font-family: 'Minecraft', sans-serif;
 }
 .casing {
     background-color: #ff6a6a;
@@ -52,8 +53,24 @@ button {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 5rem;
+    font-size: 3rem;
+    font-style: normal;
     background-color: #404040;
     border-radius: 20px;
     transition: top 0.2s ease-in-out, left 0.2s ease-in-out;
+}
+.coords {
+    position: absolute;
+    left: 350px;
+    top: 0px;
+    background-color: #404040;
+    width: 200px;
+    height: 50px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+span {
+    position: relative;
+    color: #ffffff;
 }