基於node.js+socket.io+html5實現的鬥地主遊戲（1）概述

標籤：style   blog   http   io   color   os   使用   sp   on   

一、遊戲描述

　　　　說是鬥地主遊戲，其實是寢室自創的"捉雙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安裝包提供的遊戲素材，無恥的拿來解壓改圖用圖，自己自娛自樂的產品，太醜也說不過去，就拿來借用一下素材了。

 

 

　　　今天先寫這麼多，下一篇寫一下撲克牌模型的建立和如何設計訊息類別。

基於node.js+socket.io+html5實現的鬥地主遊戲（1）概述