Title: OOP Game
Type: Homework
Assigned: Dec 20, 2017
Due: Dec 21, 2017
Competencies: OOP (Object-oriented programming) in JavaScript, thinking through building a project
You've done a lot of jQuery for a couple of days, so tonight take a little break from it. You will be creating the popular game of Hangman as a JavaScript console game. Project 1 is almost here and this assignment will walk you through how to think through, plan, and build such a project.
Make sure you break the problem down before you start.
Note: You're welcome to follow the basic structure/recommended functions below, but if you work out a different solution (that uses classes) to accomplish game play that's ok! Roll with it!
Make a commit after you create each function / object / class / or more often if you feel so inclined! This will factor into your score on the assignment.
An array called words
containing words to be guessed. Start simple by just having your player guess a single word. Later on, you can refactor your code so that your player is guessing phrases. But for now keep it simple.
A function that returns a random word from the word array.
An object that has the following attributes:
guesses
- a number of guesses remaining
guessedLetters
- an array of strings
isOver()
- a function that checks whether to play another round, depending if the game is won, the game is lost, or the game can still be played (not won and still less than 10 guesses) Suggested functionality:
- returns true if the word is fully guessed; run the function
isFound()
(seeWord
constructor function ) - returns true if the number of guesses is 0
- returns false if the game should still be in play
overMessage()
- returns "You win", if the word is completely guessed
- returns "You lose", if
guesses
is 0
Letter is a class. In order to play Hangman, you will need information about each letter - what is its value? Is it hidden? You will also need a way to change its state (from hidden to not hidden), depending if the player has guessed the letter.
value
- a string
hidden
- a boolean ( should be set to true by default)
show()
- a function that will set
hidden
to false
- a function that will set
display()
- a function that will return
_
if the letter is hidden and return the value if the letter is not hidden
- a function that will return
Word is a class. This constructor has a function to generate the Letter objects called getLetters
and stores each letter as an object inside an array called letters
.
letters
- an array of Letter objects
getLetters(newWord)
- accepts an input argument, a string. It will split the string into
Letter
objects and push them into theletters
array
- accepts an input argument, a string. It will split the string into
isFound()
- if true, call
overMessage()
(fromgame
object) and return true if no letters are still hidden - returns false if at least one letter is hidden
- if true, call
test(letter)
- accepts an input argument, a string goes through the Letters in the letter array and updates the
hidden
value on the ones whose value matches the input argumentletter
and returns a boolean indicating if the letter was found render()
- returns the word in its "guessed state"
- ex: for the word 'closure', if the letters l, s, and e have been guessed, this function should return the string
_ l _ s _ _ e
You may find writing the following functions inside the game
object uncomfortable at first, so you can create them as global objects. However, to keep things truly object oriented, refactor your code so these functions are inside the game
object
startGame is a function
Suggested functionality:
- set
guesses
to ten - reset the
guessedLetters
array - select a random word from
words
using thechooseWord()
function and set it to a variable namedcurrentWord
- create a
new Word
, set it to a a variable namedcurrentGame
- call
currentGame.getLetters(currentWord)
to set up thecurrentGame.letters
array. It should be an array ofLetters
objects - call playGame() once
playGame is a function
Suggested functionality:
- using the
game.isOver()
function, check if another round should be played or if the game is over - use if/if else/else to decide what should happen
- If the game is not over:
- prompt the player to enter a letter
test(letter)
ifletter
hasn't been tried already. Push theletter
tried into the array ofguessedLetters
- decrease the guess count each round
- check if the game is over
game.isOver()
- if
true
call overMessage() - if
false
call playGame() caution this may cause an infinite loop without the correct logic
- After the game is over, give the user the option to either quit or start a new game.
- Improve the user experience - allow users to enter uppercase letters or lowercase letters. Let a user know they entered an invalid character (number, symbol). Let a user know they entered more than one character. Add more informative user interaction and more!
- If you've been using prompts and alerts to communicate with the user, switch from prompt/alert in the browser to an input field, and/or even just listening for keypresses (read up on browser events you can listen for) to get the letter and messages in the html to say stuff to them.
- Display the game progress in the browser (render guessed word, show played letters, number of guesses left). We've spent some time in class exploring techniques you could use to implement these things. And/or you can explore on your own.
- Implement ascii graphic which shows more of a hangman for each wrong guess-- google ascii console art for things like this:
------|
| O
| /|\
| / \
-----------
W_DE__A_D
6. HOOK IT UP TO THE DOM
CSS Transform
CSS Transitions
CSS Animations
Project 1 Inspiration
Inspiration - Projects by Previous Students