Hugging Face's logo

Spaces:
singanol
/
Tech_Hangman_Game
Running

App Files Community
Mmyass commited on
Commit
2e483ce
·
verified ·
1 Parent(s): e9c9990

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +380 -19
index.html CHANGED
@@ -1,19 +1,380 @@
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>Enhanced Robotic Hangman</title>
7
+ <style>
8
+ :root {
9
+ --neon-blue: #00f3ff;
10
+ --neon-pink: #ff00ff;
11
+ --dark-gray: #1a1a1a;
12
+ --light-gray: #333;
13
+ --robot-color: #4ae;
14
+ }
15
+
16
+ body {
17
+ margin: 0;
18
+ min-height: 100vh;
19
+ background: var(--dark-gray);
20
+ color: var(--neon-blue);
21
+ font-family: 'Courier New', monospace;
22
+ padding: 20px;
23
+ }
24
+
25
+ .game-container {
26
+ max-width: 1000px;
27
+ margin: 0 auto;
28
+ display: grid;
29
+ grid-template-columns: 300px 1fr;
30
+ gap: 20px;
31
+ }
32
+
33
+ .sidebar {
34
+ background: var(--light-gray);
35
+ padding: 20px;
36
+ border-radius: 10px;
37
+ border: 2px solid var(--neon-blue);
38
+ box-shadow: 0 0 10px var(--neon-blue);
39
+ }
40
+
41
+ .main-game {
42
+ background: var(--light-gray);
43
+ padding: 20px;
44
+ border-radius: 10px;
45
+ border: 2px solid var(--neon-blue);
46
+ box-shadow: 0 0 10px var(--neon-blue);
47
+ }
48
+
49
+ .difficulty-btns {
50
+ display: grid;
51
+ gap: 10px;
52
+ margin-bottom: 20px;
53
+ }
54
+
55
+ button {
56
+ background: transparent;
57
+ border: 1px solid var(--neon-blue);
58
+ color: var(--neon-blue);
59
+ padding: 10px;
60
+ border-radius: 5px;
61
+ cursor: pointer;
62
+ transition: all 0.3s;
63
+ font-family: 'Courier New', monospace;
64
+ }
65
+
66
+ button:hover {
67
+ background: var(--neon-blue);
68
+ color: var(--dark-gray);
69
+ box-shadow: 0 0 10px var(--neon-blue);
70
+ }
71
+
72
+ .robot-display {
73
+ font-family: monospace;
74
+ white-space: pre;
75
+ color: var(--robot-color);
76
+ text-shadow: 0 0 5px var(--robot-color);
77
+ margin: 20px 0;
78
+ }
79
+
80
+ .word-display {
81
+ font-size: 2.5em;
82
+ text-align: center;
83
+ margin: 20px 0;
84
+ letter-spacing: 10px;
85
+ text-shadow: 0 0 5px var(--neon-blue);
86
+ }
87
+
88
+ .keyboard {
89
+ display: grid;
90
+ grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
91
+ gap: 5px;
92
+ margin: 20px 0;
93
+ }
94
+
95
+ .keyboard button {
96
+ aspect-ratio: 1;
97
+ font-size: 1.2em;
98
+ }
99
+
100
+ .keyboard button.used {
101
+ opacity: 0.5;
102
+ cursor: not-allowed;
103
+ }
104
+
105
+ .stats {
106
+ margin-top: 20px;
107
+ padding: 10px;
108
+ border: 1px solid var(--neon-pink);
109
+ border-radius: 5px;
110
+ }
111
+
112
+ .message {
113
+ text-align: center;
114
+ height: 2em;
115
+ color: var(--neon-pink);
116
+ }
117
+
118
+ @keyframes neonFlicker {
119
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
120
+ text-shadow: 0 0 5px var(--neon-blue),
121
+ 0 0 10px var(--neon-blue),
122
+ 0 0 20px var(--neon-blue);
123
+ }
124
+ 20%, 22%, 24%, 55% {
125
+ text-shadow: none;
126
+ }
127
+ }
128
+
129
+ .neon-text {
130
+ animation: neonFlicker 2s infinite;
131
+ }
132
+
133
+ @media (max-width: 768px) {
134
+ .game-container {
135
+ grid-template-columns: 1fr;
136
+ }
137
+ }
138
+ </style>
139
+ </head>
140
+ <body>
141
+ <div class="game-container">
142
+ <div class="sidebar">
143
+ <h2 class="neon-text">DIFFICULTY</h2>
144
+ <div class="difficulty-btns">
145
+ <button data-diff="easy">EASY</button>
146
+ <button data-diff="medium">MEDIUM</button>
147
+ <button data-diff="hard">HARD</button>
148
+ </div>
149
+
150
+ <h2 class="neon-text">STATS</h2>
151
+ <div class="stats">
152
+ <p>Wins: <span id="wins">0</span></p>
153
+ <p>Losses: <span id="losses">0</span></p>
154
+ <p>Current Streak: <span id="streak">0</span></p>
155
+ </div>
156
+
157
+ <button id="hint-btn">GET HINT</button>
158
+ <button id="new-game-btn">NEW GAME</button>
159
+ </div>
160
+
161
+ <div class="main-game">
162
+ <div class="robot-display"></div>
163
+ <div class="word-display"></div>
164
+ <div class="message"></div>
165
+ <div class="keyboard"></div>
166
+ </div>
167
+ </div>
168
+
169
+ <script>
170
+ const words = {
171
+ easy: [
172
+ { word: 'BOT', hint: 'Automated program', category: 'TECH' },
173
+ { word: 'RAM', hint: 'Computer memory', category: 'TECH' },
174
+ { word: 'CPU', hint: 'Brain of computer', category: 'TECH' },
175
+ { word: 'APP', hint: 'Mobile software', category: 'TECH' },
176
+ { word: 'WEB', hint: 'Internet pages', category: 'TECH' },
177
+ { word: 'NET', hint: 'Type of network', category: 'TECH' },
178
+ { word: 'USB', hint: 'Connection type', category: 'TECH' },
179
+ { word: 'LED', hint: 'Light type', category: 'TECH' },
180
+ { word: 'API', hint: 'Interface for developers', category: 'TECH' },
181
+ { word: 'HTML', hint: 'Markup language', category: 'TECH' }
182
+ ],
183
+ medium: [
184
+ { word: 'ROBOT', hint: 'Mechanical being', category: 'TECH' },
185
+ { word: 'CYBER', hint: 'Digital realm', category: 'TECH' },
186
+ { word: 'LASER', hint: 'Light beam', category: 'TECH' },
187
+ { word: 'PIXEL', hint: 'Screen dot', category: 'TECH' },
188
+ { word: 'VIRUS', hint: 'Malicious software', category: 'TECH' },
189
+ { word: 'CACHE', hint: 'Data storage', category: 'TECH' },
190
+ { word: 'GAMER', hint: 'Video player', category: 'TECH' },
191
+ { word: 'CLOUD', hint: 'Internet storage', category: 'TECH' },
192
+ { word: 'EMAIL', hint: 'Electronic message', category: 'TECH' },
193
+ { word: 'SMART', hint: 'Intelligent device', category: 'TECH' }
194
+ ],
195
+ hard: [
196
+ { word: 'ANDROID', hint: 'Mobile OS', category: 'TECH' },
197
+ { word: 'QUANTUM', hint: 'Smallest unit', category: 'SCIENCE' },
198
+ { word: 'NETWORK', hint: 'Connected systems', category: 'TECH' },
199
+ { word: 'PROGRAM', hint: 'Software code', category: 'TECH' },
200
+ { word: 'COMPILE', hint: 'Code process', category: 'TECH' },
201
+ { word: 'ROUTING', hint: 'Data path', category: 'TECH' },
202
+ { word: 'ENCRYPT', hint: 'Secure data', category: 'TECH' },
203
+ { word: 'ANALYZE', hint: 'Examine data', category: 'TECH' },
204
+ { word: 'BACKEND', hint: 'Server side code', category: 'TECH' },
205
+ { word: 'FRONTEND', hint: 'User interface code', category: 'TECH' }
206
+ ]
207
+ };
208
+
209
+ class HangmanGame {
210
+ constructor() {
211
+ this.difficulty = 'medium';
212
+ this.word = '';
213
+ this.hint = '';
214
+ this.guessed = new Set();
215
+ this.remaining = 6;
216
+ this.stats = { wins: 0, losses: 0, streak: 0 };
217
+ this.gameActive = true;
218
+ this.previousWords = new Set();
219
+
220
+ this.initElements();
221
+ this.initEvents();
222
+ this.newGame();
223
+ }
224
+
225
+ initElements() {
226
+ this.robotDisplay = document.querySelector('.robot-display');
227
+ this.wordDisplay = document.querySelector('.word-display');
228
+ this.keyboard = document.querySelector('.keyboard');
229
+ this.message = document.querySelector('.message');
230
+
231
+ this.createKeyboard();
232
+ }
233
+
234
+ initEvents() {
235
+ document.querySelectorAll('[data-diff]').forEach(btn => {
236
+ btn.addEventListener('click', () => {
237
+ this.difficulty = btn.dataset.diff;
238
+ this.newGame();
239
+ });
240
+ });
241
+
242
+ document.getElementById('hint-btn').addEventListener('click', () => this.showHint());
243
+ document.getElementById('new-game-btn').addEventListener('click', () => this.newGame());
244
+ }
245
+
246
+ createKeyboard() {
247
+ for (let i = 65; i <= 90; i++) {
248
+ const btn = document.createElement('button');
249
+ btn.textContent = String.fromCharCode(i);
250
+ btn.addEventListener('click', (e) => this.handleGuess(e.target));
251
+ this.keyboard.appendChild(btn);
252
+ }
253
+ }
254
+
255
+ newGame() {
256
+ const wordPool = words[this.difficulty];
257
+ let wordData;
258
+
259
+ do {
260
+ wordData = wordPool[Math.floor(Math.random() * wordPool.length)];
261
+ } while (this.previousWords.has(wordData.word));
262
+
263
+ this.previousWords.add(wordData.word);
264
+ if (this.previousWords.size > 5) { // To prevent too large set
265
+ this.previousWords.clear();
266
+ }
267
+
268
+ this.word = wordData.word;
269
+ this.hint = wordData.hint;
270
+ this.guessed.clear();
271
+ this.remaining = 6;
272
+ this.gameActive = true;
273
+
274
+ this.keyboard.querySelectorAll('button').forEach(btn => {
275
+ btn.classList.remove('used');
276
+ btn.disabled = false;
277
+ });
278
+
279
+ this.updateDisplays();
280
+ this.message.textContent = '';
281
+ }
282
+
283
+ handleGuess(button) {
284
+ if (!this.gameActive) return;
285
+
286
+ const letter = button.textContent;
287
+ if (this.guessed.has(letter)) return;
288
+
289
+ this.guessed.add(letter);
290
+ button.classList.add('used');
291
+ button.disabled = true;
292
+
293
+ if (!this.word.includes(letter)) {
294
+ this.remaining--;
295
+ }
296
+
297
+ this.updateDisplays();
298
+ this.checkGameEnd();
299
+ }
300
+
301
+ updateDisplays() {
302
+ this.wordDisplay.textContent = [...this.word]
303
+ .map(letter => this.guessed.has(letter) ? letter : '_')
304
+ .join(' ');
305
+
306
+ this.updateRobot();
307
+ }
308
+
309
+ updateRobot() {
310
+ const stages = [
311
+ `
312
+ /\\___/\\
313
+ ( o o )
314
+ ( =^= )
315
+ (______)`,
316
+ `
317
+ /\\___/\\
318
+ ( x o )
319
+ ( =^= )
320
+ (______)`,
321
+ `
322
+ /\\___/\\
323
+ ( x x )
324
+ ( =^= )
325
+ (______)`,
326
+ `
327
+ /\\___/\\
328
+ ( x x )
329
+ ( =-= )
330
+ (______)`,
331
+ `
332
+ /\\___/\\
333
+ ( x x )
334
+ ( =-= )
335
+ (__-___)`,
336
+ `
337
+ /\\___/\\
338
+ ( x x )
339
+ ( =-= )
340
+ (_____)`
341
+ ];
342
+
343
+ this.robotDisplay.textContent = stages[6 - this.remaining];
344
+ }
345
+
346
+ showHint() {
347
+ this.message.textContent = this.hint;
348
+ setTimeout(() => this.message.textContent = '', 3000);
349
+ }
350
+
351
+ checkGameEnd() {
352
+ const won = [...this.word].every(letter => this.guessed.has(letter));
353
+ const lost = this.remaining === 0;
354
+
355
+ if (won) {
356
+ this.stats.wins++;
357
+ this.stats.streak++;
358
+ this.message.textContent = '🤖 MISSION ACCOMPLISHED';
359
+ this.gameActive = false;
360
+ } else if (lost) {
361
+ this.stats.losses++;
362
+ this.stats.streak = 0;
363
+ this.message.textContent = `🤖 SYSTEM FAILURE - WORD WAS: ${this.word}`;
364
+ this.gameActive = false;
365
+ }
366
+
367
+ this.updateStats();
368
+ }
369
+
370
+ updateStats() {
371
+ document.getElementById('wins').textContent = this.stats.wins;
372
+ document.getElementById('losses').textContent = this.stats.losses;
373
+ document.getElementById('streak').textContent = this.stats.streak;
374
+ }
375
+ }
376
+
377
+ new HangmanGame();
378
+ </script>
379
+ </body>
380
+ </html>