Browser-based, word guessing game: "Phrase Hunter."
In this project, you'll create a browser-based, word guessing game: "Phrase Hunter." You’ll use JavaScript and OOP (Object-Oriented Programming) to select a random, hidden phrase, which a player tries to guess, by clicking letters on an onscreen keyboard, or typing a letter on his/her computer's keyboard.
Understand the rules of the game: The player’s goal is to guess all the letters in a hidden, random phrase. At the beginning, the player only sees the number of letters and words in the phrase, represented by blank boxes on the screen. The player clicks an onscreen keyboard or typing a letter on his/her computer's keyboard to guess letters in the phrase. The letter is disabled on the onscreen keyboard and a player can't select that letter again. If the selected letter is in the phrase at least once, the letter and its position in the phrase is highlighted on screen. All instances of the letter are made visible (so if there are 3 A's, all of the A's in the phrase appear at once). If the selected letter is not in the phrase, one of the player's hearts in the scoreboard is changed from a "live" heart to a "lost" heart. The player keeps choosing letters until they reveal all the letters in the phrase, or they make five incorrect guesses.
Download the file and click on the index.html file to start playing
Make sure you have JavaScript enabled on your browser\
- Added background image to main-container class
- Added background image to overlay screen
- Added typeWriter effect to title on overlay screen
- Added animation effect to start game button
- Added text shadow to header title
- Added typeWriter animation to the hidden phrase
- Added reveal block effect to the game over message
- Luis Giraldo - Initial work - (https://github.com/luisgiraldov)
This project is licensed under the MIT License - see the LICENSE.md file for details
- Buttons' styles taken from: https://codepen.io/rafaaro/pen/oNvJQyb
- Blink-caret effect Code learned from: https://css-tricks.com/snippets/css/typewriter-effect/
- Reveal block effect Code learned from: https://codepen.io/pierrinho/pen/RgpVga