Tech_Hangman_Game

Running

File size: 12,528 Bytes

2e483ce

<!DOCTYPE html>
<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>