Hangman Game

by adamfard

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hangman Game</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
        .flat-colors {
            background: linear-gradient(135deg, #f48c06 25%, #283618 25%, #283618 50%, #f48c06 50%, #f48c06 75%, #283618 75%);
        }
    </style>
</head>

<body class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-lg border-8 border-black flat-colors">
        <h1 class="text-4xl text-white font-semibold mb-4 text-center font-serif">Hangman Game</h1>
        <p id="word" class=" text-white text-2xl font-semibold mb-4"></p>
        <p id="attempts" class="text-lg text-white mb-4">Attempts left: <span id="attemptsCount" class="font-bold">6</span></p>
        <div class="flex items-center mb-4">
            <input type="text" id="letter" placeholder="Enter a letter" maxlength="1" class="w-full border border-gray-700 bg-gray-100 p-2 rounded-lg text-black outline-none focus:border-indigo-500 font-sans">
        </div>
        <button id="submit" class="bg-black font-semibold text-white py-2 px-4 rounded-lg hover:bg-gray-800 transition duration-200 font-sans">Submit</button>
        <p id="message" class="mt-4 font-sans"></p>
    </div>
    <script src="hangman.js"></script>
</body>

</html>

CSS

.hangman-svg {
  display: none;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

JavaScript

const wordElement = document.getElementById('word');
const attemptsCountElement = document.getElementById('attemptsCount');
const letterInput = document.getElementById('letter');
const submitButton = document.getElementById('submit');
const messageElement = document.getElementById('message');
const hangmanFigureElement = document.getElementById('hangman-figure');

const words = ['apple', 'banana', 'grape', 'orange', 'pineapple'];
const selectedWord = words[Math.floor(Math.random() * words.length)];

  

let attemptsLeft = 6;
let guessedLetters = [];
let hiddenWord = selectedWord.split('').map(() => '_');



function updateUI() {
  wordElement.textContent = hiddenWord.join(' ');
  attemptsCountElement.textContent = attemptsLeft;
}

function checkLetter(letter) {
  if (guessedLetters.includes(letter)) {
    messageElement.textContent = 'You have already guessed this letter.';
    return;
  }

  guessedLetters.push(letter);
  const letterIndex = selectedWord.indexOf(letter);

  if (letterIndex === -1) {
    attemptsLeft--;
    messageElement.textContent = 'Incorrect guess!';
  } else {
    for (let i = 0; i < selectedWord.length; i++) {
      if (selectedWord[i] === letter) {
        hiddenWord[i] = letter;
      }
    }
    messageElement.textContent = 'Correct guess!';
  }

  if (attemptsLeft === 0) {
    messageElement.textContent = `Game over! The word was "${selectedWord}".`;
    submitButton.disabled = true;
  } else if (!hiddenWord.includes('_')) {
    messageElement.textContent = 'Congratulations! You guessed the word!';
    submitButton.disabled = true;
  }

  updateUI();
}

submitButton.addEventListener('click', () => {
  const letter = letterInput.value.toLowerCase();
  if (letter && letter.length === 1 && /^[a-z]+$/.test(letter)) {
    checkLetter(letter);
  } else {
    messageElement.textContent = 'Please enter a valid letter.';
  }
  letterInput.value = '';
});

updateUI();