All examples · Meshes and 3D

Card duel

What this example shows

A duel in the style of the card game everybody knows: the opponent sets two cards, you draw five, summon one in attack, set a monster face down in defence, set a trap, change position, flip-summon and spring the trap. Click when it is over to gather the cards and deal again.

A card is an object with two faces: two textured planes looking in opposite directions. The renderer only draws the side of a triangle that faces the camera, so you see whichever is turned towards you and the other is skipped. No logic decides whether it is face up: turning it over is the decision.

Every card does the same thing, move(), from one pose to another, lifting a little on the way so it never passes through the cards below. A pose is where it lies, which way it points on the table, how far it leans towards you and which face is up. Attack is upright, defence is a quarter turn and set is face down: the positions of the game are numbers in that pose, driven by useTween.

Starting