Skip to main content

Overview

Learning outcomes​

  1. Build a web-based game (Hangman) that utilizes a variety of concepts and technologies.
  2. Demonstrate ability to make network HTTP Requests using Fetch API.
  3. Demonstrate ability to create graphics using Canvas.
  4. Demonstrate ability to create forms to and handling user input.
  5. Demonstrate understanding of event-oriented programming.

Guidelines and Tips​

  • Remember to review the comments made for you in the code.
  • Make a habit of committing and pushing your code frequently to github.
  • Make sure to meaningful commit messages that describe what you did.
  • Make sure the automated tests and checks (if exists) continue to pass after you make changes.
  • Don't forget to fill out the self assessment on the README file, and the feedback form at the end of the instructions.

Instructions​

For this assignment you will be building Hangman. Your goal is to build this game using HTML, CSS, JavaScript, and the concepts/techniques covered to-date to build the game completely.

Game process​

The process of the game should be:

  1. Allow the user to specify the difficulty:
    1. easy - for words of length 3-5
    2. medium - for words of length 6-9
    3. hard - for words of length 10-15
  2. On difficulty selection, we'll make a HTTP Request to https://it3049c-hangman.fly.dev/ to get a word for the game.
    1. You'll need to specify the difficulty in the query string of your url.
    2. Hint: Don’t hard-code all three URLs. Instead, use string template-ing to populate the query string.
    3. It may take a few seconds to load initially.
  3. Show the word's length as underscores in place of letters which have not yet been guessed.
    • for the word BOOK where the Letters O, and K have been guessed, this would look like _ O O K
  4. Show a display/paragraph/span containing previously guessed letters to the user
    • Previously Guessed: C, E, N, L
  5. Show a display/Canvas drawing of the “Hangman” a. use canvas API for the hangman drawing
  6. Allow user to input a letter to guess. with the following form validations.
    • Alert the user if they enter a letter they have already guessed
    • Alert the user if the provided input wasn't a letter
    • Alert the user if they hit the submit without providing any input (length == 0)
    • Alert the user if they provided more than one character.
  7. If the guessed letter is correct, show it in the proper place for the word display (the underscored placeholder) a. check if the word has completely been guessed and announce winner if so.
  8. If the guessed letter is incorrect, draw the next body part on the hangman (whatever order and number of lines/body parts you wish) a. check if all the body parts have been drawn to announce the game as lost.
  9. When the game is over, alert the user if they won or lost and give an option to reset the game
  10. For 1 Extra Credit point, use tha animate.css library to animate the Hangman Title.

Starter Files​

.
├── resources
│   ├── css
│   │   └── styles.css                <== Your additional styles
│   ├── js
│   │   ├── Hangman.js                <== Hangman Game Logic
│   │   └── index.js                  <== DOM Manipulation and Event Listeners
│   └── vendor                        <== External Libraries, such as Bootstrap and jQuery
│       ├── bootstrap.min.css
│       ├── bootstrap.min.js
│       ├── fontawesome.min.css
│       ├── jquery-3.5.1.slim.min.js
│       └── popper.min.js
├── index.html                        <== The index.html - Built for you.
└── README.md                         <== Don't Forget the self-reflection evaluation

Grading​

  1. The application runs with no errors.
  2. The user is presented with 3 difficulties to select from.
  3. The application can send HTTP requests passing a difficulty level in the query string and able to parse the response.
  4. The application obscures the word with underscores of same length as the original word.
  5. The application alerts the user if an already guessed letter was guessed again.
  6. The application draws the hangman (stick man) on wrong guesses.

Extra Credit Opportunities​

  1. Add CSS animation on failed and successful guesses to any of the DOM elements.