Thunderjack! HTML5 Game Update: Adding the Bet and Clear Buttons

We’re continuing working on the bet placing functionality.

Looking at our four-step process, we’ll be covering the last two steps in this article:

Setup the hand buttons
Setup the bet chip buttons
Setup the bet button
Setup the clear button

First, we setup the hand buttons. You can view part 1 and part 2 here. Then, we setup the bet chip buttons here.

We’ll split this article into two sections, both on this page. First, we’ll build the bet button, then the cancel button.

Building the Bet Button

This button will make the bets you selected for your hand(s) official, and start the game.

Start by creating your button. The process is very similar to creating the bet chip buttons from the previous article.

Right-click on the main game canvas, then select Add, then Button.
From the Add Sprite dialog, select the image you want to use as the main button sprite, then press OK.
This will add a button to your canvas. You can drag it to position it where you want.
In the button’s properties, set the field property to true. This will create a reference to the button in the code that the canvas compiler generates, allowing you to reference it as well (which we’ll do later).
Set a name for the bet button. I decided to use the bet_button.
Set the callback to this._onBetButtonPressed, and set the callbackContext to this.
Set the four “Frame” properties to the appropriate sprite images, so that the button appears responsive when the it is moused over, pressed, and released.

When the canvas is saved, it’ll add the code that creates and positions the button, as well as specify the callback function _onBetButtonPressed_. That function:

GamePlay.prototype._onBetButtonPressed = function() {
  if (!this._canAffordBet()) {
    //can't afford the bet - cancel the bet placing method, and don't start the game.
    return;
  }
  
  this._payRoundCost();
  this._hideBetUi();
  this._beginRound();
};

GamePlay.prototype._canAffordBet = function() {
  return(this._playerData.credits >= this._playerData.getTotalBet());
};

Before placing the bet, we need to first make sure we can afford it. In other words, the number of credits you have must be at large as the amount of the bet you’re placing. This is what the _canAffordBet() function does. If we have enough credits, this function returns true; otherwise, it returns false.
If it returns the latter, we want to cancel the bet placing method and not start the game.

There are two elements on your PlayerData object that we have not developed yet:

the getTotalBet() function
the credits property

These are updates to your PlayerData class that we defined in an earlier article.

The getTotalBet() function adds up the bets from all the hands on which we have placed bets and returns that value. The credits property is an integer that stores the number of credits we currently have. It might look something like this:

PlayerData.prototype.getTotalBet = function() {
  var i_totalBet = 0;
  for (var s_playerId in this._hands) {
    var handData = this._hands[s_playerId];
    i_totalBet += handData.betValue;
  }
  return(i_totalBet);
};

Updated `PlayerData` constructor

We can add the credits property to our PlayerData constructor function like this:

PlayerData = function() {
  //key: string (player id)
  //data: PlayerHandData
  this._hands = this._initPlayerHands(); 
  
  //initialize credits to zero (and make it clear that this variable stores is a number)
  this.credits = 0;
};

Back in the _onBetButtonPressed function, after we have determined whether or not the player can afford to place their bet, there’s a _payRoundCost() function. It will deduct from our available credits, the total amount of the bet that we have placed.

GamePlay.prototype._payRoundCost = function(s_playerId) {
  var i_totalBet = this._playerData.getTotalBet();
  this._playerData.credits -= i_totalBet;
};

As long as we have have checked the credits beforehand, the player’s credits should never dip below zero, unless of course you’re allowing the player to go into DEBT! Mwa-ha-ha-haaaa! ( * evil * )

The _hideBetUi() function will hide all the controls that help us place bets, this includes the:

hand buttons
bet chip buttons
bet button
clear button

At this point, all of them can be hidden, except for the clear button, since we have not yet built it. I’ll leave this as an exercise for you. If you get stuck, post in the comments below, and I’ll be more than happy to lend a hand.

And finally, in the _onBetButtonPressed function, we have _beginRound(). This is finally where we can deal the cards to the players and dealer. I started an article here, with some pseudo code a specific function, dealCardsToPlayers.

GamePlay.prototype._beginRound = function() {
  dealCardsToPlayers();
};

This concludes the function of the bet button. Next, let’s build the clear button.

Building the Clear Button

This button will remove all bets from all selected hands, allowing you to start over.

Start by creating a button on the game canvas. This is very similar to the bet button, except:

Put a different a name for the bet button. I decided to use the clear_button.
Set the callback to this._onClearButtonPressed. Don’t forget to set the callbackContext to this.

GamePlay.prototype._onClearButtonPressed = function() {
  this._playerData.clearAllBets();
  this._updateTotalBet();
};

As you can see, there’s not involve much code. First, the bets are cleared on all the player’s hands. Second, the bet interface is updated. In the _updateTotalBet, which we was defined in a previous post. For review, the but for review, the bet user interface is made of:

the player’s credits
the player’s total bet value
the bet amount for each hand

PlayerData.prototype.clearAllBets = function () {
  for (var s_playerId in this._hands) {
    var hand = this.getHandData(s_playerId);
    hand.betValue = 0;
  }
};

We’ve already seen the PlayerHandData class here. All we’re doing is setting the betValue property of each player hand to 0.

The bet placing function is now complete! You can see a quick video of the bet and clear buttons being used.

In the next update, we’ll cover all five moves that the player can perform: hit, stand, double, split, and surrender.

Thanks for reading! We’ll talk again.

– C. out.

Building the Bet Button

Updated PlayerData constructor

Building the Clear Button

Updated `PlayerData` constructor