WebSim Hangman - Source Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSim Hangman</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>WebSim Hangman</h1>
        <p>Test your vocabulary with AI-generated word puzzles!</p>
        <div id="theme">Theme: <span id="current-theme"></span></div>
        <div id="hangman"></div>
        <div id="word"></div>
        <div id="letters"></div>
        <div id="message"></div>
        <button id="new-game">New Game</button>
    </div>
    <script src="index.js"></script>
</body>
</html>

index.js

// AI-enhanced Hangman game

const themes = [
  "Futuristic Technology",
  "AI Concepts",
  "Virtual Reality",
  "Quantum Computing",
  "Cybersecurity",
  "Blockchain",
  "Internet of Things",
  "Machine Learning",
  "Augmented Reality",
  "Robotics"
];

const words = {
  "Futuristic Technology": ["HOLOGRAM", "NANOBOT", "HYPERLOOP", "NEURALINK", "CRISPR"],
  "AI Concepts": ["NEURAL", "ALGORITHM", "DATASET", "TENSOR", "BACKPROP"],
  "Virtual Reality": ["IMMERSION", "AVATAR", "HAPTIC", "OCULUS", "METAVERSE"],
  "Quantum Computing": ["QUBIT", "SUPERPOSITION", "ENTANGLEMENT", "SHOR", "QUBITS"],
  "Cybersecurity": ["FIREWALL", "ENCRYPTION", "PHISHING", "MALWARE", "BACKDOOR"],
  "Blockchain": ["LEDGER", "CRYPTO", "MINING", "ETHEREUM", "TOKEN"],
  "Internet of Things": ["SENSOR", "SMARTWATCH", "ZIGBEE", "MQTT", "ALEXA"],
  "Machine Learning": ["REGRESSION", "CLASSIFIER", "OVERFITTING", "FEATURE", "GRADIENT"],
  "Augmented Reality": ["OVERLAY", "MARKER", "HOLOLENS", "POKEMON", "SNAPCHAT"],
  "Robotics": ["ACTUATOR", "SERVO", "GRIPPER", "ASIMO", "DRONE"]
};

let currentWord = "";
let guessedLetters = [];
let remainingGuesses = 6;

function startNewGame() {
  const theme = themes[Math.floor(Math.random() * themes.length)];
  document.getElementById('current-theme').textContent = theme;
  currentWord = words[theme][Math.floor(Math.random() * words[theme].length)];
  guessedLetters = [];
  remainingGuesses = 6;
  updateDisplay();
}

function updateDisplay() {
  // Update word display
  const wordDisplay = currentWord.split('').map(letter => 
    guessedLetters.includes(letter) ? letter : '_'
  ).join(' ');
  document.getElementById('word').textContent = wordDisplay;

  // Update hangman drawing
  document.getElementById('hangman').textContent = `Attempts left: ${remainingGuesses}`;

  // Update letter buttons
  const letterButtons = document.getElementById('letters');
  letterButtons.innerHTML = '';
  for (let i = 65; i <= 90; i++) {
    const letter = String.fromCharCode(i);
    const button = document.createElement('button');
    button.textContent = letter;
    button.disabled = guessedLetters.includes(letter);
    button.onclick = () => guessLetter(letter);
    letterButtons.appendChild(button);
  }

  // Check for win/lose conditions
  if (!wordDisplay.includes('_')) {
    endGame(true);
  } else if (remainingGuesses === 0) {
    endGame(false);
  }
}

function guessLetter(letter) {
  guessedLetters.push(letter);
  if (!currentWord.includes(letter)) {
    remainingGuesses--;
  }
  updateDisplay();
}

function endGame(won) {
  const message = won ? 
    `Congratulations! You guessed the word: ${currentWord}` :
    `Game over! The word was: ${currentWord}`;
  document.getElementById('message').textContent = message;
  document.getElementById('letters').innerHTML = '';
}

document.getElementById('new-game').onclick = startNewGame;

// Start the game
startNewGame();