Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Enhanced Robotic Hangman</title> | |
| <style> | |
| :root { | |
| --neon-blue: #00f3ff; | |
| --neon-pink: #ff00ff; | |
| --dark-gray: #1a1a1a; | |
| --light-gray: #333; | |
| --robot-color: #4ae; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| background: var(--dark-gray); | |
| color: var(--neon-blue); | |
| font-family: 'Courier New', monospace; | |
| padding: 20px; | |
| } | |
| .game-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 20px; | |
| } | |
| .sidebar { | |
| background: var(--light-gray); | |
| padding: 20px; | |
| border-radius: 10px; | |
| border: 2px solid var(--neon-blue); | |
| box-shadow: 0 0 10px var(--neon-blue); | |
| } | |
| .main-game { | |
| background: var(--light-gray); | |
| padding: 20px; | |
| border-radius: 10px; | |
| border: 2px solid var(--neon-blue); | |
| box-shadow: 0 0 10px var(--neon-blue); | |
| } | |
| .difficulty-btns { | |
| display: grid; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| button { | |
| background: transparent; | |
| border: 1px solid var(--neon-blue); | |
| color: var(--neon-blue); | |
| padding: 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-family: 'Courier New', monospace; | |
| } | |
| button:hover { | |
| background: var(--neon-blue); | |
| color: var(--dark-gray); | |
| box-shadow: 0 0 10px var(--neon-blue); | |
| } | |
| .robot-display { | |
| font-family: monospace; | |
| white-space: pre; | |
| color: var(--robot-color); | |
| text-shadow: 0 0 5px var(--robot-color); | |
| margin: 20px 0; | |
| } | |
| .word-display { | |
| font-size: 2.5em; | |
| text-align: center; | |
| margin: 20px 0; | |
| letter-spacing: 10px; | |
| text-shadow: 0 0 5px var(--neon-blue); | |
| } | |
| .keyboard { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); | |
| gap: 5px; | |
| margin: 20px 0; | |
| } | |
| .keyboard button { | |
| aspect-ratio: 1; | |
| font-size: 1.2em; | |
| } | |
| .keyboard button.used { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .stats { | |
| margin-top: 20px; | |
| padding: 10px; | |
| border: 1px solid var(--neon-pink); | |
| border-radius: 5px; | |
| } | |
| .message { | |
| text-align: center; | |
| height: 2em; | |
| color: var(--neon-pink); | |
| } | |
| @keyframes neonFlicker { | |
| 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { | |
| text-shadow: 0 0 5px var(--neon-blue), | |
| 0 0 10px var(--neon-blue), | |
| 0 0 20px var(--neon-blue); | |
| } | |
| 20%, 22%, 24%, 55% { | |
| text-shadow: none; | |
| } | |
| } | |
| .neon-text { | |
| animation: neonFlicker 2s infinite; | |
| } | |
| @media (max-width: 768px) { | |
| .game-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="game-container"> | |
| <div class="sidebar"> | |
| <h2 class="neon-text">DIFFICULTY</h2> | |
| <div class="difficulty-btns"> | |
| <button data-diff="easy">EASY</button> | |
| <button data-diff="medium">MEDIUM</button> | |
| <button data-diff="hard">HARD</button> | |
| </div> | |
| <h2 class="neon-text">STATS</h2> | |
| <div class="stats"> | |
| <p>Wins: <span id="wins">0</span></p> | |
| <p>Losses: <span id="losses">0</span></p> | |
| <p>Current Streak: <span id="streak">0</span></p> | |
| </div> | |
| <button id="hint-btn">GET HINT</button> | |
| <button id="new-game-btn">NEW GAME</button> | |
| </div> | |
| <div class="main-game"> | |
| <div class="robot-display"></div> | |
| <div class="word-display"></div> | |
| <div class="message"></div> | |
| <div class="keyboard"></div> | |
| </div> | |
| </div> | |
| <script> | |
| const words = { | |
| easy: [ | |
| { word: 'BOT', hint: 'Automated program', category: 'TECH' }, | |
| { word: 'RAM', hint: 'Computer memory', category: 'TECH' }, | |
| { word: 'CPU', hint: 'Brain of computer', category: 'TECH' }, | |
| { word: 'APP', hint: 'Mobile software', category: 'TECH' }, | |
| { word: 'WEB', hint: 'Internet pages', category: 'TECH' }, | |
| { word: 'NET', hint: 'Type of network', category: 'TECH' }, | |
| { word: 'USB', hint: 'Connection type', category: 'TECH' }, | |
| { word: 'LED', hint: 'Light type', category: 'TECH' }, | |
| { word: 'API', hint: 'Interface for developers', category: 'TECH' }, | |
| { word: 'HTML', hint: 'Markup language', category: 'TECH' } | |
| ], | |
| medium: [ | |
| { word: 'ROBOT', hint: 'Mechanical being', category: 'TECH' }, | |
| { word: 'CYBER', hint: 'Digital realm', category: 'TECH' }, | |
| { word: 'LASER', hint: 'Light beam', category: 'TECH' }, | |
| { word: 'PIXEL', hint: 'Screen dot', category: 'TECH' }, | |
| { word: 'VIRUS', hint: 'Malicious software', category: 'TECH' }, | |
| { word: 'CACHE', hint: 'Data storage', category: 'TECH' }, | |
| { word: 'GAMER', hint: 'Video player', category: 'TECH' }, | |
| { word: 'CLOUD', hint: 'Internet storage', category: 'TECH' }, | |
| { word: 'EMAIL', hint: 'Electronic message', category: 'TECH' }, | |
| { word: 'SMART', hint: 'Intelligent device', category: 'TECH' } | |
| ], | |
| hard: [ | |
| { word: 'ANDROID', hint: 'Mobile OS', category: 'TECH' }, | |
| { word: 'QUANTUM', hint: 'Smallest unit', category: 'SCIENCE' }, | |
| { word: 'NETWORK', hint: 'Connected systems', category: 'TECH' }, | |
| { word: 'PROGRAM', hint: 'Software code', category: 'TECH' }, | |
| { word: 'COMPILE', hint: 'Code process', category: 'TECH' }, | |
| { word: 'ROUTING', hint: 'Data path', category: 'TECH' }, | |
| { word: 'ENCRYPT', hint: 'Secure data', category: 'TECH' }, | |
| { word: 'ANALYZE', hint: 'Examine data', category: 'TECH' }, | |
| { word: 'BACKEND', hint: 'Server side code', category: 'TECH' }, | |
| { word: 'FRONTEND', hint: 'User interface code', category: 'TECH' } | |
| ] | |
| }; | |
| class HangmanGame { | |
| constructor() { | |
| this.difficulty = 'medium'; | |
| this.word = ''; | |
| this.hint = ''; | |
| this.guessed = new Set(); | |
| this.remaining = 6; | |
| this.stats = { wins: 0, losses: 0, streak: 0 }; | |
| this.gameActive = true; | |
| this.previousWords = new Set(); | |
| this.initElements(); | |
| this.initEvents(); | |
| this.newGame(); | |
| } | |
| initElements() { | |
| this.robotDisplay = document.querySelector('.robot-display'); | |
| this.wordDisplay = document.querySelector('.word-display'); | |
| this.keyboard = document.querySelector('.keyboard'); | |
| this.message = document.querySelector('.message'); | |
| this.createKeyboard(); | |
| } | |
| initEvents() { | |
| document.querySelectorAll('[data-diff]').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| this.difficulty = btn.dataset.diff; | |
| this.newGame(); | |
| }); | |
| }); | |
| document.getElementById('hint-btn').addEventListener('click', () => this.showHint()); | |
| document.getElementById('new-game-btn').addEventListener('click', () => this.newGame()); | |
| } | |
| createKeyboard() { | |
| for (let i = 65; i <= 90; i++) { | |
| const btn = document.createElement('button'); | |
| btn.textContent = String.fromCharCode(i); | |
| btn.addEventListener('click', (e) => this.handleGuess(e.target)); | |
| this.keyboard.appendChild(btn); | |
| } | |
| } | |
| newGame() { | |
| const wordPool = words[this.difficulty]; | |
| let wordData; | |
| do { | |
| wordData = wordPool[Math.floor(Math.random() * wordPool.length)]; | |
| } while (this.previousWords.has(wordData.word)); | |
| this.previousWords.add(wordData.word); | |
| if (this.previousWords.size > 5) { // To prevent too large set | |
| this.previousWords.clear(); | |
| } | |
| this.word = wordData.word; | |
| this.hint = wordData.hint; | |
| this.guessed.clear(); | |
| this.remaining = 6; | |
| this.gameActive = true; | |
| this.keyboard.querySelectorAll('button').forEach(btn => { | |
| btn.classList.remove('used'); | |
| btn.disabled = false; | |
| }); | |
| this.updateDisplays(); | |
| this.message.textContent = ''; | |
| } | |
| handleGuess(button) { | |
| if (!this.gameActive) return; | |
| const letter = button.textContent; | |
| if (this.guessed.has(letter)) return; | |
| this.guessed.add(letter); | |
| button.classList.add('used'); | |
| button.disabled = true; | |
| if (!this.word.includes(letter)) { | |
| this.remaining--; | |
| } | |
| this.updateDisplays(); | |
| this.checkGameEnd(); | |
| } | |
| updateDisplays() { | |
| this.wordDisplay.textContent = [...this.word] | |
| .map(letter => this.guessed.has(letter) ? letter : '_') | |
| .join(' '); | |
| this.updateRobot(); | |
| } | |
| updateRobot() { | |
| const stages = [ | |
| ` | |
| /\\___/\\ | |
| ( o o ) | |
| ( =^= ) | |
| (______)`, | |
| ` | |
| /\\___/\\ | |
| ( x o ) | |
| ( =^= ) | |
| (______)`, | |
| ` | |
| /\\___/\\ | |
| ( x x ) | |
| ( =^= ) | |
| (______)`, | |
| ` | |
| /\\___/\\ | |
| ( x x ) | |
| ( =-= ) | |
| (______)`, | |
| ` | |
| /\\___/\\ | |
| ( x x ) | |
| ( =-= ) | |
| (__-___)`, | |
| ` | |
| /\\___/\\ | |
| ( x x ) | |
| ( =-= ) | |
| (_____)` | |
| ]; | |
| this.robotDisplay.textContent = stages[6 - this.remaining]; | |
| } | |
| showHint() { | |
| this.message.textContent = this.hint; | |
| setTimeout(() => this.message.textContent = '', 3000); | |
| } | |
| checkGameEnd() { | |
| const won = [...this.word].every(letter => this.guessed.has(letter)); | |
| const lost = this.remaining === 0; | |
| if (won) { | |
| this.stats.wins++; | |
| this.stats.streak++; | |
| this.message.textContent = '🤖 MISSION ACCOMPLISHED'; | |
| this.gameActive = false; | |
| } else if (lost) { | |
| this.stats.losses++; | |
| this.stats.streak = 0; | |
| this.message.textContent = `🤖 SYSTEM FAILURE - WORD WAS: ${this.word}`; | |
| this.gameActive = false; | |
| } | |
| this.updateStats(); | |
| } | |
| updateStats() { | |
| document.getElementById('wins').textContent = this.stats.wins; | |
| document.getElementById('losses').textContent = this.stats.losses; | |
| document.getElementById('streak').textContent = this.stats.streak; | |
| } | |
| } | |
| new HangmanGame(); | |
| </script> | |
| </body> | |
| </html> |