基于node.js+socket.io+html5实现的斗地主游戏（1）概述

一、游戏描述

　　　　说是斗地主游戏，其实是寝室自创的"捉双A"，跟很多地方的捉红10、打红A差不多，大概规则是：

　　　　1.基础牌型和斗地主一样，但没有大小王，共52张牌，每人13张，这也是为什么题目直接叫斗地主游戏的原因了。

　　　　2.手牌有黑桃A和草花A的两个人一伙；若黑桃A和草花A都在一个人手里，那就自己一伙。

　　　　3.开牌之后可以选择亮A或者不亮A，亮A之后队友也应亮明身份，互相配合出牌。

　　　　4.随机指定最先出牌者。

　　　　5.按照手牌出完顺序记分数，分别记4、3、2、1分，最后整队加和，分数高的队伍获胜。

　　　　6.跟第5点不同的是，若双A都在一个人手里，则这个人若是第一个出完牌则获胜、第二个出完牌则为平，否则为负。

　　　　7.单牌2最大，双A（黑桃A和草花A）可以当做最大的炸弹来出。

二、游戏来源

　　前一阵子给自己列了个list，其中提到要把寝室自创的捉双A实现为在线版。

　　因为寝室四个人经常在不同的地方，有的在图书馆、有的在自习室、我在实验室、还有在寝室的，想凑一起打牌比较麻烦，晚上回寝之后又不太愿意放桌子玩牌，所以就想到说要实现成在线版的。

三、需要思考的问题

　　1.在线棋牌游戏如何同步几个人的操作？比如甲同学出了对3，乙丙丁都需要实时显示其出牌结果，并且乙同学进入待出牌状态；比如丁同学出完最后一张牌之后，恰好已经有三人出完牌了，胜负已定，这时候所有人都需要接收该局结束以及胜负结果的消息。

　　2.在线棋牌游戏怎么进行基础的牌型处理？怎么存储52张扑克牌，怎么随机发牌？甲同学出了3，乙同学点选了对4肯定不行，需要乙同学“所选牌型不合理”；同样都是顺子，怎么判断谁的顺子更大？

　　3.棋牌类游戏如何实现牌堆操作、布局？怎么在前端展示牌堆，是利用div硬写还是通过canvas绘制？怎么实现左键点击牌之后，牌可以弹出、右键点击牌之后，牌可以出手的效果？

　　对于第一个问题，前端方面想到的是利用HTML5的web-socket实现，socket通信不会因为时间关闭，可以任意时刻接受、发送推送消息，并监听不同的socket状态（send,onmessage,onclose,connect...），调用回调函数。至于浏览器的兼容性方面就不考虑了，学软件的同志们一般都会装个chrome什么的，装个360的也可以切换下内核。后端部分打算用个轻快的语言，之前打算使用worker-man---一个php的高性能socket服务框架，后来想了想用了一个更快更小的东西：node.js+socket.io，后来也证明把消息进行type分组并对不同type采用不同响应的写法，写起来确实快。

　　对于第二个问题，我想到的办法是将发牌信息存为二维数组[点数][花色]，后端识别游戏开始后调用发牌函数，广播牌组信息，前端接收到自己的牌组信息进行牌堆初始化。根据不同牌型指定其poker-type，与上家的不同type的牌型肯定不允许出。若牌型相同，再根据其poker-type的牌特点进行判定是否大过上家。

　　对于第三个问题，因为游戏有音乐、音效、大量的背景图片、动画、还有每一张扑克牌样式布局，所以打算以canvas为底，将游戏背景和游戏人物绘制在画布上，可以用帧动画的形势给人物添加表情动画。扑克牌和其他的操作面板，考虑到需要做鼠标hover、click识别，canvas对于鼠标事件仅能以整体的canvas为基础再加上精确坐标来定位到小部件，所以将牌堆、出牌部件、音乐按钮等放在一个div层中，浮于canvas上方，不影响操作和布局。左右键出牌直接通过事件绑定来做就可以了。

四、效果展示

　　最后左上角加了聊天版块，可以发消息和发语音，实现完整个游戏再加这个模块，后端就加了几行代码。

　　感谢某鹅公司的斗地主HD安装包提供的游戏素材，无耻的拿来解压改图用图，自己自娱自乐的产品，太丑也说不过去，就拿来借用一下素材了。

　　　今天先写这么多，下一篇写一下扑克牌模型的建立和如何设计消息类别。