Building Blackjack

Have you ever played a flash game? I have fond memories of playing the massive online collections of games after school, and I wanted to add something similar to the site. Javascript may not be Flash, but Actionscript is relatively similar. Being my first attempt at putting together a game in JavaScript, I thought it best to keep it simple and stick to a classic: blackjack. Interestingly, due to the nature of how blackjack is played and the decision to use a few buttons to control user input, I chose to forego the constant loop that is often associated with core game logic. Instead, each button invokes a series of functions that resolve the necessary steps.

Structurally speaking, the code is straightforward. We have the Blackjack object which contains the game logic and holds the other components: the player, dealer, and deck. The player and dealer are both instances of the same class, Player, which stores cards in hand, displays cards to the page, and tracks the player’s chips. The deck, as one would expect, holds 52 distinct cards and has the ability to shuffle and deal cards. Speaking of cards, each is an object with its suit and rank. The class also includes the necessary code to draw cards to canvas elements.

This was my first time working with a sprite sheet and the canvas HTML element. I was prepared to spend a few hours working out the kinks of displaying the cards correctly, but to my surprise I found it quite simple and had no trouble at all! In fact, I only ran into one main issue. While I had never intended to include animations for dealing cards, I had hoped to add a delay between the dealt cards and the flipping of cards (I encourage you to try setting a breakpoint in your terminal on line 416, the hit function, the cards are actually dealt facedown and then flipped!) Unfortunately, there is no simple sleep function native to JavaScript, and I was unable to create a workable equivalent. I did attempt to find a workaround with asynchronous functions and other tools, but I was unable to achieve the desired result. While I could achieve the “animation” I had been hoping for, the game would, at times, break and the terminal was completely unusable.

Unfortunately, I didn’t make a fully comprehensive blackjack simulator. There’s no double down action (though I would like to add one and it would be simple to integrate), pairs can’t be split (more involved) and the user interface for the game could do with a facelift. Likewise, over the course of the project I came to see some room for improvement:

The switch statement for getOffset is verbose. A map or array of values may have simplified the process
In retrospect I would have placed the canvas management and drawing in a separate object. The portability would have been nice
I decided to disable button based on game state late into development. Were I to revisit the program, I would move these lines to a new function to reduce redundant code.
Rather than set constant scalar for the card sprites, I would have determined it dynamically from media queries