Game time! You are being tasked over the next 2 days to build another JavaScript game, High-Card! The winner is whoever has the highest card.
For this Front-End Challenge you will not be using any outside resources other than class lesson notes and your brain. This means you'll need to start small and break this challenge into tiny manageable pieces. You already know everything necessary to complete this game; the tricky part here is going to be problem solving. Do not work on any CSS until the game functions properly. If there is time left, you can add styles Bonus V.
-
Build a deck of shuffled cards.
NOTE: do not hardcode the deck. Create it with a function that takes in a cards array.
-
Collect an array of player names from the DOM.
Should look like this:
[{name:'Jesse'}, {name:'Jane'}] -
Upon "play", deal each player a card.
-
Find the highest card score dealt (Aces high).
-
Announce the winning player!
Take into consideration a tie by announcing one of the following outcomes:
- "The winner is ${name}!"
- "It's a tie between ${name1} and ${name2}!"
Allow the game to work for more than 2 players.
Have the game redraw cards for all players in the case of a tie.
Persist the scores so there are games instead of just rounds.
CSS animations! Make those cards flyyy!