前言
前一篇介紹網站基本架構，這篇主要介紹遊戲最核心的部分，以單人遊戲為出發點，從發牌、抽牌、出牌、檢查算式結果是否正確以及計算分數到遊戲結算，一環扣著一環把遊戲邏輯完成，那就讓我們開始吧！
單人遊玩頁面
這個頁面我把它切成三等份，由上到下分別為，功能按鈕區塊，在多人連線中會多塞對手玩家的畫面，中間區塊顯示組合中的算式以及算式結果，最下面的區塊顯示手牌、玩家資訊、操作按鈕，如下圖。
三大區塊
Websocket
雖然是單人遊玩，但整體架構還是建立在 socket 上，也就是說單人就自己一個遊戲房間，這樣的好處是未來在開發多人遊玩時，就可以共用遊戲事件與邏輯方法，當載入這個頁面的時候，需要 new 一個 socket 變數，開啟與伺服器的連線。
File path: hooks\useSinglePlay.ts
const socket = io();
我使用了 hook 來封裝整個前端事件以及遊戲狀態
const useSinglePlay = () => {
const [roomInfo, setRoomInfo] = useState<Room>();
useEffect(() => {
const roomId = uuidv4();
socket.emit(SocketEvent.JoinRoom, {
roomId,
maxPlayers: 1,
playerName: 'single',
mode: GameMode.Single,
});
socket.on(SocketEvent.JoinRoomSuccess, () => {
// 遊戲開始
socket.emit(SocketEvent.StartGame, { roomId });
});
socket.on(SocketEvent.ErrorMessage, message => {
toast.error(message);
});
// 房間更新
socket.on(
SocketEvent.RoomUpdate,
({
room,
extra,
}: {
room: Room;
extra?: { event: SocketEvent; data: any };
}) => {
setRoomInfo(room);
if (extra?.event === SocketEvent.PlayCardResponse) {
if (extra.data) {
toast.success('答案正確');
} else {
toast.error('答案不等於 24');
}
setCheckAnswerCorrect(extra.data as boolean);
}
},
);
return () => {
socket.disconnect();
};
}, []);
return {
roomInfo,
};
};
export default useSinglePlay;
在 useEffect 中會打一個 JoinRoom 事件到後端，會隨機給一個 roomId，這邊用 uuid 套件產生一個，最大玩家數就設定一個，模式設定單人，這些參數後端會拿來判斷要準備什麼類型的房間，單人有單人的牌庫與設定，接著開啟 socket.on 來監聽後端的事件，事件 JoinRoomSuccess 的作用是後端把玩家成功加入房間後觸發，通知玩家可以開始遊戲了，接著由前端再打 StartGame 事件並打 roomId 過去到後端，觸發 RoomUpdate 事件把房間資訊回傳給前端並渲染畫面。
整個畫面的資料都放在 roomInfo 裡面
const [roomInfo, setRoomInfo] = useState<Room>();
以下是 Room 的型別
export type Room = {
roomId: string;
roomName?: string;
password?: string; // 房間密碼
maxPlayers: number; // 最大玩家數
currentOrder: number; // 當前輪到的玩家
deck: NumberCard[]; // 牌庫
players: Player[]; // 玩家資訊
isGameOver: boolean; // 是否遊戲結束
selectedCards: SelectedCard[]; // 當前所選的牌
status: GameStatus; // 房間狀態
settings: RoomSettings; // 房間設定
countdownTime?: number; // 回合倒數計時
};
最主要的房間資訊是 roomId、maxPlayers、currentOrder、deck、isGameOver、selectedCards。
接下來是後端的部分，由於程式碼太長我舉幾個比較重要的事件來介紹。
const httpServer = createServer(handler);
const io = new Server(httpServer, {
pingInterval: 24 * 60 * 60 * 1000,
pingTimeout: 3 * 24 * 60 * 60 * 1000,
});
首先先 new 一個 socket server。
io.on('connection', socket => {
const playerId = socket.id;
// 以下省略...
});
開啟連線並監聽從 client 來的事件，使用 socket.id 來做為玩家 id。
socket.on(
SocketEvent.JoinRoom,
({ roomId, maxPlayers, playerName, roomName, password, mode }) => {
const canJoin = checkCanJoinRoom(roomId, playerId, mode);
if (canJoin) {
socket.join(roomId);
const { room, msg, needPassword } = joinRoom(
{ roomId, maxPlayers, roomName, password },
playerId,
playerName,
mode,
);
if (room) {
io.sockets.to(roomId).emit(SocketEvent.JoinRoomSuccess, room);
socket.emit(SocketEvent.GetPlayerId, playerId);
} else if (needPassword) {
socket.emit(SocketEvent.NeedRoomPassword);
} else {
socket.emit(SocketEvent.ErrorMessage, msg);
}
} else {
socket.emit(SocketEvent.ErrorMessage, '房間人數已滿或不存在');
}
},
);
JoinRoom 為玩家加入房間時觸發，會先檢查是否可以加入房間 checkCanJoinRoom 這個方法。
export function checkCanJoinRoom(
roomId: string,
playerId: string,
mode: GameMode,
) {
if (mode === GameMode.Single) {
return true;
}
return false;
}
單人比較簡單因為只有一個人一律回傳 true，接下來就呼叫 joinRoom 方法把玩家加入房間。
let _rooms: Room[] = [];
所有的房間都存在內存中，在專案的初始階段這個方法簡單又快速，但是當玩家人數多的時候可能會有記憶體不足的問題，或是重新上版時重啟伺服器會把所有已存在的房間清除，所以只能挑合適的時間上版。
// 加入房間
export function joinRoom(
payload: Pick<Room, 'roomId' | 'maxPlayers' | 'roomName' | 'password'>,
playerId: string,
playerName: string,
mode: GameMode,
): Response & { needPassword?: boolean } {
try {
// 創建新房間
const newRoom: Room = {
roomId: payload.roomId,
maxPlayers: payload.maxPlayers,
deck: [],
currentOrder: -1,
isGameOver: false,
selectedCards: [],
roomName: payload.roomName,
password: payload.password,
status: GameStatus.Idle,
settings: {
deckType: DeckType.Standard,
remainSeconds: 60,
},
players: [
{
id: playerId,
isMaster: true,
name: playerName,
handCard: [],
score: 0,
isLastRoundPlayer: false,
isReady: true,
},
],
};
_rooms.push(newRoom);
return {
room: newRoom,
};
}
} catch (e) {
return { msg: '發生錯誤，請稍後再試 (join room)' };
}
}
初始化房間資訊，建立一個新的房間並回傳當前的房間資訊到前端。
io.sockets.to(roomId).emit(SocketEvent.JoinRoomSuccess, room);
還記得前端會在收到 JoinRoomSuccess 事件後打 StartGame 事件嗎，當後端收到 StartGame 後就會準備寫入遊戲設置到房間資訊。
socket.on(SocketEvent.StartGame, ({ roomId }) => {
const { room, msg } = startGame(roomId);
if (room) {
io.sockets.to(roomId).emit(SocketEvent.RoomUpdate, { room });
} else {
socket.emit(SocketEvent.ErrorMessage, msg);
}
});
接下來呼叫 startGame 方法。
// 開始遊戲
export function startGame(roomId: string): Response {
const roomIndex = _getCurrentRoomIndex(roomId);
if (roomIndex === -1) return { msg: '房間不存在' };
try {
let tempDeck: number[] = [];
switch (room.players.length) {
case 1:
tempDeck = createDeckByRandomMode(40, 10);
break;
default:
return {
msg: '開始遊戲失敗',
};
}
// 洗牌
const shuffledDeck: NumberCard[] = shuffleArray(tempDeck).map(d => ({
id: uuidv4(),
value: d,
}));
_rooms[roomIndex].players[0].playerOrder = order;
_rooms[roomIndex].players[0].score = 0;
_rooms[roomIndex].players[0].isLastRoundPlayer = false;
if (shuffledDeck.length) {
// 抽牌並改變牌庫牌數
_rooms[roomIndex].players[0].handCard = draw(
shuffledDeck,
HAND_CARD_COUNT,
);
}
// 寫入牌庫
_rooms[roomIndex].deck = shuffledDeck;
// 從玩家1開始
_rooms[roomIndex].currentOrder = 1;
// 初始化
_rooms[roomIndex].status = GameStatus.Playing;
_rooms[roomIndex].isGameOver = false;
_rooms[roomIndex].selectedCards = [];
return {
room: _rooms[roomIndex],
};
} catch (e) {
return { msg: '發生錯誤，請稍後再試 (start game)' };
}
}
我們先呼叫 _getCurrentRoomIndex 方法找到當前房間，沒找到則回傳錯誤訊息。
const roomIndex = _rooms.findIndex(room => room.roomId === roomId);
在第 9 行，我們呼叫 createDeckByRandomMode 方法產生隨機的牌庫。
/** 產生牌庫 n 為共幾張，maxValue 為最大值 */
export function createDeckByRandomMode(n: number, maxValue: number) {
const array = [];
for (let i = 0; i < n; i++) {
array.push(Math.floor(Math.random() * maxValue) + 1);
}
return array;
}
接著呼叫 shuffleArray 洗牌。
/* shuffle */
export function shuffleArray<T>(array: T[]) {
// 複製原始陣列以避免修改
let shuffledArray = array.slice();
// Fisher-Yates 洗牌算法
for (let i = shuffledArray.length - 1; i > 0; i--) {
// 生成 0 到 i 之間的隨機整數
const j = Math.floor(Math.random() * (i + 1));
// 交換元素 shuffledArray[i] 和 shuffledArray[j]
[shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
}
return shuffledArray;
}
我們透過強大的 ChatGPT 幫我們寫洗牌邏輯，洗完牌後把牌寫進牌庫中，並切換遊玩狀態到遊玩中，這樣我們就完成單人遊戲的初始化了。
結語
感謝大家看到這邊，寫到加入房間與開始遊戲，就已經這麼落落長了，事件的部分我想把它分成幾篇文章來介紹，完整的程式碼可以到我的 github 看喔，不過有包含多人遊戲的部分，我們下篇文章見 ^^。
