码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-11-24 15:19:04      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   os   使用   sp   on   

一、游戏描述

  bubuko.com,布布扣  说是斗地主游戏,其实是寝室自创的"捉双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安装包提供的游戏素材,无耻的拿来解压改图用图,自己自娱自乐的产品,太丑也说不过去,就拿来借用一下素材了。

bubuko.com,布布扣

bubuko.com,布布扣

bubuko.com,布布扣

 

 

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

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

标签:style   blog   http   io   color   os   使用   sp   on   

原文地址:http://www.cnblogs.com/limingxi/p/4118642.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!