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,12 +2,13 @@ var board;
 var score = 0;
 var rows = 4;
 var columns = 4;
+let startX, startY, endX, endY;
 
-window.onload = function() {
+window.onload = function(){
     setGame();
 }
 
-function setGame() {
+function setGame(){
 
     board = [
         [0,0,0,0],
@@ -36,13 +37,13 @@ function setGame() {
     setTwo();
 }
 
-function updateTile(tile, num) {
+function updateTile(tile, num){
     tile.innerText="";
     tile.classList.value=""; //clear the classList
     tile.classList.add("tile");
     if(num>0) {
         tile.innerText=num.toString();
-        if(num<=4096) {
+        if(num<=4096){
             tile.classList.add("x"+num.toString());
         }else{
             tile.classList.add("x8192");
@@ -54,11 +55,11 @@ function filterZero(row){
     return row.filter(num => num != 0); //cteare a new array without 0
 }
 
-function slide(row) {
+function slide(row){
     //[0, 2, 2, 2] 
     row = filterZero(row); //[2, 2, 2]
-    for (let i = 0; i < row.length-1; i++){
-        if (row[i] == row[i+1]) {
+    for(let i = 0; i < row.length-1; i++){
+        if(row[i] == row[i+1]){
             row[i] *= 2;
             row[i+1] = 0;
             score += row[i];
@@ -66,14 +67,14 @@ function slide(row) {
     } //[4, 0, 2]
     row = filterZero(row); //[4, 2]
     //add zeroes
-    while (row.length < columns) {
+    while(row.length < columns){
         row.push(0);
     } //[4, 2, 0, 0]
     return row;
 }
 
 document.addEventListener('keyup', (e) => {
-    switch (e.code) {
+    switch(e.code){
         case "ArrowLeft": slideLeft(); setTwo(); break;
         case "ArrowRight": slideRight(); setTwo(); break;
         case "ArrowUp": slideUp(); setTwo(); break;
@@ -82,12 +83,12 @@ document.addEventListener('keyup', (e) => {
     document.getElementById("score").innerText = score;
 });
 
-function slideLeft() {
-    for (let r = 0; r < rows; r++) {
+function slideLeft(){
+    for(let r = 0; r < rows; r++){
         let row = board[r];
         row = slide(row);
         board[r] = row;
-        for (let c = 0; c < columns; c++){
+        for(let c = 0; c < columns; c++){
             let tile = document.getElementById(r.toString() + "-" + c.toString());
             let num = board[r][c];
             updateTile(tile, num);
@@ -95,13 +96,13 @@ function slideLeft() {
     }
 }
 
-function slideRight() {
-    for (let r = 0; r < rows; r++) {
+function slideRight(){
+    for(let r = 0; r < rows; r++){
         let row = board[r];         //[0, 2, 2, 2]
         row.reverse();              //[2, 2, 2, 0]
         row = slide(row)            //[4, 2, 0, 0]
         board[r] = row.reverse();   //[0, 0, 2, 4];
-        for (let c = 0; c < columns; c++){
+        for(let c = 0; c < columns; c++){
             let tile = document.getElementById(r.toString() + "-" + c.toString());
             let num = board[r][c];
             updateTile(tile, num);
@@ -109,15 +110,15 @@ function slideRight() {
     }
 }
 
-function slideUp() {
-    for (let c = 0; c < columns; c++) {
+function slideUp(){
+    for(let c = 0; c < columns; c++){
         let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
         row = slide(row);
         // board[0][c] = row[0];
         // board[1][c] = row[1];
         // board[2][c] = row[2];
         // board[3][c] = row[3];
-        for (let r = 0; r < rows; r++){
+        for(let r = 0; r < rows; r++){
             board[r][c] = row[r];
             let tile = document.getElementById(r.toString() + "-" + c.toString());
             let num = board[r][c];
@@ -126,8 +127,8 @@ function slideUp() {
     }
 }
 
-function slideDown() {
-    for (let c = 0; c < columns; c++) {
+function slideDown(){
+    for(let c = 0; c < columns; c++){
         let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
         row.reverse();
         row = slide(row);
@@ -136,7 +137,7 @@ function slideDown() {
         // board[1][c] = row[1];
         // board[2][c] = row[2];
         // board[3][c] = row[3];
-        for (let r = 0; r < rows; r++){
+        for(let r = 0; r < rows; r++){
             board[r][c] = row[r];
             let tile = document.getElementById(r.toString() + "-" + c.toString());
             let num = board[r][c];
@@ -145,16 +146,16 @@ function slideDown() {
     }
 }
 
-function setTwo() {
-    if (!hasEmptyTile()) {
+function setTwo(){
+    if(!hasEmptyTile()){
         return;
     }
     let found = false;
-    while (!found) {
+    while(!found){
         //find random row and column to place a 2 in
         let r = Math.floor(Math.random() * rows);
         let c = Math.floor(Math.random() * columns);
-        if (board[r][c] == 0) {
+        if(board[r][c] == 0){
             board[r][c] = 2;
             let tile = document.getElementById(r.toString() + "-" + c.toString());
             tile.innerText = "2";
@@ -165,7 +166,7 @@ function setTwo() {
     }
 }
 
-function hasEmptyTile() {
+function hasEmptyTile(){
     let count = 0;
     for (let r = 0; r < rows; r++) {
         for (let c = 0; c < columns; c++) {
@@ -177,26 +178,42 @@ function hasEmptyTile() {
     return false;
 }
 
-function left(){
-    slideLeft();
-    setTwo();
-    document.getElementById("score").innerText = score;
-}
+document.addEventListener('touchstart', function(e){
+    startX = e.touches[0].clientX;
+    startY = e.touches[0].clientY;
+}, {passive: true});
 
-function up(){
-    slideUp();
-    setTwo();
-    document.getElementById("score").innerText = score;
-}
+document.addEventListener('touchend', function(e){
+    endX = e.changedTouches[0].clientX;
+    endY = e.changedTouches[0].clientY;
+    handleSwipe();
+}, {passive: true});
 
-function down(){
-    slideDown();
-    setTwo();
-    document.getElementById("score").innerText = score;
-}
+function handleSwipe(){
+    let diffX = endX - startX;
+    let diffY = endY - startY;
 
-function right(){
+    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
+        if(diffY > 0){  //? Down
+            slideDown();
+            setTwo();
+            document.getElementById("score").innerText = score;
+        }else{          //? Up
+            slideUp();
+            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;
@@ -35,7 +31,7 @@ hr{
     flex-wrap: wrap;
 }
 
-.tile {
+.tile{
     position: relative;
 
     width: 90px;
@@ -52,36 +48,19 @@ hr{
     transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out; /* Add smooth transitions */
 }
 
-.tile.new-tile {
+.tile.new-tile{
     animation: pop 0.2s ease-in-out;
 }
 
-@keyframes pop {
-    0% {
+@keyframes pop{
+    0%{
         transform: scale(0.5);
     }
-    100% {
+    100%{
         transform: scale(1);
     }
 }
 
-
-.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{