Skip to content

Commit 22f3617

Browse files
swapnilsparshswapnilsparsh
committed
New UI update
1 parent 62839ac commit 22f3617

File tree

696 files changed

+60164
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

696 files changed

+60164
-0
lines changed

‎projects/2048-game/game.js

+215
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const gridDisplay = document.querySelector('.grid-container');
3+
const scoreDisplay = document.querySelector('.score-container');
4+
const bestDisplay = document.querySelector('.best-container');
5+
const newGameButton = document.querySelector('.new-game-button');
6+
const tileContainer = document.querySelector('.tile-container');
7+
let tiles = [];
8+
let score = 0;
9+
let best = 0;
10+
11+
// Create the playing board
12+
function createBoard() {
13+
gridDisplay.innerHTML = ''; // Clear previous grid cells
14+
tiles = []; // Reset tiles array
15+
for (let i = 0; i < 16; i++) {
16+
let tile = document.createElement('div');
17+
tile.classList.add('grid-cell');
18+
gridDisplay.appendChild(tile);
19+
tiles.push(0);
20+
}
21+
addNumber();
22+
addNumber();
23+
}
24+
25+
// Add a number to the board
26+
function addNumber() {
27+
let emptyTiles = [];
28+
tiles.forEach((tile, index) => {
29+
if (tile === 0) emptyTiles.push(index);
30+
});
31+
if (emptyTiles.length > 0) {
32+
let randomNumber = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
33+
tiles[randomNumber] = 2;
34+
displayTiles();
35+
}
36+
}
37+
38+
// Display the tiles on the board
39+
function displayTiles() {
40+
tileContainer.innerHTML = '';
41+
if(window.innerWidth > 530){
42+
tiles.forEach((tile, index) => {
43+
if (tile !== 0) {
44+
let tileElement = document.createElement('div');
45+
tileElement.classList.add('tile');
46+
tileElement.classList.add(`tile-${tile}`);
47+
tileElement.innerText = tile;
48+
tileElement.style.top = `${Math.floor(index / 4) * 110}px`;
49+
tileElement.style.left = `${(index % 4) * 110}px`;
50+
tileContainer.appendChild(tileElement);
51+
}
52+
});
53+
} else {
54+
tiles.forEach((tile, index) => {
55+
if (tile !== 0) {
56+
let tileElement = document.createElement('div');
57+
tileElement.classList.add('tile');
58+
tileElement.classList.add(`tile-${tile}`);
59+
tileElement.innerText = tile;
60+
tileElement.style.top = `${Math.floor(index / 4) * 80}px`;
61+
tileElement.style.left = `${(index % 4) * 80}px`;
62+
tileContainer.appendChild(tileElement);
63+
}
64+
});
65+
}
66+
67+
checkForGameOver();
68+
checkForWin();
69+
}
70+
71+
// Check for game over condition
72+
function checkForGameOver() {
73+
if (!tiles.includes(0)) {
74+
for (let i = 0; i < 4; i++) {
75+
for (let j = 0; j < 4; j++) {
76+
let currentIndex = i * 4 + j;
77+
if (j < 3 && tiles[currentIndex] === tiles[currentIndex + 1]) return; // Check horizontal
78+
if (i < 3 && tiles[currentIndex] === tiles[currentIndex + 4]) return; // Check vertical
79+
}
80+
}
81+
alert("Game Over! No more moves available.");
82+
}
83+
}
84+
85+
// Check for 2048 tile
86+
function checkForWin() {
87+
if (tiles.includes(2048)) {
88+
alert("Congratulations! You've reached the 2048 tile!");
89+
}
90+
}
91+
92+
// Handle swipe events
93+
function moveTiles(direction) {
94+
let newTiles = [...tiles];
95+
for (let i = 0; i < 4; i++) {
96+
let row = [];
97+
for (let j = 0; j < 4; j++) {
98+
if (direction === 'right' || direction === 'left') {
99+
row.push(newTiles[i * 4 + j]);
100+
} else {
101+
row.push(newTiles[j * 4 + i]);
102+
}
103+
}
104+
if (direction === 'right' || direction === 'down') {
105+
row = row.reverse();
106+
}
107+
row = slide(row);
108+
if (direction === 'right' || direction === 'down') {
109+
row = row.reverse();
110+
}
111+
for (let j = 0; j < 4; j++) {
112+
if (direction === 'right' || direction === 'left') {
113+
newTiles[i * 4 + j] = row[j];
114+
} else {
115+
newTiles[j * 4 + i] = row[j];
116+
}
117+
}
118+
}
119+
if (JSON.stringify(newTiles) !== JSON.stringify(tiles)) {
120+
tiles = newTiles;
121+
addNumber();
122+
displayTiles();
123+
}
124+
}
125+
126+
function slide(row) {
127+
let newRow = row.filter(tile => tile);
128+
for (let i = 0; i < newRow.length - 1; i++) {
129+
if (newRow[i] === newRow[i + 1]) {
130+
newRow[i] *= 2;
131+
score += newRow[i];
132+
newRow.splice(i + 1, 1);
133+
newRow.push(0);
134+
}
135+
}
136+
while (newRow.length < 4) {
137+
newRow.push(0);
138+
}
139+
return newRow;
140+
}
141+
142+
// Listen for key presses
143+
document.addEventListener('keydown', e => {
144+
if (e.key === 'ArrowRight') {
145+
moveTiles('right');
146+
} else if (e.key === 'ArrowLeft') {
147+
moveTiles('left');
148+
} else if (e.key === 'ArrowUp') {
149+
moveTiles('up');
150+
} else if (e.key === 'ArrowDown') {
151+
moveTiles('down');
152+
}
153+
scoreDisplay.textContent = score;
154+
if (score > best) {
155+
best = score;
156+
bestDisplay.textContent = best;
157+
}
158+
});
159+
160+
// Variables to store touch positions
161+
let touchStartX = 0;
162+
let touchStartY = 0;
163+
let touchEndX = 0;
164+
let touchEndY = 0;
165+
166+
// Function to handle swipe detection
167+
function handleSwipe() {
168+
const diffX = touchEndX - touchStartX;
169+
const diffY = touchEndY - touchStartY;
170+
171+
if (Math.abs(diffX) > Math.abs(diffY)) {
172+
// Horizontal swipe
173+
if (diffX > 0) {
174+
moveTiles('right');
175+
} else {
176+
moveTiles('left');
177+
}
178+
} else {
179+
// Vertical swipe
180+
if (diffY > 0) {
181+
moveTiles('down');
182+
} else {
183+
moveTiles('up');
184+
}
185+
}
186+
scoreDisplay.textContent = score;
187+
if (score > best) {
188+
best = score;
189+
bestDisplay.textContent = best;
190+
}
191+
}
192+
193+
// Event listeners for touch events
194+
document.addEventListener('touchstart', e => {
195+
touchStartX = e.changedTouches[0].screenX;
196+
touchStartY = e.changedTouches[0].screenY;
197+
});
198+
199+
document.addEventListener('touchend', e => {
200+
touchEndX = e.changedTouches[0].screenX;
201+
touchEndY = e.changedTouches[0].screenY;
202+
handleSwipe();
203+
});
204+
205+
206+
// Start a new game
207+
newGameButton.addEventListener('click', () => {
208+
score = 0;
209+
scoreDisplay.textContent = "Current score = "+score;
210+
bestDisplay.textContent = "Best score = "+best;
211+
createBoard();
212+
});
213+
214+
createBoard();
215+
});

‎projects/2048-game/index.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>2048 Game</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="heading">
12+
<h1>2048</h1>
13+
<div class="scores-container">
14+
<div class="score-container">Current Score = 0</div>
15+
<div class="best-container">Best Score = 0</div>
16+
</div>
17+
<button class="new-game-button">New Game</button>
18+
</div>
19+
<div class="game-container">
20+
<div class="grid-container">
21+
<div class="grid-row">
22+
<div class="grid-cell"></div>
23+
<div class="grid-cell"></div>
24+
<div class="grid-cell"></div>
25+
<div class="grid-cell"></div>
26+
</div>
27+
<div class="grid-row">
28+
<div class="grid-cell"></div>
29+
<div class="grid-cell"></div>
30+
<div class="grid-cell"></div>
31+
<div class="grid-cell"></div>
32+
</div>
33+
<div class="grid-row">
34+
<div class="grid-cell"></div>
35+
<div class="grid-cell"></div>
36+
<div class="grid-cell"></div>
37+
<div class="grid-cell"></div>
38+
</div>
39+
<div class="grid-row">
40+
<div class="grid-cell"></div>
41+
<div class="grid-cell"></div>
42+
<div class="grid-cell"></div>
43+
<div class="grid-cell"></div>
44+
</div>
45+
</div>
46+
<div class="tile-container"></div>
47+
</div>
48+
<p class="game-explanation">
49+
<strong>HOW TO PLAY:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
50+
</p>
51+
</div>
52+
<script src="game.js"></script>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)