V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Roy3
V2EX  ›  推广

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

  •  
  •   Roy3 · 2021-01-18 23:52:27 +08:00 · 1788 次点击
    这是一个创建于 1165 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在本文中,我们将看看为示例 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 。 公众号:黑客下午茶。 谢谢点赞支持👍👍👍!

    2 条回复    2021-01-19 10:56:00 +08:00
    x1911
        1
    x1911  
       2021-01-19 09:45:28 +08:00
    喜欢这篇文章,希望楼主继续,比较关注碰撞检测和子弹飞行的逻辑
    shunia
        2
    shunia  
       2021-01-19 10:56:00 +08:00
    @x1911 #1 直接去看原文啊,都写完了,不用等
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2868 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:46 · PVG 21:46 · LAX 06:46 · JFK 09:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.