多人連線遊戲

使用 Node.js 和 WebSocket 建立多人井字遊戲

這份教學將帶領你step by step建立一個即時多人井字遊戲。我們將使用:

Node.js 作為後端伺服器
WebSocket 處理即時通訊
Express 提供靜態檔案服務
HTML/CSS/JavaScript 實現前端介面

專案設置

首先建立一個新的專案目錄並初始化:

mkdir websocket-tictactoe
cd websocket-tictactoe
npm init -y

安裝必要的依賴:

npm install express ws

專案結構

websocket-tictactoe/
├── package.json
├── server.js
└── public/
    ├── index.html
    ├── style.css
    └── client.js

後端實作 (server.js)

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

// 提供靜態檔案
app.use(express.static('public'));

// 遊戲狀態
let games = new Map();
let waitingPlayer = null;

class Game {
    constructor(player1, player2) {
        this.board = Array(9).fill(null);
        this.players = [player1, player2];
        this.currentPlayer = 0;
        this.gameId = Date.now().toString();
    }

    makeMove(index, player) {
        if (this.board[index] || this.players[this.currentPlayer] !== player) {
            return false;
        }

        this.board[index] = this.currentPlayer === 0 ? 'X' : 'O';
        this.currentPlayer = 1 - this.currentPlayer;
        return true;
    }

    checkWinner() {
        const lines = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // 橫向
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // 縱向
            [0, 4, 8], [2, 4, 6]             // 斜向
        ];

        for (let line of lines) {
            const [a, b, c] = line;
            if (this.board[a] && 
                this.board[a] === this.board[b] && 
                this.board[a] === this.board[c]) {
                return this.board[a];
            }
        }

        if (this.board.every(cell => cell !== null)) {
            return 'tie';
        }

        return null;
    }
}

wss.on('connection', (ws) => {
    console.log('新玩家連接');

    if (!waitingPlayer) {
        waitingPlayer = ws;
        ws.send(JSON.stringify({
            type: 'wait',
            message: '等待其他玩家加入...'
        }));
    } else {
        const game = new Game(waitingPlayer, ws);
        games.set(waitingPlayer, game);
        games.set(ws, game);

        // 通知兩位玩家遊戲開始
        waitingPlayer.send(JSON.stringify({
            type: 'start',
            symbol: 'X',
            gameId: game.gameId
        }));

        ws.send(JSON.stringify({
            type: 'start',
            symbol: 'O',
            gameId: game.gameId
        }));

        waitingPlayer = null;
    }

    ws.on('message', (message) => {
        const data = JSON.parse(message);
        const game = games.get(ws);

        if (!game) return;

        if (data.type === 'move') {
            if (game.makeMove(data.index, ws)) {
                const gameState = {
                    type: 'update',
                    board: game.board,
                    currentPlayer: game.currentPlayer
                };

                game.players.forEach(player => {
                    player.send(JSON.stringify(gameState));
                });

                const winner = game.checkWinner();
                if (winner) {
                    const gameOver = {
                        type: 'gameover',
                        winner: winner
                    };

                    game.players.forEach(player => {
                        player.send(JSON.stringify(gameOver));
                    });
                }
            }
        }
    });

    ws.on('close', () => {
        const game = games.get(ws);
        if (game) {
            game.players.forEach(player => {
                if (player !== ws && player.readyState === WebSocket.OPEN) {
                    player.send(JSON.stringify({
                        type: 'playerleft',
                        message: '對手離開了遊戲'
                    }));
                }
            });

            games.delete(game.players[0]);
            games.delete(game.players[1]);
        }

        if (waitingPlayer === ws) {
            waitingPlayer = null;
        }
    });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`伺服器運行於 http://localhost:${PORT}`);
});

前端實作

HTML (public/index.html)

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多人井字遊戲</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>多人井字遊戲</h1>
        <div id="status" class="status">等待連接...</div>
        <div id="board" class="board">
            <div class="cell" data-index="0"></div>
            <div class="cell" data-index="1"></div>
            <div class="cell" data-index="2"></div>
            <div class="cell" data-index="3"></div>
            <div class="cell" data-index="4"></div>
            <div class="cell" data-index="5"></div>
            <div class="cell" data-index="6"></div>
            <div class="cell" data-index="7"></div>
            <div class="cell" data-index="8"></div>
        </div>
        <button id="restart" class="restart-btn" style="display: none;">重新開始</button>
    </div>
    <script src="client.js"></script>
</body>
</html>

CSS (public/style.css)

.container {
    text-align: center;
    margin: 20px auto;
    max-width: 600px;
}

.status {
    margin: 20px 0;
    font-size: 1.2em;
}

.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 20px auto;
    width: 300px;
    background: #333;
    padding: 5px;
    border-radius: 5px;
}

.cell {
    aspect-ratio: 1;
    background: white;
    border: none;
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cell:hover {
    background: #f0f0f0;
}

.restart-btn {
    padding: 10px 20px;
    font-size: 1.1em;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}

.restart-btn:hover {
    background: #45a049;
}

JavaScript (public/client.js)

let ws;
let playerSymbol;
let currentTurn = false;
let gameActive = false;

const board = document.getElementById('board');
const status = document.getElementById('status');
const restartBtn = document.getElementById('restart');

function initWebSocket() {
    ws = new WebSocket(`ws://${window.location.host}`);

    ws.onmessage = (event) => {
        const data = JSON.parse(event.data);

        switch(data.type) {
            case 'wait':
                status.textContent = data.message;
                break;

            case 'start':
                gameActive = true;
                playerSymbol = data.symbol;
                currentTurn = playerSymbol === 'X';
                status.textContent = currentTurn ? '輪到你了' : '等待對手';
                break;

            case 'update':
                updateBoard(data.board);
                currentTurn = data.currentPlayer === (playerSymbol === 'X' ? 0 : 1);
                status.textContent = currentTurn ? '輪到你了' : '等待對手';
                break;

            case 'gameover':
                gameActive = false;
                updateBoard(data.board);
                if (data.winner === 'tie') {
                    status.textContent = '遊戲平手！';
                } else {
                    status.textContent = data.winner === playerSymbol ? 
                        '恭喜你贏了！' : '你輸了！';
                }
                restartBtn.style.display = 'inline-block';
                break;

            case 'playerleft':
                gameActive = false;
                status.textContent = data.message;
                restartBtn.style.display = 'inline-block';
                break;
        }
    };

    ws.onclose = () => {
        status.textContent = '連接中斷，請重新整理頁面';
        gameActive = false;
    };
}

function updateBoard(boardState) {
    const cells = document.getElementsByClassName('cell');
    for (let i = 0; i < cells.length; i++) {
        cells[i].textContent = boardState[i] || '';
    }
}

board.addEventListener('click', (e) => {
    if (!gameActive || !currentTurn) return;

    const cell = e.target;
    if (!cell.classList.contains('cell') || cell.textContent) return;

    const index = cell.dataset.index;
    ws.send(JSON.stringify({
        type: 'move',
        index: parseInt(index)
    }));
});

restartBtn.addEventListener('click', () => {
    window.location.reload();
});

initWebSocket();

運行專案

在專案根目錄執行：
```
node server.js
```
在瀏覽器開啟 http://localhost:3000
開啟兩個瀏覽器視窗來測試多人遊戲功能

功能說明

這個井字遊戲具有以下特點：

即時多人對戰
- 自動配對等待中的玩家
- 即時顯示對手的移動
- 斷線處理機制
完整的遊戲邏輯
- 輪流下棋機制
- 勝負判定
- 平局判定
使用者體驗
- 即時狀態更新
- 清晰的遊戲提示
- 重新開始功能

擴展建議

你可以考慮添加以下功能來增強遊戲：

玩家名稱系統
遊戲記分板
聊天功能
遊戲房間系統
觀戰模式

安全考慮

在實際部署時，建議添加以下安全措施：

實作 WebSocket 的心跳檢測
添加輸入驗證
實作速率限制
添加錯誤處理機制
考慮加密通訊

除錯提示

如果遇到問題，請檢查：

確認所有依賴都已正確安裝
檢查 WebSocket 連接狀態
查看瀏覽器控制台的錯誤信息
確認伺服器端口沒有被佔用

Curriculum

多人連線遊戲

使用 Node.js 和 WebSocket 建立多人井字遊戲

專案設置

專案結構

後端實作 (server.js)

前端實作

HTML (public/index.html)

CSS (public/style.css)

JavaScript (public/client.js)

運行專案

功能說明

擴展建議

安全考慮

除錯提示

Leave A Reply 取消回覆

Login with your site account

Modal title