Designing a browser card game: Durak rules to UX

// Editorial team

Card games look simple to build until you write down every rule. This post follows Durak from the rulebook to a table that works on a phone.

Write the rules as states

Start from a written rulebook, such as these Durak rules, and turn each paragraph into states and transitions. A Durak bout has an attack phase, a defence phase and a resolution. In the attack phase, the attacker may play any card. Once a card is on the table, any card of a rank already shown may be added. The defender must beat each card with a higher card of the same suit or a trump.

The state holds the hands, the talon, the trump suit, the cards on the table and whose move it is. A single function returns the legal moves for a player. The interface asks that function and greys out everything else.

The throw-in problem

At a real table, several players can throw in at once. In software, you need an order. We give the main attacker priority, then other players in seat order, with a short window for each. Throw-ins stop when six cards are on the table or the defender has no cards left to answer.

Showing the trump

Players need to see the trump suit at all times. At a table it is the card under the talon. On a small screen we keep that card visible and repeat the suit symbol beside the talon count, so that the suit stays visible once the talon runs out.

Whose turn is it

In Durak, more than one player can act at once, which breaks the usual "your turn" banner. We mark every player who has a legal move and show the defender's role with a shield icon. A "take" button appears only for the defender.

Computer opponents

A simple opponent follows rules any club player knows: lead low non-trumps, keep trumps, throw in cards you would rather lose. A stronger one tracks discarded cards and estimates what is left in each hand. The Durak strategy guide on durakcardgame.com is a fair summary of what a good human does, and it makes a reasonable spec for the hard level.

Teaching in the game

Most new players learn by playing. A tutorial that pauses at the first throw-in and the first take, with one sentence each, teaches more than a page of rules.

Variants as options

Podkidnoy and perevodnoy Durak differ in one rule: whether the defender can pass the attack on. Building that as a flag on the same engine is far cheaper than a second game. A free browser version of Durak shows how these options can sit in one game.