You are tasked with making the Blackjack card game.
- Run
npm install
to install the dependencies. - Run
npm start
to open the app for development. It uses Parcel. (Feel free to use any bundler or dev setup you like)
- You may use any npm modules you like (e.g. React, Vue, Svelte, jQuery, etc). We start you off with no structure on purpose.
- Make as many files, folders as you like. This is your project.
- Styling is bonus.
- Testing is bonus.
- A Dealer (subsisting of a very basic AI) and a Player (the user)
- A Deal Button - when clicked deals a new game.
- New game deals two cards to the Dealer and two cards to the Player
- Dealer has one card face up, one face down
- Player has all cards face up
- Display
visibleScore
for both players at all times, keep the Dealer's actual score hidden until the end. - A Hit Button - when clicked adds another card to the Player's hand
- If Player's hand score reaches 21, game is over and they win, move to the END OF THE GAME
- If Player's hand score exceeds 21, game is over and they lose/bust, move to the END OF THE GAME
- A Stand Button - when clicked Player chooses to be done receiving cards.
- Deal out cards to the Dealers hand until Dealer's score reaches 18 or higher, move to the END OF THE GAME
- Once Dealer is done receiving cards it is the END OF THE GAME:
- Turn Dealer's face down card to be face up.
- If either player busts, the other player automatically wins.
- Calculate and display final scores of both players.
- Announce the winner.
- In case of tie, Player wins.
- You must use the included utilities, documentation is below.
- You may modify or extend the utilities.
Create a deck of 52 shuffled cards.
import { newShuffledDeck } from "./utils";
const deck = newShuffledDeck();
Here I've mapped the deck to just the face
property of each card.
deck.map((card) => card.face);
// Outputs: ??,Q♦,2♠,5♦,10♦,10♠,3♦,Q♥,3♣,K♠,A♥,J♠,6♠,
// K♦,7♣,10♥,A♣,8♦,9♣,5♥,J♦,8♥,3♠,8♣,4♣,5♠,4♠,
// 8♠,6♦,2♣,K♣,4♥,J♥,3♥,7♦,J♣,Q♣,Q♠,K♥,9♥,A♦,
// 9♦,2♦,6♥,7♥,5♣,6♣,9♠,10♣,2♥,4♦,A♠
Note: The first card is
facedown
so it shows??
A single card has more properties though:
face
- the value and suit together. IffaceDown
shows'??'
.value
- one of[2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K", "A"]
suit
- one of["♣", "♦", "♥", "♠"]
color
-'black'
or'red'
score
- calculates the blackjack value of the card2–11
.visibleScore
-0
if card isfaceDown
, otherwise works likescore
.faceDown
-boolean
Here's the first card from our deck:
deck[0];
/*
Outputs:
{
"face": "??",
"value": 7,
"suit": "♠",
"color": "black",
"visibleScore": 0,
"score": 7,
"faceDown": true
}
*/
Calculates the score
or visibleScore
for an array of cards (a hand)
import { calculateHandScore } from "./utils";
const firstThreeCards = deck.slick(0, 3);
const trueHandScore = calculateHandScore(firstThreeCards);
const visibleHandScore = calculateHandScore(firstThreeCards, true);
Note: Handles Aces properly, treating them as 11 or 1 correctly. Note: Does not score
facedown
cards.
So if our hand was the first three cards in the deck
: ??,Q♦,2♠
. The facedown card is a 7.
Then our hand's score
would be 19
.
And our hand's visibleScore
would be 12
.