table of contents

  1.  the UI elements

  2. "deal" event

  3.  dealPlayerCard()

  4.  dealDealerCard()

  5.  blackjack?

  6. "hit" event

  7. "stay" event

  8.  bonus: handle ace

  9.  bonus: handle deck

remix: template

the UI elements

& their IDs:

1

a. Buttons

deal_btn

stay_btn

hit_btn

1

player_card1

player_card2

player_card3

etc...

dealer_card1

dealer_card7

b. Cards (notice naming pattern)

1

dealer_counter

player_counter

c. Total counts (textareas)

1

you_win

dealer_wins

too_high

tie

d. Results text (overlapping)

1

"deal" event

2

a. set up the game view

2

on click

show/hide the appropriate elements

Before "dealing" any cards, we need to set the player's card position and total to 0.

cardPos_P = 0;
total_P = 0;

Next, we need to deal 2 cards to the player. Since we'll be dealing many times throughout the game, let's make a function that just deals 1 card (and call it whenever needed).

b. dealing cards

2

dealPlayerCard();

Let's name this function dealPlayerCard and call it inside the "deal_btn" event -- even though it's not defined yet. This way when we do start writing the function, we can use the deal button to test it.

dealPlayerCard()

3

Scroll down to the FUNCTIONS area & create one named dealPlayerCard

a. set card variables

3

Add 1 to the current card position

Select a random "card", using numbers 0-13

0, 11, 12, and 13 will represent Ace, Jack, Queen, and King

Print the position and card value

player card 1: 9

b. get ID of current card

3

To display the card element, we need to know its ID.

Remember how the cards are named?

player_card1, player_card2, player_card3, etc...

 

This is why we need the card position. The position is the number that completes the ID.

 

Let's create a local variable (inside this function) called card_ID that returns the full ID, with the appropriate number attached:

c. display card

3

Now that we have card_ID, we can show the card & write to it.

How would you complete this if statement?

& test often

d. display card (cont'd)

3

{possible solution}

Go back to your "deal_btn" event and add a second call to dealPlayerCard

dealPlayerCard();
dealPlayerCard();

e. call it twice

3

You should see two cards appear on the screen!

f. the counter

3

We now have the ability to "deal" cards - yay!

But, we should also update the player's total count every time a new card is added.

 

Cards 1-10 are straightforward in their point values.

Ace can be worth 1 or 11 points, depending on context

Face cards (J, Q, K) are worth 10 points

 

try this:

Modify your if statement to also update the player's total count variable, total_P. Write the final value of total_P to the player_counter element so you can see if it's working correctly.

g. the counter (cont'd)

3

{possible solution}

dealDealerCard()

4

Create a new function for dealing a card to the dealer. It should be pretty much the same as dealPlayerCard(), but using dealer variables/IDs instead of player variables/IDs.

a. add to "deal" event

4

Go back to your "deal_btn" event.

Add in the dealer variables and functions.

 

You should end up with something like this:

 

cardPos_P = 0;
cardPos_D = 0;
total_P = 0;
total_D = 0;

dealPlayerCard();
dealPlayerCard();
dealDealerCard();
dealDealerCard();

b. hide card & count

4

When the round begins, the dealer's second card needs to be hidden from the player.

This means we should also hide the dealer's counter.

blackjack?

5

"Blackjack" is when a person's first two cards add up to 21.

 

Whoever gets blackjack automatically wins!

a. check for blackjack

5

Write an if statement that checks if anyone (player or dealer) has blackjack after the first two cards are dealt to each.

 

If only the player has blackjack, the player wins.

If only the dealer has blackjack, the dealer wins.

If they both have blackjack, it's a tie.

 

Use the provided

displayResults function

(already defined for you)

to display the results

b. check for blackjack

5

{possible solution}

"hit_btn" event

 

  • give player another card & update total

    • show "too_high" if the new total is over 21

  • if player's cards add up to 21, the dealer still takes its turn

    • if dealer's current total is less than 17, dealer must hit (use a while loop)

    • if dealer also ends up with 21, it's a tie

    • otherwise, player wins

6

7

"stay_btn" event

  • dealer takes its turn

    • if dealer's current total is less than 17, dealer must hit (use a while loop)

    • if dealer's total exceeds 21, player wins

    • if dealer's total is less than 21 & greater than player's total, dealer wins (and vice versa!)

    • if both have 21, it's a tie

  • display result message

8

choose two:

 

  • replace dealPlayerCard and dealDealerCard with a single function that can do both
     

  • for accurate card frequency, "discard" cards (stop letting them appear) after appearing x number of times; usually dealer has 6-8 decks
     

  • adjust Ace values according to cards that come before AND after the Ace (currently only considers the cards that came before it)
     

  • add betting functionality (assume the dealer never runs out of chips)
     

  • instead of hiding the dealer's 2nd card, show the "back" of it (can just be a solid color) & then "flip it over" on dealer's turn

8

or do them all...

blackjack

By Michelle Lim

Made with Slides.com

blackjack

  • 1,391

More from Michelle Lim