From 6305cb0a0b202b8f259e0e5998b5ff95972b4df0 Mon Sep 17 00:00:00 2001 From: MrEidam Date: Sat, 10 Aug 2024 15:41:09 +0200 Subject: [PATCH] SWIPING ON A MOBILE FONE OR touchscreen;) --- Games/2048/index.html | 6 --- Games/2048/main.js | 107 ++++++++++++++++++++++++------------------ Games/2048/style.css | 39 ++------------- 3 files changed, 67 insertions(+), 85 deletions(-) diff --git a/Games/2048/index.html b/Games/2048/index.html index a304f30..af169de 100644 --- a/Games/2048/index.html +++ b/Games/2048/index.html @@ -11,11 +11,5 @@

2048

Score: 0

-
- - - - -
\ No newline at end of file diff --git a/Games/2048/main.js b/Games/2048/main.js index 375aeaa..9f8c272 100644 --- a/Games/2048/main.js +++ b/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(){ - slideRight(); - setTwo(); - document.getElementById("score").innerText = score; + 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; + } + } } \ No newline at end of file diff --git a/Games/2048/style.css b/Games/2048/style.css index 236938b..c9cb2f2 100644 --- a/Games/2048/style.css +++ b/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{