Skip to content

Commit 467b4ad

Browse files
Moiz-CodeByteMoiz-CodeByte
committed
Enhance mobile touch support and improve responsiveness.
1 parent a0c0ace commit 467b4ad

File tree

3 files changed

+102
-13
lines changed

3 files changed

+102
-13
lines changed

‎Day #12 - 2048 Game/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<meta name="apple-mobile-web-app-capable" content="yes">
67
<link rel="stylesheet" href="style.css">
78
<title>2048 Game | MoizCodeByte</title>
89
</head>

‎Day #12 - 2048 Game/script.js‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ function createGrid() {
1515
const cell = document.createElement('div');
1616
cell.classList.add('grid-cell');
1717
if (grid[i][j] !== 0) {
18-
cell.textContent = grid[i][j];
1918
cell.setAttribute('data-value', grid[i][j]);
19+
} else {
20+
cell.removeAttribute('data-value');
2021
}
2122
gridContainer.appendChild(cell);
2223
}
@@ -132,11 +133,15 @@ let touchStartX = 0;
132133
let touchStartY = 0;
133134

134135
function handleTouchStart(e) {
136+
e.preventDefault(); // Prevent default browser handling
135137
touchStartX = e.touches[0].clientX;
136138
touchStartY = e.touches[0].clientY;
137139
}
138140

139141
function handleTouchEnd(e) {
142+
e.preventDefault(); // Prevent default browser handling
143+
if (!touchStartX || !touchStartY) return; // Exit if we didn't get a valid start position
144+
140145
const touchEndX = e.changedTouches[0].clientX;
141146
const touchEndY = e.changedTouches[0].clientY;
142147

@@ -145,7 +150,7 @@ function handleTouchEnd(e) {
145150
const absDx = Math.abs(dx);
146151
const absDy = Math.abs(dy);
147152

148-
if (Math.max(absDx, absDy) > 20) { // Swipe threshold
153+
if (Math.max(absDx, absDy) > 10) { // Lower swipe threshold for better responsiveness
149154
if (absDx > absDy) {
150155
if (dx > 0) {
151156
handleMove(39); // Swipe right
@@ -160,10 +165,27 @@ function handleTouchEnd(e) {
160165
}
161166
}
162167
}
168+
169+
// Reset touch coordinates
170+
touchStartX = 0;
171+
touchStartY = 0;
163172
}
164173

165-
document.addEventListener('touchstart', handleTouchStart, false);
166-
document.addEventListener('touchend', handleTouchEnd, false);
174+
// Use touchmove to prevent scrolling while swiping
175+
function handleTouchMove(e) {
176+
if (touchStartX && touchStartY) {
177+
e.preventDefault(); // Prevent scrolling
178+
}
179+
}
180+
181+
// Remove previous touch listeners if they exist
182+
document.removeEventListener('touchstart', handleTouchStart);
183+
document.removeEventListener('touchend', handleTouchEnd);
184+
185+
// Add improved touch event listeners
186+
document.addEventListener('touchstart', handleTouchStart, {passive: false});
187+
document.addEventListener('touchend', handleTouchEnd, {passive: false});
188+
document.addEventListener('touchmove', handleTouchMove, {passive: false});
167189

168190
function initGame() {
169191
generateRandom();

‎Day #12 - 2048 Game/style.css‎

Lines changed: 74 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,32 @@ body {
66
height: 100vh;
77
margin: 0;
88
background-color: #f7592b;
9+
touch-action: none; /* Prevent browser handling of touch events */
910
}
1011

1112
.container {
1213
background-color: white;
13-
padding: 30px;
14+
padding: 20px;
1415
border-radius: 15px;
1516
text-align: center;
16-
width: 100%;
17+
width: 95%;
1718
max-width: 500px;
19+
box-sizing: border-box;
20+
}
21+
22+
h1 {
23+
margin-top: 0;
24+
font-size: 2rem;
1825
}
1926

2027
.game-container {
2128
background-color: #bbada0;
2229
border-radius: 6px;
23-
padding: 20px;
30+
padding: 15px;
2431
margin: 0 auto;
2532
display: inline-block;
33+
width: 100%;
34+
box-sizing: border-box;
2635
}
2736

2837
#grid-container {
@@ -31,21 +40,39 @@ body {
3140
grid-template-rows: repeat(4, 1fr);
3241
gap: 10px;
3342
width: 100%;
34-
max-width: 400px;
43+
aspect-ratio: 1/1; /* Ensure the entire grid is square */
3544
}
3645

37-
/* Ensure grid cells maintain a square aspect ratio */
3846
.grid-cell {
47+
position: relative;
3948
width: 100%;
40-
padding-bottom: 100%; /* Creates a square aspect ratio */
4149
background-color: #cdc1b4;
4250
border-radius: 6px;
4351
display: flex;
4452
justify-content: center;
4553
align-items: center;
46-
font-size: 1.5rem; /* Adjust font size for better visibility */
4754
font-weight: bold;
4855
color: #776e65;
56+
aspect-ratio: 1/1; /* Each cell is a perfect square */
57+
user-select: none; /* Prevent text selection during swipes */
58+
}
59+
60+
.grid-cell::before {
61+
content: attr(data-value);
62+
font-size: 1.5rem;
63+
position: absolute;
64+
}
65+
66+
/* Responsive font sizes based on cell values */
67+
.grid-cell[data-value="128"]::before,
68+
.grid-cell[data-value="256"]::before,
69+
.grid-cell[data-value="512"]::before {
70+
font-size: 1.3rem;
71+
}
72+
73+
.grid-cell[data-value="1024"]::before,
74+
.grid-cell[data-value="2048"]::before {
75+
font-size: 1.1rem;
4976
}
5077

5178
/* Color specific rules for different cell values */
@@ -63,6 +90,45 @@ body {
6390

6491
.score-container {
6592
margin-top: 20px;
66-
font-size: 1.5rem; /* Adjusted for better readability on mobile */
93+
font-size: 1.5rem;
6794
font-weight: bold;
6895
}
96+
97+
/* Media queries for smaller screens */
98+
@media (max-width: 480px) {
99+
.container {
100+
padding: 10px;
101+
}
102+
103+
h1 {
104+
font-size: 1.5rem;
105+
margin-bottom: 10px;
106+
}
107+
108+
.game-container {
109+
padding: 10px;
110+
}
111+
112+
#grid-container {
113+
gap: 5px;
114+
}
115+
116+
.grid-cell::before {
117+
font-size: 1.2rem;
118+
}
119+
120+
.grid-cell[data-value="128"]::before,
121+
.grid-cell[data-value="256"]::before,
122+
.grid-cell[data-value="512"]::before {
123+
font-size: 1rem;
124+
}
125+
126+
.grid-cell[data-value="1024"]::before,
127+
.grid-cell[data-value="2048"]::before {
128+
font-size: 0.9rem;
129+
}
130+
131+
.score-container {
132+
font-size: 1.2rem;
133+
}
134+
}

0 commit comments

Comments
 (0)