Atomic Monks

Bet:
${{ bet.toFixed(2) }}
${{ players[1].cash.toFixed(2) }}
{{card.face.toString().toUpperCase()}} {{card.suitText}}
{{hand.status}} Value: {{ hand.value }}

Why Blackjack?

I wanted to make a simple casual game, using some different techniques than usual.

What sorts of techniques?

At work, we had to support older versions of Internet Explorer until pretty recently. We couldn't really use much in the way of modern web development. That has changed, and we've slowly been updating code. We can now use some new-ish things I find interesting, some of which I used here:

What's with the ads?

I know, everybody hates ads and a lot of people will be blocking these. But I thought it might be worth a shot to at least pay for running this site. I'm not going to be fighting people that block them, but hope you'll consider allowing them here if you enjoy the game. If it works out I'll probably add some more games.

It's not very fancy.

No, I'm not a graphic designer. Feels playable enough though.

Biggest hurdles making it?

  1. The biggest hassle was getting the cards in each field to actually render in the same order as their underlying collection. If you've used Vue before you know looping through a collection can be a little wonky as it tries to re-use elements. Sometimes you have to specify keys on the elements so Vue can sort it out. Unfortunately, that didn't work with petite-vue. I reached a point where it seemed to be a bug in the library itself.

    To work around it, I'm binding a CSS order style on the cards and using a flex container. Honestly, I spent way too much time trying to get it to work "correctly". I'm sure none of you have ever done that.

  2. For some reason the logic to determine win/loss/push gave me some trouble. I blame too many holiday cookies. The Blackjack "split" feature complicated it too.

The code is structured a bit strange.

Ah, you peekd! Yes, partly because of the combination of things I just wanted to use (and listed above). A more "proper" approach would have been Vue components instead of classes, but I felt like doing it this way.

How long did this take?

About a week. Even the simplest game is more complex and takes more time than you expect!