如何用js写一个斗地主

栏目: JavaScript · 发布时间: 5年前

内容简介:技术栈:已实现功能:WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。 demo中使用的ws库,npm i ws 安装完成之后,开启websocket服务:

技术栈:

* 前端:vue
* 后端:nodejs+websocket+ws
复制代码

已实现功能:

* 随机发牌(自动分配地主和地主牌)
* 出牌同步
* 断线重连(依据ip。demo中为了方便演示,并没有限定一个ip只能加入一次)
* 退出游戏(同房间其他玩家也会清除手牌)
* 游戏大厅与多房间游戏
* log公告窗口
复制代码

基本功能的实现

websocket基础知识

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。 demo中使用的ws库,npm i ws 安装完成之后,开启websocket服务:

const WebSocket = require('ws');//引入ws
 
const wss = new WebSocket.Server({ port: 8002 });//开启服务
 
wss.on('connection',function(ws,req){   //客户端链接
    ws.on('message', function incoming(data) {});   //接收客户端消息
    ws.on('close',function reset(){})   //客户端关闭触发
})
wss.broadcast = function broadcast(data) {  //广播
  wss.clients.forEach(function each(client) {
    if (client.readyState === WebSocket.OPEN) {
      client.send(data);
    }
  });
};
复制代码

与之对应,在客户端需要:

const ws = new WebSocket('ws://localhost:8002');
ws.onopen = function(e){}   //客户端链接
ws.onclose = function(e){}  //客户端关闭
ws.onerror = function(){}   //连接出错
ws.onmessage = function(e){} //接收服务端消息
复制代码

由于ws只能发送二进制和string,但是我们数据传输需求基本都是复杂数据对象,因此每次发送和接收前都需要用JSON.stringfy()和JSON.parse()转换。

发牌函数

首先需要获得所有牌型

function Card(){
    var type = ['黑桃','红心','梅花','方块']
    var nume = [
    {label:'A',value:14},{label:'2',value:16},{label:'3',value:3},{label:'4',value:4},
    {label:'5',value:5},{label:'6',value:6},{label:'7',value:7},{label:'8',value:8},
    {label:'9',value:9},{label:'10',value:10},{label:'J',value:11},{label:'Q',value:12},{label:'K',value:13}]
    var All = []
      type.forEach(v=>{
        nume.forEach(cv=>{
          All.push({
            type:v,
            label:cv.label,
            value:cv.value,
            isOn:false
          })
        })
      })
      All.push({
        type:'大王',
        label:'大王',
        value:100,
        isOn:false
      })
      All.push({
        type:'小王',
        label:'小王',
        value:50,
        isOn:false
      })
      return All
  }
复制代码

然后根据随机数生成4个数组,前三个为玩家手牌,第四个为地主牌。

module.exports = function initCard(num){ //初始化手牌
    var AllCard = Card()
    var player = []
    for(var i=0;i<num;i++){
      player.push([])
      for(var j=0;j<(51/num);j++){
        var n = Math.floor(Math.random()*AllCard.length)
        player[i].push(AllCard[n])
        AllCard.splice(n,1)
      }
    }
    player.push(AllCard)
    AllCard=[]
    for(var i=0;i<player.length;i++){
      player[i]=player[i].sort(reSort('value'))
    }
    return player
}
复制代码

发牌展示

html结构如下:

<ul :style="'width:'+((bossCard.length-1)*24+100)+'px'" class="cardList" v-show="bossCard.length>0" v-if="bossCard">
  <li v-for="(item,ci) in bossCard" :class="item.isOn==true?'isOn':''" :key="ci" :style="'left:'+ci*24+'px;z-index:'+ci">
    <div :class="item|setClass" style="text-align: left;">{{item.label}}</div>
    <div class="cardBg"></div>
  </li>
</ul>
复制代码
  • 画一张扑克牌
根据type添加不通类名,然后通过背景图添加花色
filters: {
    setClass(item){
      if(item.type == '黑桃') return 'heitao'
      if(item.type == '红心') return 'hongxin'
      if(item.type == '梅花') return 'meihua'
      if(item.type == '方块') return 'fangkuai'
      if(item.type == '大王') return 'dawang'
      if(item.type == '小王') return 'xiaowang'
    }
}
复制代码
  • 发牌动画
接收到服务端的手牌后通过定时器一张一张添加到vm,然后添加transition: all linear 0.2s即可实现类似qq斗地主的发牌效果。
var t = setInterval(()=>{
  if(i+1>cardArr.length){
    _this.isInit = true
    return clearInterval(t)
  }
  _this.player.push(cardArr[i])
  i++
},200)
复制代码

待续

也不知道有没有人看,先写到这里。感兴趣的可以看下 github源码 。 整个demo都是想到哪写到哪,代码特别乱还没来得及整理,出牌验证规则也还没有写。后边有时间了整理一下代码然后补全功能。


以上所述就是小编给大家介绍的《如何用js写一个斗地主》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创业36条军规

创业36条军规

孙陶然 / 中信出版社 / 2011-12 / 39.00元

《创业36军规》的作者孙陶然是一位数次成功创业的创业者,书中的内容有关创业的方方面面,从创业目的到股东选择,从经营到管理,从找方向到项目细节不一而足,写给每位心怀创业理想或正在创业路上的读者。 很多教人成才的书,作者未必成才;很多教人炒股的书,作者并不炒股;很多教人创业的书,作者不曾成功创业。一起来看看 《创业36条军规》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具