資訊專欄INFORMATION COLUMN
摘要：系統結構系統考慮使用和實現服務器端邏輯，前端使用。邏輯流程主要邏輯包括用戶進入游戲等待對家進入游戲游戲過程結束統計這個過程。
1. 系統結構
系統考慮使用Nodejs和SocketIo實現服務器端邏輯，前端使用HTML5。
1 . 主要邏輯包括用戶進入游戲、等待對家進入游戲、游戲過程、結束統計這4個過程。
2 . 游戲過程的邏輯具體如下
3 . 服務器-客戶端通訊邏輯如下
3. 客戶端界面設計1 . 登錄界面
2 . 發牌界面
4. 數據結構4.1 牌型
為了便于計算，使用一維數組定義每張撲克的index，根據圖中順序，按從左到右以及從上到下遞增（即左上角的紅桃A為0,右上角的紅桃K為12,方塊A為13,以此類推）
>
4.2 出牌規則
牌的大小順序：大王，小王，2，A，K，Q，J，10，9，8，7，6，5，4，3。
牌形分為：單張、 一對、 三張、姐妹對（兩張三張都可以連接，且連接數量無限）、順子（數量無限制）、炸彈（不能4帶1）：
除了炸彈以外，普通牌形不允許對壓，相同牌形只有比它大的才能出。
炸彈任何牌形都能出，炸彈的大小為：天王炸，2，A，K，Q，J，10，9，8，7，6，5，4，3。
4.3 比較大小
根據牌型用整數定義撲克的數值大小
從3到K對應的value為2到12
A對應13
2對應14
大小王對應16與15
5. 系統模塊設計5.1 出牌對象
var MODAL;
$(init);
function init() {
new modal();
//綁定頁面上的出牌按鈕,根據當前不同的狀態運行不同的函數
$("body").on("click","#sendCards",statusMachine);
}
function statusMachine() {}
var modal = function () {
var ptrThis;
var modalBox = {
//出牌對象的數據
default:{
//cards存儲服務器發送過來的撲克數組
cards:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,
38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],
//當前游戲的狀態,有DISCARD(發牌),WATING(等待),GAMEOVER(游戲結束)三個狀態
status:"",
//myIndex為玩家所處于的座位的座位號
myIndex:0,
//leftIndex為位于進行游戲的玩家左邊的玩家的座位號
leftIndex:0,
rightIndex:0,
//turn與座位號對應,turn表示由對應的座位號玩家進行操作(例如發牌,放棄)
turn:0,
//若有兩位玩家放棄出牌,則第三位玩家必須出牌,用于標志新的出牌回合的開始
disCardTrue:false,
//記錄前一位玩家所處的牌,用于實現壓牌邏輯
formercardsType:{}
},
//$goal為待插入撲克的jquery對象,cardArray為撲克數組,isDelay為true則延遲插入(隔0.3s插入一張牌)
placeCards:function ($goal,cardArray,isDelay) {},
//sort函數所用到的比較函數,a,b都為撲克的index,將撲克按照value從大到小降序排列,value相同則按照花色排序
comp:function (a,b) {},
//變換當前撲克牌的狀態,未選取->選取,選取->未選取
toggleCard:function ($this) {},
//將服務器發送的無序數組按照一定規則進行排序
cardsSort:function (cards) {},
//將已被選中并發送的撲克牌從手牌中刪除
removeCards:function () {},
//判斷從服務器發送撲克牌數組是由誰發出的,調用placeCards函數插入撲克
//turn設置為下一位玩家,根據turn設置status
//如果撲克牌已被出完,則根據最后一位出牌人來判斷當前玩家是勝利還是失敗
justifyWhich:function (obj) {},
//收到來自服務器轉發的某一位玩家發送的投降信息
someOneTouXiang:function (seats) {},
//清空玩家發送的撲克
clearCards:function () {},
//繪制左右兩位玩家的界面,objLeft為左邊的玩家的信息,objRight同上
drawothers:function (objLeft,objRight) {},
//繪制玩家的界面,包含手牌,obj為相關信息
drawuser:function (obj) {},
//向目標jquery對象插入圖片,$this為目標jquery對象,obj為相關信息(例如圖片路徑)
insertImg:function ($this,obj) {},
//移除目標jquery對象的圖片,$this為目標jquery對象
removeImg:function ($this) {},
//開始游戲,seats為服務器發送過來的座位對應著的用戶的信息,turn指定座位下標為turn的用戶先出牌(turn由服務器的隨機數產生)
//存儲服務器發送過來的撲克牌數組,調用cardsSort,drawothers,drawuser,placeCards,initPlay
startGame:function (seats,turn) {},
//出牌前的邏輯判斷,判斷牌是否能壓過上家或者是否符合邏輯
preSend:function () {},
//在status為WATING時點擊出牌調用的函數
notYourTurn:function () {},
//壓牌邏輯的實現,temp存儲著牌型,牌的值和牌的數量
compWhichLarger:function (temp) {},
//綁定座位點擊坐下事件
init:function () {},
//游戲結束正常調用end函數,isWin為true則該玩家勝利
end:function (isWin) {},
//重開一局,array為來自服務器的撲克牌數組,turn為先出牌的人
reStart:function (array,turn) {},
//切換準備按鈕的狀態,準備->取消,取消->準備
readyGame:function () {},
//游戲結束
gameover:function (isWin) {},
//放棄出牌
giveUp:function () {},
//放棄出牌得到服務器回應
giveUpReply:function (giupCount) {},
//綁定一系列點擊事件
initPlay:function () {}
}
MODAL = modalBox;
return modalBox.init();
}
5.2 出牌流程
//出牌按鈕綁定狀態機,根據當前狀態運行對應的函數,只有在處于DISCARD狀態才能正常發牌
$("body").on("click","#sendCards",statusMachine);
function statusMachine() {
switch(MODAL.default.status){
case "DISCARD":
//運行至preSend函數
MODAL.preSend();
break;
case "WAITNG":
MODAL.notYourTurn();
break;
case "GAMEOVER":
MODAL.readyGame();
default:
break;
}
}
var modalBox = {
preSend:function () {
var array = new Array();
//將被選擇(用select來標識)的撲克牌的下標取出,插入數組array中
$(".cardsLine .card").each(function () {
if($(this).hasClass("select")){
array.push($(this).attr("index"));
}
});
//compCards函數參數為排過序的array,因為用戶手牌已經按照一定順序排過序,所以按照一個方向取出來的牌也是具有一定是有序列的
var temp = compCards(array);
//console.log(compCards(array));
//console.log(temp);
//disCardTrue為true標識之前已經有兩個人放棄出牌,所以不需要考慮壓牌,只需要牌型符合一定規則即可出牌
if(MODAL.default.disCardTrue){
if(temp.type!="ERR"){
socketFun.sendCards(array);
}else{
alert("無法出牌");
}
}else{
//temp為儲存array牌型以及大小等數據的對象,compWhichLarger函數則是將temp與上一位玩家發的牌進行比較,如果大于則flag為true
var flag = ptrThis.compWhichLarger(temp);
if(flag){
//將array發送至服務器,如果服務器將接受成功的消息發回,則調用 justifyWhich函數
socketFun.sendCards(array);
}else{
alert("無法出牌");
}
}
//ptrThis.sendCards();
},
justifyWhich:function (obj) {//ojb為服務器發送的消息,包含發牌人,發的牌的信息
if(obj.posterIndex!=MODAL.default.myIndex){
//如果是別人出的牌,則儲存該牌型
MODAL.default.formercardsType=compCards(obj.array);
}
MODAL.default.disCardTrue = false;
var $goal;//$goal為待渲染的部位
switch(obj.posterIndex){
case MODAL.default.myIndex:
ptrThis.removeCards();
$goal = $(".showCardLine");
break;
case MODAL.default.leftIndex:
$goal = $(".leftPlayer").children(".otherCards");
break;
case MODAL.default.rightIndex:
$goal = $(".rightPlayer").children(".otherCards");
break;
default:
break;
}
ptrThis.placeCards($goal,obj.array,false);
//進入下一回合,輪次加一
MODAL.default.turn = (MODAL.default.turn+1)%3;
console.log("Now turn is"+MODAL.default.turn);
//設置下一回合該玩家是出牌還是等待
if(MODAL.default.turn==MODAL.default.myIndex){
MODAL.default.status = "DISCARD";
}else{
MODAL.default.status = "WAITNG"
}
//如果某一位玩家出完牌,則游戲結束
if(obj.sendOut){
if(obj.posterIndex==MODAL.default.myIndex){
ptrThis.end(true);
}else{
ptrThis.end(false);
}
}
}
}
5.3 客戶端SocketIO消息模型
var socket = io.connect("http://localhost:3000");
var X = window.scriptData; //截取服務器發送過來的數據
//收到服務器發送的不同的消息類型,調用對應的出牌模型中的函數
socket.on("connect",function () {
socket.emit("addUser",X._id); //添加用戶
})
socket.on("playerSit",function (obj) {
MODAL.insertImg($(".seat").eq(obj.index).children(),obj);
})
socket.on("leave",function (index) {
MODAL.removeImg($(".seat").eq(index).children());
})
socket.on("seatsInfo",function (obj) {
console.log("seatsInfo"+obj);
for(var key in obj){
console.log(key);
MODAL.insertImg($(".seat").eq(obj[key].index).children(),obj[key]);
}
})
socket.on("gameStart",function (obj,turn) {//服務器通知玩家游戲開始
MODAL.startGame(obj,turn);
})
socket.on("postCards",function (obj) {//服務器返回出牌人以及出牌信息
MODAL.justifyWhich(obj);
})
socket.on("reStart",function (array,turn) {//服務器返回重新開始游戲的信息
MODAL.reStart(array,turn);
})
socket.on("giveup",function (giupCount) {//服務器返回放棄信息
MODAL.giveUpReply(giupCount);
})
socket.on("renshu",function (seats) {
MODAL.someOneTouXiang(seats);
})
var socketFun = {
//出牌對象通過socketFun調用相關函數與服務器通信
sit:function ($this) {
var obj = {
id:X._id,
index:$this.parent().index()
}
socket.emit("sitSeat",obj);
},
sendCards:function (array) {
var sendOut;
if(($(".cardsLine .cards").children().length-array.length)==0){
sendOut = true;
}else{
sendOut = false;
}
var obj = {
array:array,
posterIndex:MODAL.default.myIndex,
sendOut:sendOut
}
socket.emit("postCards",obj);
},
readyMsg:function (obj) {//告知服務器該玩家準備
socket.emit("readyMsg",obj);
},
giveUp:function () {//告知服務器放棄出牌
socket.emit("giveup");
},
touxiang:function (index) {//告知服務器該玩家投降
socket.emit("touxiang",index)
}
}
5.4 壓牌邏輯
根據牌型數組判斷牌型的邏輯使用狀態機實現，其狀態遷移圖如下：
function compCards(array) {
if(array.length==2&&data[array[0]].value==16&&data[array[1]].value==15){//天王炸
var cardsType={
count:array.length,
type:"KINGBOMB",
value:data[array[0]].value
};
return cardsType;
}
//ptr指向array的下標
var ptr;
//end標志狀態機是否結束
var end = false;
//data存儲著每一張撲克的value,避免多次運算value
var box = {
cardsType:{
count:array.length,
type:"ONE",
value:data[array[0]].value
},
setType:function (type) {
this.cardsType.type = type;
},
statusOne:function () {
if(this.cardsType.count==1){
end = true;
return ;
}
if(data[array[0]].value==data[array[1]].value){ //如果第一個和第二個數字相同
this.setType("TWO");
return ;
}
if(data[array[0]].value==data[array[1]].value+1){
this.setType("STRAIGHT");
}else{
this.setType("ERR");
}
return ;
},
statusTwo:function () {
if(this.cardsType.count==2){
end = true;
return ;
}
if(data[array[1]].value==data[array[2]].value){
this.setType("THREE");
return ;
}
if(data[array[1]].value==data[array[2]].value+1){
this.setType("TWO-ONE");
}else{
this.setType("ERR");
}
},
statusThree:function () {
if(this.cardsType.count==3){
end = true;
return ;
}
if(data[array[2]].value==data[array[3]].value){
this.setType("BOMB");
return ;
}
if(data[array[2]].value==data[array[3]].value+1){
this.setType("THREE-ONE");
}else{
this.setType("ERR");
}
return ;
},
statusStraight:function () {
if(this.cardsType.count< 5){
this.setType("ERR");
end = true;
return ;
}
if(ptr< this.cardsType.count-1){
if(data[array[ptr]].value!=data[array[ptr+1]].value+1){
this.setType("ERR");
end = true;
return ;
}
}else{
end = true;
return ;
}
},
statusTwoOne:function () {
if(ptr==this.cardsType.count-1){ //TwoOne處于中間狀態,結束則出錯
this.setType("ERR");
return ;
}
if(data[array[ptr]].value==data[array[ptr+1]].value){
this.setType("TWO-TWO");
}else{
this.setType("ERR");
}
return ;
},
statusTwoTwo:function () {
if(ptr==this.cardsType.count-1){
end = true;
return ;
}
if(data[array[ptr]].value==data[array[ptr]].value+1){
this.setType("TWO-ONE");
}else{
this.setType("ERR");
}
return ;
},
statusThreeOne:function () {
if(ptr==this.cardsType.count-1){
this.setType("ERR");
return ;
}
if(data[array[ptr]].value==data[array[ptr+1]].value){
this.setType("THREE-TWO");
}else{
this.setType("ERR");
}
return ;
},
statusThreeTwo:function () {
if(ptr==this.cardsType.count-1){
this.setType("ERR");
return ;
}
if(data[array[ptr]].value==data[array[ptr+1]].value){
this.setType("THREE-THREE");
}else{
this.setType("ERR");
}
return ;
},
statusThreeThree:function () {
if(ptr==this.cardsType.count-1){
end = true;
return ;
}
if(data[array[ptr]].value==data[array[ptr+1]].value+1){
this.setType("THREE-ONE");
}else{
this.setType("ERR");
}
return ;
},
statusBomb:function () {
if(ptr==this.cardsType.count-1){
end = true;
return ;
}
if(data[array[ptr]].value!=data[array[ptr+1]].value){
this.setType("ERR");
}
},
ERR:function () {
end = true;
return ;
}
};
for(ptr = 0;ptr< box.cardsType.count;++ptr){
console.log("END:"+end);
console.log(box.cardsType);
if(end){
break;
}
switch(box.cardsType.type){
//ONE表示單張牌,這個ONE狀態結束有效
case "ONE":
box.statusOne();
break;
//TWO表示一對,結束有效
case "TWO":
box.statusTwo();
break;
//THREE表示三張一樣的牌,結束有效
case "THREE":
box.statusThree();
break;
//STRAIGHT表示順子,根據array長度判斷是否有效
case "STRAIGHT":
box.statusStraight();
break;
//TWO-ONE表示形如xx(x+1)(x+1)(x+2)的牌型,結束無效,返回類型ERR
case "TWO-ONE":
box.statusTwoOne();
break;
case "TWO-TWO":
//TWO-TWO表示形如xx(x+1)(x+1)(x+2)(x+2)的牌型,結束有效
box.statusTwoTwo();
break;
//THREE-ONE表示形如xxx(x+1)(x+1)(x+1)(x+2)的牌型,結束無效,返回類型ERR
case "THREE-ONE":
box.statusThreeOne();
break;
//THREE-TWO表示形如xxx(x+1)(x+1)(x+1)(x+2)(x+2)的牌型,結束無效,返回類型ERR
case "THREE-TWO":
box.statusThreeTwo();
break;
//THREE-THREE表示形如xxx(x+1)(x+1)(x+1)(x+2)(x+2)(x+2)的牌型,結束有效
case "THREE-THREE":
box.statusThreeThree();
break;
//BOMB表示炸彈,返回有效
case "BOMB":
box.statusBomb();
break;
//ERR表示牌型不合邏輯,無效
case "ERR":
box.ERR();
break;
}
}
return box.cardsType;
}
詳細代碼見GITHUB的pokepoke項目
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91162.html
摘要：系統結構系統考慮使用和實現服務器端邏輯，前端使用。邏輯流程主要邏輯包括用戶進入游戲等待對家進入游戲游戲過程結束統計這個過程。 1. 系統結構 系統考慮使用Nodejs和SocketIo實現服務器端邏輯，前端使用HTML5。showImg(https://segmentfault.com/img/remote/1460000007643089); 2. 邏輯流程 1 . 主要邏輯包括用戶...
摘要：技術棧項目背景這個項目主要是為了玩玩，項目的方向大概是做出類似的在線聊天系統。項目使用進行部署和管理，功能在不斷的迭代開發中。首頁用戶列表用戶中心注冊登陸注銷用戶資料指定聊天室開始安裝使用之前，請在中修改的安裝路徑。 技術棧：NodeJS & SocketIO & Express & EJS & MongoDB & Gulp 項目背景 這個項目主要是為了玩玩NodeJS，項目的方向大概...
摘要：技術棧項目背景這個項目主要是為了玩玩，項目的方向大概是做出類似的在線聊天系統。項目使用進行部署和管理，功能在不斷的迭代開發中。首頁用戶列表用戶中心注冊登陸注銷用戶資料指定聊天室開始安裝使用之前，請在中修改的安裝路徑。 技術棧：NodeJS & SocketIO & Express & EJS & MongoDB & Gulp 項目背景 這個項目主要是為了玩玩NodeJS，項目的方向大概...
摘要：在現如今的游戲市場寒冬中，擁有微信龐大的用戶量以及更好兼容性的小程序游戲，優勢就顯得格外明顯。掃描二維碼即可報名您在現場將有這些體驗來自騰訊云云開發團隊與微信團隊聯合打造干貨分享，內容包括微信小游戲首發經驗分享。 有人說微信小程序游戲的百花齊放 活像十幾年前的4399小游戲稱霸互聯網的景象 歪，斗地主嗎，三缺二， 不用下app，小程序就能玩，我保證不搶地主讓你搶！ ...... ‘...
閱讀 3196·2021-11-18 10:02
閱讀 1446·2021-10-12 10:08
閱讀 1236·2021-10-11 10:58
閱讀 1269·2021-10-11 10:57
閱讀 1167·2021-10-08 10:04
閱讀 2121·2021-09-29 09:35
閱讀 773·2021-09-22 15:44
閱讀 1269·2021-09-03 10:30
