当前位置:网站首页>[Teach you how to do mini-games] How to lay out the hands of Dou Dizhu?See what the UP master of the 250,000 fan game area has to say

[Teach you how to do mini-games] How to lay out the hands of Dou Dizhu?See what the UP master of the 250,000 fan game area has to say

2022-08-10 19:02:00 51CTO

我正在参加「创意开发 投稿大赛」​

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

背景

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

十年来,几乎所有斗地主游戏展示手牌的方式(下称理牌方式)都千篇一律:手牌排列为一横排、并按序排列.

[教你做小游戏] 斗地主的手牌,如何布局?看25万粉游戏区UP主怎么说_前端

但这种方式并不友好,有诸多缺点.例如:无法直观看出顺子、飞机等牌型,无法直观看出缺的牌(可预测炸弹).

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

[教你做小游戏] 斗地主的手牌,如何布局?看25万粉游戏区UP主怎么说_前端_02

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

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

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

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

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

[教你做小游戏] 斗地主的手牌,如何布局?看25万粉游戏区UP主怎么说_前端_04

不仅如此,它还帮我解决了另一个问题:人机交互问题.

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

最终决定:手牌一排展示完(部分牌会超出屏幕),手指滑动可看到屏幕外的牌,手指点击可选中牌.这有限制:我不能滑动选牌.

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

欣赏人机交互

让我们欣赏一下:

[教你做小游戏] 斗地主的手牌,如何布局?看25万粉游戏区UP主怎么说_人机交互_05

交互介绍

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

PC端:

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

移动端:

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

以上提出了一个具有创意的交互想法.究竟如何用JS实现滑动选牌?如何兼容PC端操作和手机端操作?请继续阅读:​ ​《滑动选中!PC端+移动端适配!完美用户体验!Doudizhu hand card interaction demonstration》​​.

写在最后

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

原网站

版权声明
本文为[51CTO]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/222/202208101833444852.html