01 / SELECTED PROJECTS

IDEAS
IN PLAY.

Guandan 与 Cambio,是两种关于规则、信息和选择的探索。
从一张牌开始,把抽象的想法变成可以亲手体验的作品。

TWO LOCAL GAMES / RULES · MEMORY · INTERACTION

SELECTED WORK / TWO WAYS TO PLAY01GuandanRules, made tangible.02CambioMemory changes everything.
01THE QUESTION

How do rules become intuitive?

Guandan makes a complex game visible. Cambio makes hidden information playable.

02BUILD THE SYSTEM

Give each move a clear place.

Match states, legal actions and scoring provide the structure behind both tables.

03SHAPE THE FEEDBACK

Show what matters. Hide what should stay hidden.

Visible learning hands, target confirmation and tactile card controls turn rules into decisions.

04PUT IT IN PLAY

Two tables. Two ways to think.

Explore real screens, implemented design decisions and a small interactive sample below.

01 / GUANDANINTERACTIVE LEARNING · LOCAL GAME

GUANDAN暗夜牌局。

把掼蛋规则,变成一张 可以亲手探索的牌桌。

以暗夜谍战为视觉线索,把规则、牌型、策略与文化串成一次入局体验。明牌学习,暗牌实战,与三位电脑牌友从 2 打到 A。

交互学习本地模拟对局中英双语
Explore Guandan
Guandan 暗夜牌局真实首页,扇形卡牌与暗夜主题
GUANDAN / THE EXPERIENCE
04四个座位 · 搭档配合
108双副牌 · 完整牌型
2 → A从入门到升级赛
DESIGN NOTES / FROM QUESTION TO PLAY
01 / QUESTION

Make a large ruleset approachable.

Partnerships, level cards and tribute create a steep entry point. The experience connects rules and hand examples to a playable table.

02 / DESIGN CHOICE

Learn openly. Then play from memory.

Learning mode reveals all hands and supports pause and step controls. Play mode hides the other three hands, keeping the same match structure.

03 / IMPLEMENTATION

Keep rules and feedback in sync.

A match engine manages legal hands and progression; the interface handles hints, selection and play. Browser storage preserves match progress.

IMPLEMENTED

A local partnership match from 2 to A, with tribute, returns, mode switching and continued play from saved progress.

PLAY / 01Try a hand · Find a full house
展开项目说明 · 从规则到体验

01 / THE SYSTEM让复杂规则可以上手。

本地比赛涵盖合法牌型、红桃级牌配牌、升级,以及进贡、还贡和抗贡。浏览器保存进度,让一场比赛可以继续,而不止停留在规则阅读。

02 / THE INTERACTION先看懂,再做决定。

学习模式可查看其他三家手牌、暂停与单步观察;实战模式隐藏对手手牌。扇形手牌、扫选、拖拽出牌与提示,把理解规则变成手上的动作。

03 / THE EXPERIENCE氛围也参与叙事。

悬停翻牌、虚构身份抽取和滚动视差构成暗夜开场。原生 HTML、CSS、JavaScript,搭配中英切换、移动端布局与专注牌桌。

Guandan 实际四人本地模拟牌桌,展示扇形手牌和出牌操作

LOCAL SIMULATION / ONE PLAYER + THREE COMPUTER OPPONENTS

02 / CAMBIOMEMORY · HIDDEN INFORMATION

CAMBIO记忆与交换。

看不见的牌, 也能成为交互的主角。

四张暗牌,一次选择。将记忆、隐藏信息、技能交换与结束时机,做成可直接上手的四人本地牌局;用墨绿与香槟金,呈现安静而紧张的策略感。

卡牌交互信息可见性原创 SVG / Web Audio
Explore Cambio
Cambio 当前四人牌桌,NOVA、IRIS、ECHO 与玩家的隐藏手牌
CAMBIO / THE FOUR-PLAYER TABLE
04你与三位电脑对手
54含两张 Joker
04每人起始四张暗牌
DESIGN NOTES / FROM QUESTION TO PLAY
01 / QUESTION

Design around what cannot be seen.

The table must support memory and uncertainty while making each allowed action understandable.

02 / DESIGN CHOICE

Make information boundaries explicit.

Strict mode only reveals two starting cards. Abilities use target selection followed by confirmation; free reveal provides a separate learning route.

03 / IMPLEMENTATION

One turn, one concrete decision.

Local state coordinates draws, swaps, abilities and the final round. Original SVG cards and optional synthesised audio carry the visual and sound system.

IMPLEMENTED

A four-player, 54-card local game with three computer opponents, strict / free-reveal modes, card abilities and final-round scoring.

PLAY / 02Try a hand · Remember & swap
展开项目说明 · 让隐藏信息可感知

01 / THE DECISION每次交换,都有取舍。

抽牌、交换、同点弃牌、宣布 Cambio,直到最后一轮结算。窥视、盲换与 K 的先看后换,将信息、风险与时机变成一连串具体选择。

02 / THE BOUNDARY该看见的,才被看见。

严格模式开局只看自己右侧两张,盖回后隐藏牌面;自由看牌模式帮助学习。技能先选目标再确认,让隐藏信息与操作反馈保持清楚。

03 / THE MOTION用卡牌讲述时间。

历史页随滚动将牌叠展开、散落再归拢。原创 SVG 卡面与 Web Audio 合成音效延续整体氛围,配合规则、策略、历史和牌型实验室。

LOCAL SIMULATION / ONE PLAYER + THREE COMPUTER OPPONENTS

继续了解 / ACADEMIC学术背景与科研经历 ↗