Simple HTML Hangman Game

This tutorial will guide you through creating a simple Hangman game that you can play directly in your browser. We'll use HTML for structure, CSS for styling, and JavaScript for game logic.

Getting Started

Create an HTML File: Open your text editor and create a new file named hangman.html.
Basic HTML Structure: Copy and paste the following code into your HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>Hangman Game</title>
    <style>
      /* Add your styles here */
    </style>
  </head>
  <body>
    <h1>Hangman Game</h1>
    <p>Guess the word:</p>
    <div id='word'></div>
    <p>Guesses remaining: <span id='guesses'>6</span></p>
    <p>Letters guessed: <span id='guessed'></span></p>
    <form>
      <label>
        Guess a letter:
        <input type='text' id='letter' maxlength='1' required>
      </label>
      <button type='submit'>Submit</button>
    </form>
    <script>
      // Add your JavaScript code here
    </script>
  </body>
</html>

Styling with CSS

In the <style> section, you can add your own CSS styles to customize the look of your game. Here's a basic example to get you started:

body {
  font-family: sans-serif;
  text-align: center;
}

#word {
  font-size: 2em;
  letter-spacing: 10px;
}

Implementing Game Logic with JavaScript

Now, let's add the JavaScript code within the <script> tags to make the game functional.

// Define the word to be guessed
var word = 'hangman';

// Define the number of guesses allowed
var guesses = 6;

// Define the letters guessed
var guessed = [];

// Create a function to display the word with underscores for unguessed letters
function displayWord() {
  var wordElement = document.getElementById('word');
  var displayedWord = '';
  for (var i = 0; i < word.length; i++) {
    if (guessed.includes(word[i])) {
      displayedWord += word[i];
    } else {
      displayedWord += '_';
    } 
  }
  wordElement.textContent = displayedWord;
}

// Create a function to update the guesses remaining count
function updateGuessesRemaining() {
  var guessesElement = document.getElementById('guesses');
  guessesElement.textContent = guesses;
}

// Create a function to update the letters guessed
function updateGuessedLetters() {
  var guessedElement = document.getElementById('guessed');
  guessedElement.textContent = guessed.join(', ');
}

// Create a function to handle a correct guess
function handleCorrectGuess() {
  displayWord();
  updateGuessedLetters();
  if (word === document.getElementById('word').textContent) {
    alert('You win!');
  }
}

// Create a function to handle an incorrect guess
function handleIncorrectGuess() {
  guesses--;
  updateGuessesRemaining();
  updateGuessedLetters();
  if (guesses === 0) {
    alert('You lose!');
    location.reload();
  }
}

// Add an event listener to the form to handle guesses
document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  var letter = document.getElementById('letter').value.toLowerCase();
  document.getElementById('letter').value = '';
  if (guessed.includes(letter)) {
    alert('You already guessed that letter!');
  } else if (word.includes(letter)) {
    guessed.push(letter);
    handleCorrectGuess();
  } else {
    guessed.push(letter);
    handleIncorrectGuess();
  }
});

// Initialize the game
displayWord();
updateGuessesRemaining();
updateGuessedLetters();

Playing the Game

Save your hangman.html file.
Open the file in your web browser.
Start guessing letters to try and guess the word!

Customization

You can easily customize the game:

Change the word: Modify the word variable to choose a different word.
Adjust guesses: Modify the guesses variable to change the number of attempts allowed.
Add more styles: Experiment with different CSS styles to personalize the game's appearance.

Happy coding and have fun playing your Hangman game!

Simple HTML Hangman Game: Build and Play in Your Browser