实现功能：
- 登陆界面，点击登陆按钮;
- 如果只有一个用户，进入到等待界面;
- 如果是两个用户，进入到打牌界面
登陆界面，只有一个登陆按钮
- 等待界面： 显示等待另外一个用户登陆
等待界面
- 打牌界面：界面分为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;
}
