如何构建一个多人(.io) Web 游戏，第 2 部分

[Roy3]

在本文中，我们将看看为示例 io 游戏提供支持的 Node.js 后端：

目录 在这篇文章中，我们将讨论以下主题：

服务器入口(Server Entrypoint)：设置 Express 和 socket.io 。

服务端 Game(The Server Game)：管理服务器端游戏状态。

服务端游戏对象(Server Game Objects)：实现玩家和子弹。

碰撞检测(Collision Detection)：查找击中玩家的子弹。

1. 服务器入口(Server Entrypoint)

我们将使用 Express （一种流行的 Node.js Web 框架）为我们的 Web 服务器提供动力。我们的服务器入口文件 src/server/server.js 负责设置：

server.js, Part 1

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

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 对象来处理从客户端收到的消息：

更多：如何构建一个多人(.io) Web 游戏，第 2 部分

我是为少。 微信：uuhells123 。 公众号：黑客下午茶。 谢谢点赞支持👍👍👍！

[x1911]

喜欢这篇文章，希望楼主继续，比较关注碰撞检测和子弹飞行的逻辑

[shunia]

@x1911 #1 直接去看原文啊，都写完了，不用等