SWIPING ON A MOBILE FONE OR touchscreen;)

Games/2048/index.html

@@ -11,11 +11,5 @@
     <h1>2048</h1>
     <h2>Score: <span id="score">0</span></h2>
     <div id="board"></div>
-    <article class="arrowBack">
-        <button class="arrows" onclick="left()"><img src="" alt="Left Arrow"></button>
-        <button class="arrows" onclick="up()"><img src="" alt="Up Arrow"></button>
-        <button class="arrows" onclick="down()"><img src="" alt="Down Arrow"></button>
-        <button class="arrows" onclick="right()"><img src="" alt="Right Arrow"></button>
-    </article>
 </body>
 </html>

Games/2048/main.js

@@ -2,6 +2,7 @@ var board;
 var score = 0;
 var rows = 4;
 var columns = 4;
+let startX, startY, endX, endY;
 
 window.onload = function(){
     setGame();
@@ -177,26 +178,42 @@ function hasEmptyTile() {
     return false;
 }
 
-function left(){
+document.addEventListener('touchstart', function(e){
+    startX = e.touches[0].clientX;
+    startY = e.touches[0].clientY;
+}, {passive: true});
+
+document.addEventListener('touchend', function(e){
+    endX = e.changedTouches[0].clientX;
+    endY = e.changedTouches[0].clientY;
+    handleSwipe();
+}, {passive: true});
+
+function handleSwipe(){
+    let diffX = endX - startX;
+    let diffY = endY - startY;
+
+    if(Math.abs(diffX)==Math.abs(diffY)){
+        console.log('Dot :3');
+    }else if(Math.abs(diffX) > Math.abs(diffY)){ //- Horizontal swipe
+        if(diffX > 0){  //? Right
+            slideRight();
+            setTwo();
+            document.getElementById("score").innerText = score;
+        }else{          //? Left
             slideLeft();
             setTwo();
             document.getElementById("score").innerText = score;
         }
-
+    }else{ //- Vertical swipe
-function up(){
+        if(diffY > 0){  //? Down
+            slideDown();
+            setTwo();
+            document.getElementById("score").innerText = score;
+        }else{          //? Up
             slideUp();
             setTwo();
             document.getElementById("score").innerText = score;
         }
-
-function down(){
-    slideDown();
-    setTwo();
-    document.getElementById("score").innerText = score;
     }
-
-function right(){
-    slideRight();
-    setTwo();
-    document.getElementById("score").innerText = score;
 }

Games/2048/style.css

@@ -19,10 +19,6 @@ body{
     background-size: cover;
 }
 
-hr{
-    width: 500px;
-}
-
 #board{
     width: 372px;
     height: 372px;
@@ -65,23 +61,6 @@ hr{
     }
 }
 
-
-.arrowBack{
-    height: 90px;
-    width: 372px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-top: 1rem;
-}
-
-.arrows{
-    height: 90px;
-    width: 90px;
-    border: none;
-    border-radius: 50%;
-}
-
 @media screen and (max-width: 500px){
     body{
         background-image: url("./mobile.jpg");
@@ -96,14 +75,6 @@ hr{
         width: 60px;
         border: 3px solid #bbada0;
     }
-    .arrowBack{
-        height: 60px;
-        width: 246px;
-    }
-    .arrows{
-        height: 60px;
-        width: 60px;
-    }
 }
 
 .x2{