Hugging Face's logo

Spaces:
madansa7
/
sliding-puzzle-challenge-game
Running

App Files Community
madansa7 commited on
Commit
201ed39
·
verified ·
1 Parent(s): d12bd1b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +306 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sliding Puzzle Challenge Game
3
- emoji: 💻
4
- colorFrom: green
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: sliding-puzzle-challenge-game
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,306 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Sliding Puzzle Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .tile {
11
+ transition: all 0.3s ease;
12
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
13
+ }
14
+ .tile:hover {
15
+ transform: scale(1.02);
16
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
17
+ }
18
+ .win-message {
19
+ animation: fadeIn 0.5s ease-in-out;
20
+ }
21
+ @keyframes fadeIn {
22
+ from { opacity: 0; transform: translateY(20px); }
23
+ to { opacity: 1; transform: translateY(0); }
24
+ }
25
+ .puzzle-container {
26
+ perspective: 1000px;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gradient-to-br from-blue-50 to-purple-100 min-h-screen flex flex-col items-center justify-center p-4">
31
+ <div class="max-w-4xl w-full">
32
+ <h1 class="text-4xl font-bold text-center text-purple-800 mb-2">Sliding Puzzle Challenge</h1>
33
+ <p class="text-center text-gray-600 mb-8">Slide the tiles to reconstruct the image. Click on adjacent tiles to swap with the empty space.</p>
34
+
35
+ <div class="flex flex-col md:flex-row gap-8 items-center justify-center">
36
+ <div class="puzzle-container bg-white rounded-xl p-4 shadow-xl">
37
+ <div class="grid grid-cols-3 gap-2 mb-4" id="puzzle-grid">
38
+ <!-- Puzzle tiles will be inserted here by JavaScript -->
39
+ </div>
40
+
41
+ <div class="flex justify-between items-center mt-4">
42
+ <div class="text-lg font-semibold text-purple-700">
43
+ Moves: <span id="move-counter">0</span>
44
+ </div>
45
+ <div class="flex gap-2">
46
+ <button id="shuffle-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition flex items-center gap-2">
47
+ <i class="fas fa-random"></i> Shuffle
48
+ </button>
49
+ <button id="new-game-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex items-center gap-2">
50
+ <i class="fas fa-redo"></i> New Game
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+
56
+ <div class="bg-white rounded-xl p-6 shadow-xl max-w-xs w-full">
57
+ <h2 class="text-xl font-bold text-purple-800 mb-4">How to Play</h2>
58
+ <ul class="space-y-3 text-gray-700">
59
+ <li class="flex items-start gap-2">
60
+ <i class="fas fa-arrow-right text-purple-500 mt-1"></i>
61
+ <span>Click on a tile adjacent to the empty space to move it</span>
62
+ </li>
63
+ <li class="flex items-start gap-2">
64
+ <i class="fas fa-arrow-right text-purple-500 mt-1"></i>
65
+ <span>Rearrange all tiles to complete the image</span>
66
+ </li>
67
+ <li class="flex items-start gap-2">
68
+ <i class="fas fa-arrow-right text-purple-500 mt-1"></i>
69
+ <span>Try to solve it in the fewest moves possible</span>
70
+ </li>
71
+ </ul>
72
+
73
+ <div class="mt-6">
74
+ <h3 class="font-semibold text-gray-800 mb-2">Completed Image:</h3>
75
+ <img src="https://source.unsplash.com/random/300x300/?nature" alt="Target image" class="rounded-lg border border-gray-200 w-full" id="target-image">
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Win Modal -->
82
+ <div id="win-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
83
+ <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 win-message">
84
+ <div class="text-center">
85
+ <i class="fas fa-trophy text-6xl text-yellow-500 mb-4"></i>
86
+ <h2 class="text-3xl font-bold text-purple-800 mb-2">Congratulations!</h2>
87
+ <p class="text-gray-600 mb-6">You solved the puzzle in <span id="final-moves" class="font-bold">0</span> moves!</p>
88
+ <button id="play-again-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg text-lg font-medium w-full">
89
+ Play Again
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <script>
96
+ document.addEventListener('DOMContentLoaded', function() {
97
+ // Game state
98
+ const gridSize = 3;
99
+ let puzzleState = [];
100
+ let emptyPos = { row: gridSize - 1, col: gridSize - 1 };
101
+ let moveCount = 0;
102
+ let isGameWon = false;
103
+
104
+ // DOM elements
105
+ const puzzleGrid = document.getElementById('puzzle-grid');
106
+ const moveCounter = document.getElementById('move-counter');
107
+ const shuffleBtn = document.getElementById('shuffle-btn');
108
+ const newGameBtn = document.getElementById('new-game-btn');
109
+ const winModal = document.getElementById('win-modal');
110
+ const finalMoves = document.getElementById('final-moves');
111
+ const playAgainBtn = document.getElementById('play-again-btn');
112
+
113
+ // Initialize the game
114
+ initGame();
115
+
116
+ // Event listeners
117
+ shuffleBtn.addEventListener('click', shufflePuzzle);
118
+ newGameBtn.addEventListener('click', initGame);
119
+ playAgainBtn.addEventListener('click', initGame);
120
+
121
+ // Initialize game
122
+ function initGame() {
123
+ // Reset game state
124
+ moveCount = 0;
125
+ isGameWon = false;
126
+ moveCounter.textContent = moveCount;
127
+ winModal.classList.add('hidden');
128
+
129
+ // Create ordered puzzle state (1-8, with 9 as empty)
130
+ puzzleState = [];
131
+ for (let i = 0; i < gridSize * gridSize - 1; i++) {
132
+ puzzleState.push(i + 1);
133
+ }
134
+ puzzleState.push(0); // 0 represents the empty space
135
+
136
+ // Shuffle the puzzle
137
+ shufflePuzzle();
138
+
139
+ // Render the puzzle
140
+ renderPuzzle();
141
+ }
142
+
143
+ // Shuffle the puzzle
144
+ function shufflePuzzle() {
145
+ if (isGameWon) {
146
+ isGameWon = false;
147
+ winModal.classList.add('hidden');
148
+ }
149
+
150
+ // Reset move counter
151
+ moveCount = 0;
152
+ moveCounter.textContent = moveCount;
153
+
154
+ // Fisher-Yates shuffle algorithm
155
+ for (let i = puzzleState.length - 1; i > 0; i--) {
156
+ const j = Math.floor(Math.random() * (i + 1));
157
+ [puzzleState[i], puzzleState[j]] = [puzzleState[j], puzzleState[i]];
158
+ }
159
+
160
+ // Find the empty position
161
+ const emptyIndex = puzzleState.indexOf(0);
162
+ emptyPos = {
163
+ row: Math.floor(emptyIndex / gridSize),
164
+ col: emptyIndex % gridSize
165
+ };
166
+
167
+ // Check if the puzzle is solvable (must have even inversions)
168
+ if (!isSolvable()) {
169
+ // If not solvable, swap first two non-empty tiles to make it solvable
170
+ if (puzzleState[0] === 0 || puzzleState[1] === 0) {
171
+ [puzzleState[2], puzzleState[3]] = [puzzleState[3], puzzleState[2]];
172
+ } else {
173
+ [puzzleState[0], puzzleState[1]] = [puzzleState[1], puzzleState[0]];
174
+ }
175
+ }
176
+
177
+ renderPuzzle();
178
+ }
179
+
180
+ // Check if the puzzle is solvable
181
+ function isSolvable() {
182
+ let inversions = 0;
183
+ const flattened = puzzleState.filter(num => num !== 0);
184
+
185
+ for (let i = 0; i < flattened.length - 1; i++) {
186
+ for (let j = i + 1; j < flattened.length; j++) {
187
+ if (flattened[i] > flattened[j]) {
188
+ inversions++;
189
+ }
190
+ }
191
+ }
192
+
193
+ // For a 3x3 grid, the puzzle is solvable if inversions are even
194
+ return inversions % 2 === 0;
195
+ }
196
+
197
+ // Render the puzzle grid
198
+ function renderPuzzle() {
199
+ puzzleGrid.innerHTML = '';
200
+
201
+ for (let row = 0; row < gridSize; row++) {
202
+ for (let col = 0; col < gridSize; col++) {
203
+ const index = row * gridSize + col;
204
+ const tileValue = puzzleState[index];
205
+
206
+ if (tileValue === 0) {
207
+ // Empty space
208
+ const emptyTile = document.createElement('div');
209
+ emptyTile.className = 'bg-gray-200 rounded-lg aspect-square flex items-center justify-center opacity-70';
210
+ emptyTile.dataset.row = row;
211
+ emptyTile.dataset.col = col;
212
+ puzzleGrid.appendChild(emptyTile);
213
+ } else {
214
+ // Numbered tile
215
+ const tile = document.createElement('div');
216
+ tile.className = 'tile bg-gradient-to-br from-purple-100 to-blue-100 rounded-lg aspect-square flex items-center justify-center text-2xl font-bold text-purple-800 cursor-pointer';
217
+ tile.textContent = tileValue;
218
+ tile.dataset.row = row;
219
+ tile.dataset.col = col;
220
+ tile.dataset.value = tileValue;
221
+
222
+ // Add background image slice
223
+ tile.style.backgroundImage = `url(https://source.unsplash.com/random/300x300/?nature)`;
224
+ tile.style.backgroundSize = `${gridSize * 100}% ${gridSize * 100}%`;
225
+
226
+ // Calculate background position for the image slice
227
+ const targetRow = Math.floor((tileValue - 1) / gridSize);
228
+ const targetCol = (tileValue - 1) % gridSize;
229
+ const xPos = (targetCol / (gridSize - 1)) * 100;
230
+ const yPos = (targetRow / (gridSize - 1)) * 100;
231
+ tile.style.backgroundPosition = `${xPos}% ${yPos}%`;
232
+
233
+ tile.addEventListener('click', () => handleTileClick(row, col));
234
+ puzzleGrid.appendChild(tile);
235
+ }
236
+ }
237
+ }
238
+
239
+ // Update empty position
240
+ const emptyIndex = puzzleState.indexOf(0);
241
+ emptyPos = {
242
+ row: Math.floor(emptyIndex / gridSize),
243
+ col: emptyIndex % gridSize
244
+ };
245
+ }
246
+
247
+ // Handle tile click
248
+ function handleTileClick(row, col) {
249
+ if (isGameWon) return;
250
+
251
+ // Check if the clicked tile is adjacent to the empty space
252
+ const isAdjacent =
253
+ (Math.abs(row - emptyPos.row) === 1 && col === emptyPos.col) ||
254
+ (Math.abs(col - emptyPos.col) === 1 && row === emptyPos.row);
255
+
256
+ if (isAdjacent) {
257
+ // Swap positions
258
+ const clickedIndex = row * gridSize + col;
259
+ const emptyIndex = emptyPos.row * gridSize + emptyPos.col;
260
+
261
+ // Update puzzle state
262
+ [puzzleState[clickedIndex], puzzleState[emptyIndex]] =
263
+ [puzzleState[emptyIndex], puzzleState[clickedIndex]];
264
+
265
+ // Update move counter
266
+ moveCount++;
267
+ moveCounter.textContent = moveCount;
268
+
269
+ // Re-render the puzzle
270
+ renderPuzzle();
271
+
272
+ // Check if puzzle is solved
273
+ checkWinCondition();
274
+ }
275
+ }
276
+
277
+ // Check if the puzzle is solved
278
+ function checkWinCondition() {
279
+ for (let i = 0; i < puzzleState.length - 1; i++) {
280
+ if (puzzleState[i] !== i + 1) {
281
+ return false;
282
+ }
283
+ }
284
+
285
+ if (puzzleState[puzzleState.length - 1] === 0) {
286
+ // Puzzle is solved
287
+ isGameWon = true;
288
+ finalMoves.textContent = moveCount;
289
+ winModal.classList.remove('hidden');
290
+
291
+ // Add confetti effect
292
+ const confettiSettings = { target: 'confetti-canvas', max: 150 };
293
+ const confetti = new ConfettiGenerator(confettiSettings);
294
+ confetti.render();
295
+
296
+ setTimeout(() => {
297
+ confetti.clear();
298
+ }, 3000);
299
+ }
300
+ }
301
+ });
302
+ </script>
303
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
304
+ <canvas id="confetti-canvas" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000;"></canvas>
305
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=madansa7/sliding-puzzle-challenge-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
306
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Puzzle or Brain Teaser: Generate a random puzzle (e.g. word scramble, sliding puzzle, crossword mini, or riddle of the day). Value: Engages users mentally; puzzles are entertaining and can encourage repeat visits. Implementation: For a word scramble, pick a word and shuffle its letters in JS. For a sliding puzzle, use a grid of images. For daily riddles, maintain a list of riddles and present one per day. Inspiration: Classic puzzle implementations can be found online; this would be a simple yet engaging add-on.