Poker Card Game (JavaScript)

playing-cardsIn this challenge we will create a one-player game of poker based on the rules of Texas Hold’em Poker.

In a game of Texas Hold’em Poker, for each round, five “community cards” are dealt face-up on the “board”. Each player is then dealt two private cards. All players in the game can use the “community” cards alongside their own private cards to make their best possible five-card poker hand.

At the start of each round, the 5 community cards are presented face-up. Players can only see their two private cards and can start betting. Then the first 3 cards of the board are revealed (The “flop”). Another round of betting can then take place. Then the 4th card is revealed (the “turn”), followed by another round of betting. The fifth card is then revealed (the “river”) and a final round of betting ensues. Finally the players who have not folded yet will reveal their cards and the player with the strongest hand wins the round.

The hands’ values are defined as follows: (From weakest to strongest)

  1. High card: Simple value of the card. Lowest: 2 – Highest: Ace
  2. Pair: Two cards with the same value
  3. Two pairs: Two sets of two cards with the same value
  4. Three of a kind: Three cards with the same value
  5. Straight: Sequence of 5 cards in increasing value (Ace can precede 2 and follow up King)
  6. Flush: 5 cards of the same suit
  7. Full house: Combination of three of a kind and a pair
  8. Four of a kind: Four cards of the same value
  9. Straight flush: Straight of the same suit
  10. Royal flush Straight: flush from Ten to Ace

JavaScript implementation

We will create our game using HTML, CSS and JavaScript.

Our JavaScript code will use two main classes as follows:
deck-card-classes

Deck ClassCard ClassMain Code

Your Challenge

We have started the code for you. Investigate how this code works and how the Deck class and the Card class have been implemented and used in the game.

The code is incomplete as it does not output the hand’s value at the end of the round. Complete this code to work out and output the hand’s value.

See the Pen
Poker Card Game
by 101 Computing (@101Computing)
on CodePen.

Note that the following picture gives you additional information on how each card is displayed using a single picture (png file) containing all 52 cards. The right section of the picture is displayed by re-positioning (translating) the background image to match the position of the desired card (using the background-position-x CSS property of the card):
card-css

Share Button
Tagged with: