Black Jack 404 - Post Mortem

About the game

Play the game here

The game I created is a variant of Black Jack, but with certain cards being 404-cards. We have to guess the value of the card before committing to a larger bet, or hitting for an extra card. The values of each of the cards range from 1-10, removing the traditional face cards.

The player always starts. The dealer is also given cards that are 404-cards, meaning the dealer has the advantage, but still needs to guess the total value.

Play the game here

Brain storming

The 2020 theme for js13kGames was 404. I struggled a lot to even think of something that could be made using that theme. It was really difficult. After spending maybe 2 hours of brain storming, I decided to go with a card game, where more randomness was added to the game, by hiding the value of almost half of the cards in a game of black jack.

I also decided to make a game I knew I was able to finish within two weeks, spending only 1-2 hours every day. I wanted to limit the complexity as much as possible, and focus more on some polish once the game was finished.

Implementation

The code can be found in my git repository

As an extra challenge, I did not want to use a game engine nor a canvas, and solely rely the document and manipulate the DOM directly. I also used Typescript, and Parcel for continuous integration.

Third party resources

• ZzFX - Small library for creating sound effects
• Most of the backgrounds patterns on the card backs were found here and modified to my liking

Creating the game itself was not too complex. The rules, and the turn based system was done quite quickly, but tweaking animations, styling components, and making the UI work on both mobile and desktop were the most time consuming parts. Especially the minor tweaking to make it just about right.

Monetization

I have two techniques added for moentization.

• Keep the player in-game as long as possible, giving them chips while playing. I wanted to make it so that you don't get chips too often, but enough to make you stay in the game, which in return gives me more money as well. Every time the monetization hook receives an monetizationprogress event, the bet zone fills up a little, until it is full and starts over again. Once filled, the player receives 10 chips
• Give the player some extra styles for their cards, pimping them up, only aesthetics

Now, adding extra Swag to the player for subscribing is not something new, but I think the addition of giving them rewards while staying in game is something that is not widely used. Especially if you want the player to remain on the site for as long as possible, I think giving them faster progress of something makes them want to stay and play longer.

The playing progress could have been modified to fill up based on the amount of XRP being sent in the interledger, but the idea remains the same.

Keeping the size limit under 13k

Parcel minifies and uglifies the code, so we can get smallest possible raw file size.

I also wanted to include music in the game, but the song and the library to playback music just took too much space. I started using SoundBox in my project, but had to discard it because of file size. I later discovered that the same people creating the sound effect library also has something called ZzFXM, which I will definitely try in my next project. By the looks of it, I may be able to include the library, and a song under 1kb (zipped).

The css background patterns, and the single svg file I made also took additional space, so I made sure to modify the patterns to be simpler, and less space consuming.

The small svg icons (the mute and unmute) that I made took almost 1Kb (unZipped), so I think I could have lived without them.

Final Thoughts

Using only the document to add and remove DOM elements was not so difficult as I thought. There were some headaches when I had to calculate the position of the deck, and animate it to the player's and the dealer's hand though. But other than that, it went quite pain free. This technique is good performance wise, because the game only renders the screen after the user makes some interactions. It does not run in a game loop, but focus on events being fired and reacted to.

After submitting the game, and playing it for a while, I did not find the game super fun to be honest. There is not much originality to the game. It is basically a modified Black Jack clone with a few changes. When I look back, I think it would be better to think of something more original, game mechanic wise, and try to fit it into the theme. I think that would be more fun to play.

If you liked this blog post, or want me to elaborate on other topics, consider following me on Twitter, @ReitGames, and mention me in a Tweet. Happy coding!