I’ve got this exercise as a part of interview process at Thumbtack. There was no design provided, I was absolutely free to build whatever I want. I wanted to use CSS 3D transform, use as little images as possible, make it to look good and fun to play.

Here’s the final game:

Caffeine machine

About the process

I did a research about slot machines and how they typically look like. To be fair, I never played with slot machines :) I come up with an idea about the look and started writing code to make 3 slots with a start button.

In a first draft there was just 3 sides on each reel, which wasn’t a good idea, but I got the concept about 3d transforms.

Slots first draft

Next I worked on the entire body of the slot machine and as a result moved to this:

Caffeine Machine draft

Than I realized that reel definitely needs more then 3 sides and that I hate the design I made. Here’s the next version of the game:

Caffeine Machine draft2

If you win, the machine gives you a drink, but if you lose there was no indication of that. I decided to add a row of bulbs as a status bar:

Caffeine Machine with status bar

Next I finished up the rewards presentation. The machine can reward you with 3 drink options: tea, espresso or coffee.

Caffeine Machine - tea reward

Caffeine Machine - espresso reward

Caffeine Machine - coffee reward

I showed the game to my husband for feedback. And he gave a very valid point: it frustrating to click on a start button again and again before you get a reward. The ratio of win to loses is 1:27 (3 x 3 x 3). So simple random number generating didn’t work in terms of gamer experience. Because of that I’ve modified my javascript logic, so I can set the maximum number of back to back loses. If user doesn’t win naturally within a limit I set up, the algorithm forced to give a reward on a next spin.


P.S.: Thumbtack decided not to continue interview process after I submitted my solution :(. But I enjoyed working on this exercise an want to say thank you to Thumbtack team.