基于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安装包提供的游戏素材,无耻的拿来解压改图用图,自己自娱自乐的产品,太丑也说不过去,就拿来借用一下素材了。

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

时间: 2024-08-05 19:27:01

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

基于Node.js + socket.io实现WebSocket的聊天DEMO

原文摘自我的前端博客,欢迎大家来访问 http://hacke2.github.io 简介 最近看Node.js和HTML5,练手了一个简易版的聊天DEMO,娱乐一下 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一, 为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验, 于是socket.io诞生. 简答来说socket.io具体以下特点: 1.socket.io设计的目标是支持任何的浏览器

使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询(Polling)和Comet技术,Comet又可细分为两种实现方

使用Node.js+Socket.IO搭建WebSocket实时应用

Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. 作者:潘良虎链接:https://www.zhihu.com/question/20215561/answer/26419995来源:知乎原文地址:http://www.plhwin.com/2014/05/28/nodejs-socketio/ WebSocket简介 谈到Web实时推送,就不得不说

(转)使用Node.js+Socket.IO搭建WebSocket实时应用

Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. WebSocket简介 谈到Web实时推送,就不得不说WebSocket.在WebSocket出现之前,很多网站为了实现实时推送技术,通常采用的方案是轮询(Polling)和Comet技术,Comet又可细分为两种实现方式,一种是长轮询机制,一种称为流技术,这两种方式实际上是对轮询技术的改进,这些方案

用node.js(socket.io)实现数据实时推送

在做商品拍卖的时候,要求在商品的拍卖页面需要实时的更新当前商品的最高价格.实现的方式有很多,比如: 1.setInterval每隔n秒去异步拉取数据(缺点:更新不够实时) 2. AJAX轮询方式方式推送数据(缺点:服务端需要在死循环中反复查询数据库) 3.websocket推送数据(缺点:仅支持html5标准的浏览器) socket.io的简要介绍 所有客户端都通过socket.io挂在nodejs服务器上(注意: 只是挂着,不需要任何循环,因为它是事件驱动的):需要推送消息了,服务器就与nod

[转载]使用node.js+socket.io搭建实时消息系统

在开发web应用时,经常会有消息接收需求.例如后台处理完某个任务,需要告知用户等.一个简单的做法,是使用ajax轮询.这样带来的问题一是低效,二是消息触达不够实时.另一个方法是使用websocket来接收消息,但可惜IE不支持这种方式.下面推荐一种既能实时接收消息,又能兼容各种浏览器的方案,那就是node.js+socket.io. node.js的异步非阻塞模型,做消息推送非常合适.socket.io则负责屏蔽浏览器的差异,其会选择性的使用下列方式建立连接:websocket, flash s

Node.js+socket.io在线聊天室

Node.js+socket.io实现在线聊天室,照着这个教程做的,稍加改动即可实现. Node.js:0.10.31 Express:3.* 创建工程chat: 添加几个文件,工程结构如下 代码: package.json: { "name": "application-name", "version": "0.0.1", "private": true, "scripts": { &

使用node.js + socket.io + redis实现基本的聊天室场景

在这篇文章Redis数据库及其基本操作中介绍了Redis及redis-cli的基本操作. 其中的publish-subscribe机制应用比较广泛, 那么接下来使用nodejs来实现该机制. 本文是对之前的一篇文章使用socket.io+redis来实现基本的聊天室应用场景的详细补充. 关于redis的详细情况, 请参考Redis数据库及其基本操作. 对于redis的前提是redis-server一直在运行, 这里就使用默认的localhost:6379. node.js连接redis-serv

node.js + socket.io实现聊天室一

前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研究起来. 首先,先看一下node.js.本小白当时还以为是一个什么js的框架或者类库.结果才知道,原来完全不是那么回事. node.js 诞生于2009年,是一种轻量级的web服务.如果查看node.js的官网,真的非常简答,简短的几行代码,就搭建了一个web服务. var http = requi