Hugging Face's logo

Spaces:
openfree
/
Minesweeper-Game
Running

App Files Community
openfree commited on
Commit
8999237
ยท
verified ยท
1 Parent(s): 4f114d3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +427 -19
index.html CHANGED
@@ -1,19 +1,427 @@
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>๊ณ ๊ธ‰ ์ง€๋ขฐ์ฐพ๊ธฐ</title>
7
+ <style>
8
+ :root {
9
+ --cell-size: 35px;
10
+ --border-color: #7B7B7B;
11
+ --cell-bg: #C0C0C0;
12
+ --revealed-bg: #E0E0E0;
13
+ }
14
+
15
+ body {
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: center;
19
+ background: #f0f0f0;
20
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
21
+ margin: 0;
22
+ padding: 20px;
23
+ }
24
+
25
+ /* ์ƒ๋‹จ ๋ฉ”์‹œ์ง€ ์Šคํƒ€์ผ */
26
+ .message-container {
27
+ width: 100%;
28
+ background: #333;
29
+ color: white;
30
+ padding: 20px 0;
31
+ margin-bottom: 30px;
32
+ text-align: center;
33
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
34
+ }
35
+
36
+ .message-title {
37
+ font-size: 24px;
38
+ margin-bottom: 10px;
39
+ }
40
+
41
+ .message-subtitle {
42
+ font-size: 16px;
43
+ margin-bottom: 10px;
44
+ color: #ddd;
45
+ }
46
+
47
+ .message-link {
48
+ font-size: 14px;
49
+ color: #66ccff;
50
+ text-decoration: none;
51
+ }
52
+
53
+ .message-link:hover {
54
+ text-decoration: underline;
55
+ }
56
+
57
+ /* ๊ฒŒ์ž„ ์ปจํ…Œ์ด๋„ˆ ์Šคํƒ€์ผ */
58
+ .game-container {
59
+ background: var(--cell-bg);
60
+ padding: 15px;
61
+ border-radius: 8px;
62
+ box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
63
+ }
64
+
65
+ .header {
66
+ display: flex;
67
+ justify-content: space-between;
68
+ align-items: center;
69
+ background: var(--cell-bg);
70
+ padding: 10px;
71
+ margin-bottom: 15px;
72
+ border: 3px solid var(--border-color);
73
+ }
74
+
75
+ .display {
76
+ background: black;
77
+ color: red;
78
+ padding: 5px 10px;
79
+ font-family: "Digital-7", monospace;
80
+ font-size: 24px;
81
+ min-width: 70px;
82
+ text-align: center;
83
+ }
84
+
85
+ .controls {
86
+ margin-bottom: 15px;
87
+ }
88
+
89
+ select {
90
+ padding: 5px;
91
+ margin-right: 10px;
92
+ }
93
+
94
+ .game-board {
95
+ display: grid;
96
+ gap: 1px;
97
+ background: var(--border-color);
98
+ border: 3px solid var(--border-color);
99
+ }
100
+
101
+ .cell {
102
+ width: var(--cell-size);
103
+ height: var(--cell-size);
104
+ background: var(--cell-bg);
105
+ display: flex;
106
+ justify-content: center;
107
+ align-items: center;
108
+ font-weight: bold;
109
+ font-size: 18px;
110
+ cursor: pointer;
111
+ user-select: none;
112
+ transition: background-color 0.2s;
113
+ border: 2px solid;
114
+ border-color: #fff #7B7B7B #7B7B7B #fff;
115
+ }
116
+
117
+ .cell:hover:not(.revealed) {
118
+ background: #d0d0d0;
119
+ }
120
+
121
+ .revealed {
122
+ background: var(--revealed-bg);
123
+ border: 1px solid #999;
124
+ }
125
+
126
+ .mine {
127
+ background: #ff4444 !important;
128
+ }
129
+
130
+ .flagged {
131
+ background: var(--cell-bg);
132
+ }
133
+
134
+ button {
135
+ padding: 8px 16px;
136
+ font-size: 14px;
137
+ cursor: pointer;
138
+ background: var(--cell-bg);
139
+ border: 2px solid;
140
+ border-color: #fff #7B7B7B #7B7B7B #fff;
141
+ }
142
+
143
+ button:hover {
144
+ background: #d0d0d0;
145
+ }
146
+
147
+ .color-1 { color: blue; }
148
+ .color-2 { color: green; }
149
+ .color-3 { color: red; }
150
+ .color-4 { color: darkblue; }
151
+ .color-5 { color: darkred; }
152
+ .color-6 { color: teal; }
153
+ .color-7 { color: black; }
154
+ .color-8 { color: gray; }
155
+
156
+ .smiley {
157
+ font-size: 24px;
158
+ cursor: pointer;
159
+ user-select: none;
160
+ padding: 5px 15px;
161
+ background: var(--cell-bg);
162
+ border: 2px solid;
163
+ border-color: #fff #7B7B7B #7B7B7B #fff;
164
+ }
165
+
166
+ .smiley:hover {
167
+ background: #d0d0d0;
168
+ }
169
+ </style>
170
+ </head>
171
+ <body>
172
+ <!-- ์ƒ๋‹จ ๋ฉ”์‹œ์ง€ -->
173
+ <div class="message-container">
174
+ <div class="message-title">MOUSE Autonomous "Minesweeper Game"</div>
175
+ <div class="message-subtitle">"One-minute creation by AI Coding Autonomous Agent MOUSE"</div>
176
+ <a href="https://VIDraft-mouse1.hf.space" class="message-link">https://VIDraft-mouse1.hf.space</a>
177
+ </div>
178
+
179
+ <!-- ๊ฒŒ์ž„ ์ปจํ…Œ์ด๋„ˆ -->
180
+ <div class="game-container">
181
+ <div class="controls">
182
+ <select id="difficulty">
183
+ <option value="beginner">์ดˆ๊ธ‰ (9x9, 10์ง€๋ขฐ)</option>
184
+ <option value="intermediate">์ค‘๊ธ‰ (16x16, 40์ง€๋ขฐ)</option>
185
+ <option value="expert">๊ณ ๊ธ‰ (16x30, 99์ง€๋ขฐ)</option>
186
+ </select>
187
+ </div>
188
+ <div class="header">
189
+ <div class="display" id="mine-count">010</div>
190
+ <div class="smiley" id="smiley">๐Ÿ˜Š</div>
191
+ <div class="display" id="timer">000</div>
192
+ </div>
193
+ <div class="game-board" id="board" oncontextmenu="return false"></div>
194
+ </div>
195
+
196
+ <script>
197
+ // ์ด์ „ JavaScript ์ฝ”๋“œ๋ฅผ ๊ทธ๋Œ€๋กœ ์œ ์ง€
198
+ const difficulties = {
199
+ beginner: { width: 9, height: 9, mines: 10 },
200
+ intermediate: { width: 16, height: 16, mines: 40 },
201
+ expert: { width: 30, height: 16, mines: 99 }
202
+ };
203
+
204
+ let board = [];
205
+ let revealed = [];
206
+ let flagged = [];
207
+ let gameOver = false;
208
+ let minesRemaining;
209
+ let timeElapsed = 0;
210
+ let timerInterval;
211
+ let firstClick = true;
212
+ let currentDifficulty = difficulties.beginner;
213
+
214
+ // ... (์ด์ „์˜ ๋ชจ๋“  JavaScript ํ•จ์ˆ˜๋“ค์„ ๊ทธ๋Œ€๋กœ ์œ ์ง€)
215
+
216
+ document.getElementById('difficulty').addEventListener('change', (e) => {
217
+ currentDifficulty = difficulties[e.target.value];
218
+ initGame();
219
+ });
220
+
221
+ document.getElementById('smiley').addEventListener('click', initGame);
222
+
223
+ function formatDisplay(num) {
224
+ return String(num).padStart(3, '0');
225
+ }
226
+
227
+ function updateTimer() {
228
+ timeElapsed++;
229
+ document.getElementById('timer').textContent = formatDisplay(Math.min(timeElapsed, 999));
230
+ }
231
+
232
+ function initGame() {
233
+ clearInterval(timerInterval);
234
+ timeElapsed = 0;
235
+ document.getElementById('timer').textContent = '000';
236
+ document.getElementById('smiley').textContent = '๐Ÿ˜Š';
237
+
238
+ board = [];
239
+ revealed = [];
240
+ flagged = [];
241
+ gameOver = false;
242
+ firstClick = true;
243
+ minesRemaining = currentDifficulty.mines;
244
+
245
+ document.getElementById('mine-count').textContent = formatDisplay(minesRemaining);
246
+
247
+ for(let i = 0; i < currentDifficulty.height; i++) {
248
+ board[i] = [];
249
+ revealed[i] = [];
250
+ flagged[i] = [];
251
+ for(let j = 0; j < currentDifficulty.width; j++) {
252
+ board[i][j] = 0;
253
+ revealed[i][j] = false;
254
+ flagged[i][j] = false;
255
+ }
256
+ }
257
+
258
+ const boardElement = document.getElementById('board');
259
+ boardElement.style.gridTemplateColumns = `repeat(${currentDifficulty.width}, var(--cell-size))`;
260
+ renderBoard();
261
+ }
262
+
263
+ function placeMines(firstRow, firstCol) {
264
+ let minesPlaced = 0;
265
+ while(minesPlaced < currentDifficulty.mines) {
266
+ const x = Math.floor(Math.random() * currentDifficulty.height);
267
+ const y = Math.floor(Math.random() * currentDifficulty.width);
268
+
269
+ if(board[x][y] !== -1 && !(Math.abs(x - firstRow) <= 1 && Math.abs(y - firstCol) <= 1)) {
270
+ board[x][y] = -1;
271
+ minesPlaced++;
272
+ }
273
+ }
274
+
275
+ for(let i = 0; i < currentDifficulty.height; i++) {
276
+ for(let j = 0; j < currentDifficulty.width; j++) {
277
+ if(board[i][j] !== -1) {
278
+ let count = 0;
279
+ for(let dx = -1; dx <= 1; dx++) {
280
+ for(let dy = -1; dy <= 1; dy++) {
281
+ const nx = i + dx;
282
+ const ny = j + dy;
283
+ if(nx >= 0 && nx < currentDifficulty.height && ny >= 0 && ny < currentDifficulty.width) {
284
+ if(board[nx][ny] === -1) count++;
285
+ }
286
+ }
287
+ }
288
+ board[i][j] = count;
289
+ }
290
+ }
291
+ }
292
+ }
293
+
294
+ function renderBoard() {
295
+ const boardElement = document.getElementById('board');
296
+ boardElement.innerHTML = '';
297
+
298
+ for(let i = 0; i < currentDifficulty.height; i++) {
299
+ for(let j = 0; j < currentDifficulty.width; j++) {
300
+ const cell = document.createElement('div');
301
+ cell.className = 'cell';
302
+ cell.dataset.row = i;
303
+ cell.dataset.col = j;
304
+
305
+ if(revealed[i][j]) {
306
+ cell.classList.add('revealed');
307
+ if(board[i][j] === -1) {
308
+ cell.classList.add('mine');
309
+ cell.textContent = '๐Ÿ’ฃ';
310
+ } else if(board[i][j] > 0) {
311
+ cell.textContent = board[i][j];
312
+ cell.classList.add(`color-${board[i][j]}`);
313
+ }
314
+ } else if(flagged[i][j]) {
315
+ cell.classList.add('flagged');
316
+ cell.textContent = '๐Ÿšฉ';
317
+ }
318
+
319
+ cell.addEventListener('mousedown', () => {
320
+ if(!gameOver && !revealed[i][j]) {
321
+ document.getElementById('smiley').textContent = '๐Ÿ˜ฎ';
322
+ }
323
+ });
324
+
325
+ cell.addEventListener('mouseup', () => {
326
+ if(!gameOver) {
327
+ document.getElementById('smiley').textContent = '๐Ÿ˜Š';
328
+ }
329
+ });
330
+
331
+ cell.addEventListener('mouseleave', () => {
332
+ if(!gameOver) {
333
+ document.getElementById('smiley').textContent = '๐Ÿ˜Š';
334
+ }
335
+ });
336
+
337
+ cell.addEventListener('click', handleClick);
338
+ cell.addEventListener('contextmenu', handleRightClick);
339
+ boardElement.appendChild(cell);
340
+ }
341
+ }
342
+ }
343
+
344
+ function handleClick(e) {
345
+ if(gameOver) return;
346
+
347
+ const row = parseInt(e.target.dataset.row);
348
+ const col = parseInt(e.target.dataset.col);
349
+
350
+ if(flagged[row][col]) return;
351
+
352
+ if(firstClick) {
353
+ firstClick = false;
354
+ placeMines(row, col);
355
+ timerInterval = setInterval(updateTimer, 1000);
356
+ }
357
+
358
+ if(board[row][col] === -1) {
359
+ gameOver = true;
360
+ clearInterval(timerInterval);
361
+ document.getElementById('smiley').textContent = '๐Ÿ˜ต';
362
+ revealAll();
363
+ return;
364
+ }
365
+
366
+ revealCell(row, col);
367
+ renderBoard();
368
+
369
+ if(checkWin()) {
370
+ gameOver = true;
371
+ clearInterval(timerInterval);
372
+ document.getElementById('smiley').textContent = '๐Ÿ˜Ž';
373
+ }
374
+ }
375
+
376
+ function handleRightClick(e) {
377
+ e.preventDefault();
378
+ if(gameOver || firstClick) return;
379
+
380
+ const row = parseInt(e.target.dataset.row);
381
+ const col = parseInt(e.target.dataset.col);
382
+
383
+ if(revealed[row][col]) return;
384
+
385
+ flagged[row][col] = !flagged[row][col];
386
+ minesRemaining += flagged[row][col] ? -1 : 1;
387
+ document.getElementById('mine-count').textContent = formatDisplay(minesRemaining);
388
+ renderBoard();
389
+ }
390
+
391
+ function revealCell(row, col) {
392
+ if(row < 0 || row >= currentDifficulty.height || col < 0 || col >= currentDifficulty.width) return;
393
+ if(revealed[row][col] || flagged[row][col]) return;
394
+
395
+ revealed[row][col] = true;
396
+
397
+ if(board[row][col] === 0) {
398
+ for(let dx = -1; dx <= 1; dx++) {
399
+ for(let dy = -1; dy <= 1; dy++) {
400
+ revealCell(row + dx, col + dy);
401
+ }
402
+ }
403
+ }
404
+ }
405
+
406
+ function revealAll() {
407
+ for(let i = 0; i < currentDifficulty.height; i++) {
408
+ for(let j = 0; j < currentDifficulty.width; j++) {
409
+ revealed[i][j] = true;
410
+ }
411
+ }
412
+ renderBoard();
413
+ }
414
+
415
+ function checkWin() {
416
+ for(let i = 0; i < currentDifficulty.height; i++) {
417
+ for(let j = 0; j < currentDifficulty.width; j++) {
418
+ if(board[i][j] !== -1 && !revealed[i][j]) return false;
419
+ }
420
+ }
421
+ return true;
422
+ }
423
+
424
+ initGame();
425
+ </script>
426
+ </body>
427
+ </html>