bryandevelops / Hangman

Hangman is a guessing game played in the browser where players are tasked with guessing letters to form a secret word. The object of Hangman is to guess the secret word before the stick figure is hung. The player takes turns selecting letters to narrow the word down.

Hangman

Description

Hangman is a guessing game played in the browser where players are tasked with guessing letters to form a secret word. The object of Hangman is to guess the secret word before the stick figure is hung. The player takes turns selecting letters to narrow the word down.

Rules

• The player clicks 'Start Game' and selects a difficulty
• The player clicks 'Confirm' to initiate a new game
• The player clicks on a letter on the visual keyboard to guess a letter
• If the guessed letter is in the word,
  • the blank spaces of the secret word are filled with the guessed letter at the corresponding positions
  • the guessed letter's color on the visual keyboard is changed to green to indicate to the player that it was a correctly guessed letter
• If the guessed letter is not in the word,
  • a body part gets drawn onto the canvas
  • the guessed letter's color on the visual keyboard is changed to red to indicate to the player that it was an incorrectly guessed letter
• After a guess, the player is to continue guessing until they either Win or Lose
• After a correct guess, if the secret word is completed, the player wins and they are able to click on the word to check its dictionary definition
• After an incorrect guess, if the stick figure is fully drawn, the player loses and they are able to click on the word to check its dictionary definition
• At any point after starting a game, the player is able to start a new game and guess a new word

Future Functionality

The following optional features are to be implemented in the future:

• Difficulty Modes
  • The player will be able to select a difficulty (Easy, Moderate, Hard) which will determine the length of the secret word they need to guess

Flowchart & Wireframe

Here is my initial flowchart and wireframe I created during the planning stage:

Demo

Here is a quick demonstration of the game in action:

Images

1. Game Start

2. Game Setup

3. Game Win

4. Game Lose

Play Game

Give it a try!

Resources

• Hangman Canvas: https://codepen.io/xavier_bs/pen/MMNGyG
• CSS Background Pattern: https://heropatterns.com/
• English Words: https://github.com/dwyl/english-words
• Cut Corner Buttons: https://codepen.io/t_afif/pen/bGooZmq
• Transitioning Glow On Text: https://unused-css.com/blog/css-outer-glow/