如何構建一個多人(.io) Web 遊戲，第 2 部分
阿新 • • 發佈：2021-01-19
原文：[How to Build a Multiplayer (.io) Web Game, Part 2](https://victorzhou.com/blog/build-an-io-game-part-2/)
探索 `.io` 遊戲背後的後端伺服器。
上篇：[如何構建一個多人(.io) Web 遊戲，第 1 部分](https://mp.weixin.qq.com/s/D3wZqeM1ds2a4NydyMty_A)
在本文中，我們將看看為示例 `io` 遊戲提供支援的 `Node.js` 後端：
## 目錄
在這篇文章中，我們將討論以下主題：
1. 伺服器入口(Server Entrypoint)：設定 `Express` 和 `socket.io`。
2. 服務端 Game(The Server Game)：管理伺服器端遊戲狀態。
3. 服務端遊戲物件(Server Game Objects)：實現玩家和子彈。
4. 碰撞檢測(Collision Detection)：查詢擊中玩家的子彈。
## 1. 伺服器入口(Server Entrypoint)
我們將使用 Express（一種流行的 Node.js Web 框架）為我們的 Web 伺服器提供動力。我們的伺服器入口檔案 `src/server/server.js` 負責設定：
`server.js, Part 1`
```js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackConfig = require('../../webpack.dev.js');
// Setup an Express server
const app = express();
app.use(express.static('public'));
if (process.env.NODE_ENV === 'development') {
// Setup Webpack for development
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler));
} else {
// Static serve the dist/ folder in production
app.use(express.static('dist'));
}
// Listen on port
const port = process.env.PORT || 3000;
const server = app.listen(port);
console.log(`Server listening on port ${port}`);
```
還記得本系列第1部分中討論 Webpack 嗎？這是我們使用 Webpack 配置的地方。我們要麼
* 使用 `webpack-dev-middleware` 自動重建我們的開發包，或者
* 靜態服務 `dist/` 資料夾，Webpack 在生產構建後將在該資料夾中寫入我們的檔案。
`server.js` 的另一個主要工作是設定您的 `socket.io` 伺服器，該伺服器實際上只是附加到 Express 伺服器上：
`server.js, Part 2`
```js
const socketio = require('socket.io');
const Constants = require('../shared/constants');
// Setup Express
// ...
const server = app.listen(port);
console.log(`Server listening on port ${port}`);
// Setup socket.io
const io = socketio(server);
// Listen for socket.io connections
io.on('connection', socket => {
console.log('Player connected!', socket.id);
socket.on(Constants.MSG_TYPES.JOIN_GAME, joinGame);
socket.on(Constants.MSG_TYPES.INPUT, handleInput);
socket.on('disconnect', onDisconnect);
});
```
每當成功建立與伺服器的 `socket.io` 連線時，我們都會為新 `socket` 設定事件處理程式。
事件處理程式通過委派給單例 `game` 物件來處理從客戶端收到的訊息：
`server.js, Part 3`
```js
const Game = require('./game');
// ...
// Setup the Game
const game = new Game();
function joinGame(username) {
game.addPlayer(this, username);
}
function handleInput(dir) {
game.handleInput(this, dir);
}
function onDisconnect() {
game.removePlayer(this);
}
```
這是一個 `.io` 遊戲，因此我們只需要一個 `Game` 例項（“the Game”）- 所有玩家都在同一個競技場上玩！我們將在下一節中介紹該 `Game`類的工作方式。
## 2. 服務端 Game(The Server Game)
Game 類包含最重要的伺服器端邏輯。它有兩個主要工作：**管理玩家**和**模擬遊戲**。
讓我們從第一個開始：管理玩家。
`game.js, Part 1`
```sh
const Constants = require('../shared/constants');
const Player = require('./player');
class Game {
constructor() {
this.sockets = {};
this.players = {};
this.bullets = [];
this.lastUpdateTime = Date.now();
this.shouldSendUpdate = false;
setInterval(this.update.bind(this), 1000 / 60);
}
addPlayer(socket, username) {
this.sockets[socket.id] = socket;
// Generate a position to start this player at.
const x = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
const y = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
this.players[socket.id] = new Player(socket.id, username, x, y);
}
removePlayer(socket) {
delete this.sockets[socket.id];
delete this.players[socket.id];
}
handleInput(socket, dir) {
if (this.players[socket.id]) {
this.players[socket.id].setDirection(dir);
}
}
// ...
}
```
在本遊戲中，我們的慣例是通過 socket.io socket 的 `id` 欄位來識別玩家（如果感到困惑，請參考 `server.js`）。
Socket.io 會為我們為每個 socket 分配一個唯一的 `id`，因此我們不必擔心。我將其稱為 **`player ID`**。
考慮到這一點，讓我們來看一下 `Game` 類中的例項變數：
* `sockets` 是將 player ID 對映到與該玩家關聯的 socket 的物件。這樣一來，我們就可以通過玩家的 ID 持續訪問 sockets。
* `players` 是將 player ID 對映到與該玩家相關聯的 `Player` 物件的物件。這樣我們就可以通過玩家的 ID 快速訪問玩家物件。
* `bullets` 是沒有特定順序的 `Bullet`(子彈) 物件陣列。
* `lastUpdateTime` 是上一次遊戲更新發生的時間戳。我們將看到一些使用。
* `shouldSendUpdate` 是一個輔助變數。我們也會看到一些用法。
`addPlayer()`，`removePlayer()` 和 `handleInput()` 是在 `server.js` 中使用的非常不言自明的方法。如果需要提醒，請向上滾動檢視它！
`constructor()` 的最後一行啟動遊戲的更新迴圈（每秒 60 次更新）：
`game.js, Part 2`
```js
const Constants = require('../shared/constants');
const applyCollisions = require('./collisions');
class Game {
// ...
update() {
// Calculate time elapsed
const now = Date.now();
const dt = (now - this.lastUpdateTime) / 1000;
this.lastUpdateTime = now;
// Update each bullet
const bulletsToRemove = [];
this.bullets.forEach(bullet => {
if (bullet.update(dt)) {
// Destroy this bullet
bulletsToRemove.push(bullet);
}
});
this.bullets = this.bullets.filter(
bullet => !bulletsToRemove.includes(bullet),
);
// Update each player
Object.keys(this.sockets).forEach(playerID => {
const player = this.players[playerID];
const newBullet = player.update(dt);
if (newBullet) {
this.bullets.push(newBullet);
}
});
// Apply collisions, give players score for hitting bullets
const destroyedBullets = applyCollisions(
Object.values(this.players),
this.bullets,
);
destroyedBullets.forEach(b => {
if (this.players[b.parentID]) {
this.players[b.parentID].onDealtDamage();
}
});
this.bullets = this.bullets.filter(
bullet => !destroyedBullets.includes(bullet),
);
// Check if any players are dead
Object.keys(this.sockets).forEach(playerID => {
const socket = this.sockets[playerID];
const player = this.players[playerID];
if (player.hp <= 0) {
socket.emit(Constants.MSG_TYPES.GAME_OVER);
this.removePlayer(socket);
}
});
// Send a game update to each player every other time
if (this.shouldSendUpdate) {
const leaderboard = this.getLeaderboard();
Object.keys(this.sockets).forEach(playerID =>