我正在参加「创意开发 投稿大赛」详情请看： 掘金创意开发大赛来了！

我是公众号「 线下聚会游戏 」的作者，开发了一些 联机桌游网页 （斗地主、五子棋等），总结了一些小游戏开发经验，汇总在专栏 《教你做小游戏》 ，分享给大家，欢迎关注。

在B站拥有25万粉丝的UP主「时少权」，发布了条视频： 《为什么中国10年都做不好斗地主？》 ，播放量直破10万，视频主要内容如下：

十年来，几乎所有斗地主游戏展示手牌的方式（下称理牌方式）都千篇一律：手牌排列为一横排、并按序排列。

但这种方式并不友好，有诸多缺点。例如：无法直观看出顺子、飞机等牌型，无法直观看出缺的牌（可预测炸弹）。

我们真实打牌时，往往会在间断的地方留空隙，并且相同的牌竖排排列，如下图：

这种方法解决了常规理牌的缺点。

我看完视频后，恍然大悟！这就是我想要的完美理牌方案！为了表达敬佩之情，我立马就加了好友，表明：我要实现它！

为什么这是我想要的理牌方案？

首先，我不希望用户玩个小游戏还要旋转手机，所以， 我做的斗地主是竖屏的 ，但竖屏有个难点： 手牌一行展示不全，高度空间没有充分利用 ，但是用了「时少权」的理牌方案，问题就迎刃而解！

不仅如此，它还帮我解决了另一个问题： 人机交互问题 。

今年3月开发斗地主时，我玩了30款斗地主游戏来思考人机交互。可惜，并没有找到让我惊艳的交互。

最终决定：手牌一排展示完（部分牌会超出屏幕），手指滑动可看到屏幕外的牌，手指点击可选中牌。 这有限制：我不能滑动选牌 。

但现在，所有手牌都不会超出屏幕了， 滑动选牌得以实现 ！

欣赏人机交互

让我们欣赏一下：

由于时少权当时并未提出交互方案，所以这个交互方案是我自己研究出来的。

以上提出了一个具有创意的交互想法。究竟如何用JS实现滑动选牌？如何兼容PC端操作和手机端操作？请继续阅读： 《滑动选中！PC端+移动端适配！完美用户体验！斗地主手牌交互示范》 。

我是HullQin，独立开发了 《联机桌游合集》 ，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费无广告。还独立开发了 《合成大西瓜重制版》 。还开发了 《Dice Crush》 参加了某个游戏制作比赛。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享： 《教你做小游戏》 、 《极致用户体验》 。