模仿斗地主2

作者: ofelia_why | 来源:发表于2016-11-11 23:03 被阅读27次

实现功能：

登陆界面，点击登陆按钮;

如果只有一个用户，进入到等待界面;
如果是两个用户，进入到打牌界面

登陆界面，只有一个登陆按钮

等待界面：显示等待另外一个用户登陆

等待界面

打牌界面：界面分为4块，分别是对方牌的区域，显示打出的牌，控制按钮区域，自己的牌的区域

如果点击打牌，选中的牌会向上移，
然后点击打牌，自己和对方都会收到这个牌，并显示在中间的区域；
此时隐藏自己的操作按钮，将选择权交给对方。
点击退出游戏，对方窗口弹出提示信息；
一方的牌打完之后，会给双方都发送提示信息。

发送方

接收方

服务器端www文件

function shuffle() {
    var temp, count = 54;
    var pokers = new Array(count);//牌
    for (var i = 0; i < count; i++) {
        pokers[i] = i;
    }
    //打乱牌
    for (var j = 0; j < count; j++) {
        var rd = parseInt(Math.random() * count);
        temp = pokers[j];
        pokers[j] = pokers[rd];
        pokers[rd] = temp;
    }
    return pokers;
}

var config = require('../config');
//socket.io部分
var onlineList = [];//在线用户列表
//服务器端引入socket.io
var io = require('socket.io').listen(server);
var count = 0;
var user = {};
var me;
var frd;
var meObj = {};
var frdObj = {};
io.on('connection', function(socket){
   var user;
   //用户上线
   socket.on('startGame', function(obj){
      user = obj.data.from;
      socket.join(obj.data.from);//加入房间
      if(onlineList.indexOf(user) == -1){
         onlineList.push(user);//添加到在线用户数组
      }
      count++;
      if(count == 1){
         meObj = obj;
         meObj.data.status = config.site.WAITING;//状态机置为waiting状态
         io.to(meObj.data.from).emit("waiting");
      }else if(count == 2){
          frdObj=obj;
          meObj.data.to = frdObj.data.from;
          frdObj.data.to = meObj.data.from;
          meObj.data.status = config.site.DISCARD;
          frdObj.data.status = config.site.DISCARD;
         //洗牌
         var pokers = shuffle();
         var pokerCounts=26;
         var poker_me = new Array(pokerCounts);//我的牌
         var poker_frd = new Array(pokerCounts);//朋友的牌
         for(var k=0, m=0;k<54;k++){
            if(k<=pokerCounts){
                poker_me[k]=pokers[k];
            }else{
                poker_frd[m]=pokers[k];
                m++;
            }
         }
         sort(poker_me);
         sort(poker_frd);
         meObj.data.pokers = poker_me;
         frdObj.data.pokers = poker_frd;
         //预先发牌
         io.to(meObj.data.from).emit("discard", meObj, frdObj.data.counts);
         io.to(frdObj.data.from).emit("discard", frdObj, meObj.data.counts);
      }else if(count > 2){
         var index = onlineList.indexOf(user);//查找用户所在的位置
         if(index !== -1){
            onlineList.splice(index,1);//删除用户
         }
         count = 2;
         socket.emit("crowded");
      }
   });

    socket.on('send poker', function(obj, count, sendPoker){
      if(obj.data.counts == 0){
          obj.data.status = config.site.GAMEOVER;
          obj.data.success = 1;//成功
          io.to(obj.data.from).emit("game over", "你成功了");
          io.to(obj.data.to).emit("game over", "你失败了");
      }else{
          //收到牌
          io.to(obj.data.to).emit("receive poker", count, sendPoker);
      }
    });

    socket.on('send abandon', function(obj){
      obj.data.status = config.site.WAITING;
      io.to(obj.data.to).emit("receive abandon");
    });

   socket.on('disconnect', function(){
     var index = onlineList.indexOf(user);//查找用户所在的位置
     if(index !== -1){
       onlineList.splice(index,1);//删除用户
       socket.leave(user);//离开房间
     }
     console.log(user + 'Offline....');
   });

   socket.on('leave', function(){
     socket.emit('disconnect');
   });
});

客户端 poker.js

INIT=0;
WAITING=1;
DISCARD=2;
GAMEOVER=3;
var htmlInit = "<div class='init'><button type='button' id='startGame'></button></div>";
var htmlWaiting = "<div class='waiting' id='waiting'><h2>等待另一个人加入...</h2></div>";
var htmlDiscard = "<div class='discard' id='discard'> <div class='friend'> <div class='image_frd'></div> <div class='poker_frd'> </div> </div> <div class='playArea'> <main class='pokerArea'> </main> </div> <div class='menu'> <button class='sendPoker' id='sendPoker'></button> <button class='anstain' id='abstain'></button><button class='abandon' id='abandon'></button> </div> <div class='me'> <div class='image_me'></div> <div class='poker_me'> </div> </div> </div>";

var socket = io();
var pkObj= {
    data: {
        type: 0,  //牌的类型
        from: 'Alice',
        to: '',
        pokers: [],//数组
        status: INIT,//状态
        counts: 27,
        success: 0
    },
    init: function() {
        pkObj.data.from += parseInt(Math.random() * 10);
        //初始化
        socket.on('init', function(obj){
            doInit();
        });
        //等待
        socket.on('waiting', function(obj){
            doWaiting();
        });
        //发牌
        socket.on("discard", function(objMe, countsFrd){
            doDiscard();
            showPoker(objMe);//显示我的牌
            showPokerFrd(countsFrd);//显示对方的牌
            sendPoker(objMe); //发送牌
        });
        socket.on('receive poker', function(countFrd,sendPoker){
            recePoker(countFrd, sendPoker);
        });
        socket.on('game over', function(message){
            alert(message);
        });
        socket.on('receive abandon', function(){
            alert("对方放弃了....");
        });
        socket.on('crowded', function(){
            alert("人满了...");
        })
    }
};

$(init);

function init() {
    pkObj.init();
    // $("body").on("click", statusMachine);
    $("body").on('click', '#startGame', startGame);//点击按钮，开始跳转
}

function statusMachine(e){
    var tag = e.target;
    switch(pkObj.data.status){
        case INIT:
            doInit(tag);
            break;
        case WAITING:
            doWaiting(tag);
            break;
        case DISCARD:
            doDiscard(tag);
            break;
        case GAMEOVER:
            doRestart(tag);
            break;
    }
}

//初始化
function doInit(tag) {
    $(".wrapper").html("");
    $(".wrapper").append(htmlInit);
}
//开始游戏
function startGame(){
    socket.emit('startGame',pkObj);//开始游戏
}
//等待
function doWaiting(tag){
    $(".wrapper").html("");
    $(".wrapper").append(htmlWaiting);
}
//发牌
function doDiscard(tag){
    $(".wrapper").html("");
    $(".wrapper").append(htmlDiscard);
}
//重新开始
function doRestart(tag){
    $(".wrapper").html("");
    $(".wrapper").append(htmlInit);
}

function showPoker(obj){
    for(var j=0;j<obj.data.counts;j++) {
        var x = obj.data.pokers[j] % 13 * (-90);
        var y = parseInt(obj.data.pokers[j] / 13) * (-120);
        var left = x + "px";
        var top = y + "px";
        var pokerj = "pokerMe" + j;
        var singlePoker = $("<button class='poker'></button>");
        singlePoker.addClass(pokerj);
        singlePoker.css({
            "background-position": left + " " + top
        });
        $(".poker_me").append(singlePoker);
    }

    $(".poker_me .poker").click(function(){
        if($(this).hasClass('selected')){//已经被选择
            $(this).animate({
                "margin-top":"+20px"
            });
            $(this).removeClass("selected");//移除属性
        }else {
            $(this).animate({//未选择
                "margin-top":"-20px"
            });
            $(this).addClass("selected");//添加属性，牌选中
        }
    });
}

function showPokerFrd(countsFrd){
    for(var j=0;j<countsFrd;j++) {
        var singlePoker = $("<button class='poker'></button>");
        singlePoker.css({
            "background-position": "-180px -480px "
        });
        $(".poker_frd").append(singlePoker);
    }
}

//打牌--没有牌表示成功
function sendPoker(obj) {
    //发牌
    $("#sendPoker").click(function(){
        var count = 0;//每次发的牌的个数
        if($(".pokerArea").children('.poker') != null){  //展示区域有牌
            $('.pokerArea').html("");//清空
        }
        for(var k=0;k<27;k++) {
            var index = ".pokerMe" + k;
            if ($(index).hasClass('selected')) {
                $(".pokerArea").append($(index));
                obj.data.counts--;
                count++;
            }
        }
        var sendPoker = $(".pokerArea").html();
       // $(".sendPoker").attr("disabled", "disabled");//发送之后，给按钮移除disabled的属性
       //  $(".anstain").attr("disabled", "disabled");
        $(".sendPoker").hide();//显示按钮
        $(".anstain").hide();
        socket.emit('send poker', obj, count, sendPoker);//发送牌到数据库
    });
    //不出，弃权
    $("#anstain").click(function(){
    });
    $("#abandon").click(function(){
        obj.data.success = 0;
        obj.data.status = INIT;
        socket.emit('send abandon',obj);
        doInit();
    });
}

//收到牌
function recePoker(countFrd,sendPoker){
    console.log("发送之后，给按钮移除disabled的属性");
    // $(".sendPoker").attr("disabled", "");//发送之后，给按钮移除disabled的属性
    // $(".anstain").attr("disabled", "");
    $(".sendPoker").show();//发送之后， 隐藏按钮
    $(".anstain").show();
    $('.pokerArea').html("");//清空
    for(var i=0;i<countFrd;i++){
        $(".poker_frd .poker:first").remove();
    }
    $(".pokerArea").append(sendPoker);//收到牌
}

css使用flex语法

button {
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.wrapper {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: #1D4F84!important;
}
.init {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-image: url("../images/bg_2.png") ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.init #startGame {
    align-items: center;
    justify-content: space-between;
    background-image: url("../images/button.png");
    background-position: -1330px 0%;
    width: 160px;
    height: 40px;
}
.discard {
    width: 100%;
    height: 100%;
    background-image: url("../images/bg_1.png");
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.discard .me , .friend{
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.discard .image_me {
    /*头像放到最右边*/
    flex: 0 0 6em;
    order: -1;
    width: 80px;
    height: 80px;
    background-image: url("../images/icon.png");
    background-position: -80px 0%;
}
.discard .image_frd {
    /*头像放到最右边*/
    flex: 0 0 6em;
    order: -1;
    width: 80px;
    height: 80px;
    background-image: url("../images/icon.png");
    background-position: -160px 0%;
}
.discard .poker_me,.poker_frd{
    flex: 10;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 10px;
}
.discard .playArea{
    flex: 1;
    justify-content: space-between;
}
.discard .pokerArea{
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.poker {
    width: 90px;
    height: 120px;
    margin-right: -50px;
    background-image: url("../images/poker.png");
}
.discard .menu {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.sendPoker {
    background-image: url("../images/button.png");
    background-position: -1165px 0%;
    width: 80px;
    height: 40px;
    border: none;
    cursor: pointer;
}
.anstain {
    background-image: url("../images/button.png");
    background-position: -990px 0%;
    width: 80px;
    height: 40px;
    border: none;
    cursor: pointer;
}
.abandon {
    background-image: url("../images/button.png");
    background-position: -1490px 0%;
    width: 160px;
    height: 40px;
    border: none;
    cursor: pointer;
}

模仿斗地主2

接收方

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端社团