[教你做小游戏] 斗地主的手牌，如何布局？看25万粉游戏区UP主怎么说

Posted 2022-09-06 HullQin

背景

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

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

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

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

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

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

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

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

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

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

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

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

欣赏人机交互

让我们欣赏一下：

交互介绍

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

PC端：

1. 未选中的牌，是默认状态；选中的牌，加一层半透明的黑色遮罩层。
2. 鼠标单击牌，可以选中牌。
3. 鼠标单击已选中的牌，可以取消选中。
4. 鼠标点击某个未选中的牌，并且开始拖拽，所滑过的牌，都会被选中。（不是反选那么简单！）
5. 鼠标点击某个已选中的牌，并且开始拖拽，所滑过的牌，都会被取消选中。（不是反选那么简单！）

移动端：

1. 未选中的牌，是默认状态；选中的牌，加一层半透明的黑色遮罩层。
2. 轻触一张牌，可以选中牌。
3. 轻触已选中的一张牌，可以取消选中。
4. 手指从某个未选中的牌开始滑动，所滑过的牌，都会被选中。（不是反选那么简单！）
5. 手指从某个已选中的牌开始滑动，所滑过的牌，都会被取消选中。（不是反选那么简单！）

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

写在最后

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。