浅谈多人游戏原理和简单实现。

￡神魔★判官ぃ 2024-04-23 15:58 3阅读 0赞

>  *  😜**作** **者**：[是江迪呀][Link 1]
>  *  ✒️**本文关键词**：`websocket`、`网络`、`原理`、`多人游戏`
>  *  ☀️**每日 一言**：`这世上有两种东西无法直视，一是太阳，二是人心！`

#### 文章目录 ####

*  一、我的游戏史
 *  二、解惑
 *  三、简单实现
 *   *  3.1 客户端实现步骤
     *   *  客户端——1代码：
         *   *  （1）创建画布
             *  （2）设置1s60帧更新页面
             *  （3）连接游戏服务器并处理指令
             *  （4）创建玩家对象
             *  （5）客户端创建角色方法
             *  （6）客户端销毁角色方法
         *  客户端——2代码：
     *  3.2 服务器端
     *   *  （1）引入依赖：
         *  （2）创建服务器
         *  （3）创建玩家对象
         *  （4）动作指令
         *  （5）创建对象方法
         *  （6）销毁对象方法
 *  四、演示
 *   *  4.1 客户端1登陆服务器
     *  4.2 客户端2登陆服务器
     *  4.3 客户端2移动
     *  4.4 客户端1移动
     *  4.5 客户端1退出
 *  五、总结

![在这里插入图片描述][3e72f2ef6a4d4d39b62a902f267b144e.png_pic_center]

## 一、我的游戏史 ##

我最开始接触游戏要从一盘300游戏的光碟说起，那是家里买DVD送的，《魂斗罗》、《超级马里奥》天天玩。自从买回来后，我就经常和姐姐因为抢电视机使用权而大打出手。有次她把遥控器藏到了沙发的夹层里，被我妈一屁股做成了两半，我和我姐喜提一顿暴打。那顿是我挨得最狠的，以至于现在回想起来，屁股还条件反射的隐隐作痛。

后来我骗我妈说我要学习英语、练习打字以后成为祖国的栋梁之才！让她给我买台**小霸王学习机**（游戏机），在我一哭二闹三上吊胡搅蛮缠的攻势下，我妈妥协了。就此我接触到了`FC`游戏。现在还能记得我和朋友玩激龟快打，满屋子的小朋友在看的场景。经常有家长在我家门口喊他家小孩吃饭。那时候我们县城里面有商店卖游戏卡，小卡一张5块钱，一张传奇卡25-40块不等（所谓传奇卡就是角色扮演，带有存档的游戏），每天放学都要去商店去看看，有没有新的游戏卡，买不起，就看下封面过过瘾。我记得我省吃俭用一个多月，买了两张卡：《哪吒传奇》和《重装机兵》那是真的上瘾，没日没夜的玩。

再然后我接触到了手机游戏，记得那时候有个软件叫做冒泡游戏（我心目的中的`Stream`），里面好多游戏，太吸引我了。一个游戏一般都是几百KB，最大也就是几MB，不过那时候流量很贵，1块钱1MB，并且！一个月只有30Mb。我姑父是收手机的，我在他那里搞到了一部半智能手机，牌子我现在还记得：诺基亚N70，那时候我打开游戏就会显示一杯冒着热气的咖啡，我很喜欢这个图标，因为看见它意味着我的游戏快加载完成了，没想到，十几年后我们会再次相遇，哈哈哈哈。我当时玩了一款网游叫做：《幻想三国》，第一回接触网游简直惊呆了，里面好多人都是其他玩的家，这太有趣了。并且我能在我的手机上看到其他玩家，能够看到他们的行为动作，这太神奇了！！！我也一直思考这到底是怎么实现的！

最后是电脑游戏，单机：《侠盗飞车》、《植物大战僵尸》、《虐杀原型》；网游：《DNF》、《CF》、《LOL》、《梦幻西游》我都玩过。

`不过那个疑问一直没有解决，也一值留在我心中 —— 在网络游戏中，是如何实时更新其他玩家行为的呢？`

## 二、解惑 ##

在我进入大学后，我选择了软件开发专业，真巧！再次遇到了那个**冒着热气的咖啡图标**，这时我才知道它叫做——`Java`。我很认真的去学，希望有一天能够做一款游戏！

参加工作后，我并没有如愿以偿，我成为了一名`Java开发程序员`，但是我在日常的开发的都是`web`应用，接触到大多是`HTTP`请求，它是种**请求-响应**协议模式。这个问题也还是想不明白，难道每当其他玩家做一个动作都需要发送一次HTTP请求？然后响应给其他玩家。这样未免效率也太低了吧，如果一个服务器中有几千几万人，那么服务器得承受多大压力呀！一定不是这样的！！！

直到我遇到了`Websocket`，这是一种长连接，而`HTTP`是一种短连接，顿时这个问题我就想明白了。在此二者的区别我就不过多赘述了，请看我的另一篇文章：[WebSocket详解以及应用][WebSocket]

知道了这个知识后，我终于能够大致明白了网络游戏的基本原理。原来网络游戏是由**客户端**和**服务器端**组成的，客户端就是我们下载到电脑或者手机上的应用，而服务器端就是把其他玩家连接起来的中转站，还有一点需要说明的是，网络游戏是分房间的，这个房间就相当于一台服务器。首先，在玩家登陆客户端并选择房间建立长连接后，A玩家做出移动的动作，随即会把这个动作指令上传给服务器，然后服务器再将指令广播到房间中的其他玩家的客户端来操作A的角色，这样就可以实现实时更新其他玩家行为。

![在这里插入图片描述][64709c2281e2475d871c1fd24dd2d706.png_pic_center]

## 三、简单实现 ##

**客户端**和**服务端**在处理**指令**时，方法必须是**配套**的。比如说，有新的玩家连接到服务器，那么服务器就应当向其它客户端广播创建一个新角色的指令，客户端在接收到该指令后，执行客户端创建角色的方法。  
为了方便演示，这里需要定义两个`HTML`来表示两个不同的客户端**不同的玩家**，这两套客户端代码除了玩家的信息不一样，其它完全一致！！！

### 3.1 客户端实现步骤 ###

我在这里客户端使用`HTML`\+`JQ`实现

#### 客户端——1代码： ####

##### （1）创建画布 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Canvas Game</title>
        <style>
            canvas {
          
                border: 1px solid black;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
    <canvas id="gameCanvas" width="800" height="800"></canvas>
    </body>
    </html>

##### （2）设置1s60帧更新页面 #####

##### （3）连接游戏服务器并处理指令 #####

这里使用websocket链接游戏服务器

//连接服务器
    const websocket = new WebSocket("ws://192.168.31.136:7070/websocket?userId=" + userId + "&userName=" + userName);
     //向服务器发送消息
     function sendMessage(userId,keyCode){
        
          const messageData = {
        
              playerId: userId,
              keyCode: keyCode
          };
          websocket.send(JSON.stringify(messageData));
      }
      //接收服务器消息，并根据不同的指令，做出不同的动作
      websocket.onmessage = event => {
        
            const data = JSON.parse(event.data);
            // 处理服务器发送过来的消息
            console.log('Received message:', data);
            //创建游戏对象
            if(data.type == 1){
        
                console.log("玩家信息:" +  data.players.length)
                for (let i = 0; i < data.players.length; i++) {
        
                    console.log("玩家id："+playerOfIds);
                    createPlayer(data.players[i].playerId,data.players[i].pointX, data.players[i].pointY, data.players[i].color);
                }
            }
            //销毁游戏对象
            if(data.type == 2){
        
                console.log("玩家信息:" +  data.players.length)
                for (let i = 0; i < data.players.length; i++) {
        
                    destroyPlayer(data.players[i].playerId)
                }
            }
            //移动游戏对象
            if(data.type == 3){
        
                console.log("移动;玩家信息:" +  data.players.length)
                for (let i = 0; i < data.players.length; i++) {
        
                    players.filter(player => player.id === data.players[i].playerId)[0].move(data.players[i].keyCode)
                }
            }
        };

##### （4）创建玩家对象 #####

//存放游戏对象
    let players = [];
    //playerId在此写死，正常情况下应该是用户登录获取的
    const userId = "1"; // 用户的 id
    const userName = "逆风笑"; // 用户的名称
    //玩家对象
    class Player {
        
            constructor(id,x, y, color) {
        
                this.id = id;
                this.x = x;
                this.y = y;
                this.size = 30;
                this.color = color;
            }
    		//绘制游戏角色方法
            draw() {
        
                ctx.fillStyle = this.color;
                ctx.fillRect(this.x, this.y, this.size, this.size);
            }
    		//游戏角色移动方法	
            move(keyCode) {
        
                switch (keyCode) {
        
                    case 37: // Left
                        this.x = Math.max(0, this.x - 10);
                        break;
                    case 38: // Up
                        this.y = Math.max(0, this.y - 10);
                        break;
                    case 39: // Right
                        this.x = Math.min(canvas.width - this.size, this.x + 10);
                        break;
                    case 40: // Down
                        this.y = Math.min(canvas.height - this.size, this.y + 10);
                        break;
                }
                this.draw();
            }
        }

##### （5）客户端创建角色方法 #####

//创建游戏对象方法
    function createPlayer(id,x, y, color) {
        
       const player = new Player(id,x, y, color);
        players.push(player);
        playerOfIds.push(id);
        return player;
    }

##### （6）客户端销毁角色方法 #####

在玩家推出客户端后，其它玩家的客户端应当销毁对应的角色。

//角色销毁
    function destroyPlayer(playId){
        
       players = players.filter(player => player.id !== playId);
    }

#### 客户端——2代码： ####

客户端2的代码只有玩家信息不一致：

const userId = "2"; // 用户的 id
      const userName = "逆风哭"; // 用户的名称

### 3.2 服务器端 ###

服务器端使用`Java`\+`websocket`来实现！

#### （1）引入依赖： ####

<dependency>
       <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
         <version>2.1.2.RELEASE</version>
     </dependency>
     <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-websocket</artifactId>
         <version>2.3.7.RELEASE</version>
     </dependency>
     <dependency>
         <groupId>org.apache.commons</groupId>
         <artifactId>commons-lang3</artifactId>
         <version>3.11</version>
     </dependency>
     <dependency>
         <groupId>com.alibaba</groupId>
         <artifactId>fastjson</artifactId>
         <version>1.2.75</version>
     </dependency>
     <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
         <version>1.16.16</version>
     </dependency>
     <dependency>
         <groupId>cn.hutool</groupId>
         <artifactId>hutool-all</artifactId>
         <version>5.6.3</version>
     </dependency>

#### （2）创建服务器 ####

@Component
    @ServerEndpoint("/websocket")
    @Slf4j
    public class Server {
        
        /**
         * 服务器玩家池
         * 解释：这里使用 ConcurrentHashMap为了保证线程安全，不会出现同一个玩家存在多条记录问题
         * 使用 static fina修饰 是为了保证 playerPool 全局唯一
         */
        private static final ConcurrentHashMap<String, Server> playerPool = new ConcurrentHashMap<>();
        /**
         * 存储玩家信息
         */
        private static final ConcurrentHashMap<String, Player> playerInfo = new ConcurrentHashMap<>();
        /**
         * 已经被创建了的玩家id
         */
        private static ConcurrentHashMap<String, Server> createdPlayer = new ConcurrentHashMap<>();
    
        private Session session;
    
        private Player player;
    
        /**
         * 连接成功后调用的方法
         */
        @OnOpen
        public void webSocketOpen(Session session) throws IOException {
        
            Map<String, List<String>> requestParameterMap = session.getRequestParameterMap();
            String userId = requestParameterMap.get("userId").get(0);
            String userName = requestParameterMap.get("userName").get(0);
            this.session = session;
            if (!playerPool.containsKey(userId)) {
        
                int locationX = getLocation(151);
                int locationY = getLocation(151);
                String color = PlayerColorEnum.getValueByCode(getLocation(1) + 1);
                Player newPlayer = new Player(userId, userName, locationX, locationY,color,null);
                playerPool.put(userId, this);
                this.player = newPlayer;
                //存放玩家信息
                playerInfo.put(userId,newPlayer);
            }
            log.info("玩家:{}|{}连接了服务器", userId, userName);
            // 创建游戏对象
            this.createPlayer(userId);
        }
    
        /**
         * 接收到消息调用的方法
         */
        @OnMessage
        public void onMessage(String message, Session session) throws IOException, InterruptedException {
        
            log.info("用户:{},消息{}:",this.player.getPlayerId(),message);
            PlayerDTO playerDTO = new PlayerDTO();
            Player player = JSONObject.parseObject(message, Player.class);
            List<Player> players = new ArrayList<>();
            players.add(player);
            playerDTO.setPlayers(players);
            playerDTO.setType(OperationType.MOVE_OBJECT.getCode());
            String returnMessage = JSONObject.toJSONString(playerDTO);
            //广播所有玩家
            for (String key : playerPool.keySet()) {
        
                synchronized (session){
        
                    String playerId = playerPool.get(key).player.getPlayerId();
                    if(!playerId.equals(this.player.getPlayerId())){
        
                        playerPool.get(key).session.getBasicRemote().sendText(returnMessage);
                    }
                }
            }
        }
    
        /**
         * 关闭连接调用方法
         */
        @OnClose
        public void onClose() throws IOException {
        
            String playerId = this.player.getPlayerId();
            log.info("玩家{}退出!", playerId);
            Player playerBaseInfo = playerInfo.get(playerId);
            //移除玩家
            for (String key : playerPool.keySet()) {
        
                playerPool.remove(playerId);
                playerInfo.remove(playerId);
                createdPlayer.remove(playerId);
            }
            //通知客户端销毁对象
            destroyPlayer(playerBaseInfo);
        }
    
        /**
         * 出现错误时调用的方法
         */
        @OnError
        public void onError(Throwable error) {
        
            log.info("服务器错误,玩家id：{},原因：{}",this.player.getPlayerId(),error.getMessage());
        }
        /**
         * 获取随即位置
         * @param seed
         * @return
         */
        private int getLocation(Integer seed){
        
            Random random = new Random();
            return random.nextInt(seed);
        }
    }

websocket配置：

@Configuration
    public class ServerConfig {
        
        @Bean
        public ServerEndpointExporter serverEndpointExporter(){
        
            return new ServerEndpointExporter();
        }
    }

#### （3）创建玩家对象 ####

玩家对象：

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Player {
        
        /**
         * 玩家id
         */
        private String playerId;
        /**
         * 玩家名称
         */
        private String playerName;
        /**
         * 玩家生成的x坐标
         */
        private Integer pointX;
        /**
         * 玩家生成的y坐标
         */
        private Integer pointY;
        /**
         * 玩家生成颜色
         */
        private String color;
        /**
         * 玩家动作指令
         */
        private Integer keyCode;
    }

创建玩家对象返回给客户端DTO：

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class PlayerDTO {
        
        private Integer type;
        private List<Player> players;
    }

玩家移动指令返回给客户端DTO：

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class PlayerMoveDTO {
        
        private Integer type;
        private List<Player> players;
    }

#### （4）动作指令 ####

public enum OperationType {
        
        CREATE_OBJECT(1,"创建游戏对象"),
        DESTROY_OBJECT(2,"销毁游戏对象"),
        MOVE_OBJECT(3,"移动游戏对象"),
        ;
        private Integer code;
        private String value;
    
        OperationType(Integer code, String value) {
        
            this.code = code;
            this.value = value;
        }
    
        public Integer getCode() {
        
            return code;
        }
    
        public String getValue() {
        
            return value;
        }
    }

#### （5）创建对象方法 ####

/**
         * 创建对象方法
         * @param playerId
         * @throws IOException
         */
        private void createPlayer(String playerId) throws IOException {
        
            if (!createdPlayer.containsKey(playerId)) {
        
                List<Player> players = new ArrayList<>();
                for (String key : playerInfo.keySet()) {
        
                    Player playerBaseInfo = playerInfo.get(key);
                    players.add(playerBaseInfo);
                }
                PlayerDTO playerDTO = new PlayerDTO();
                playerDTO.setType(OperationType.CREATE_OBJECT.getCode());
                playerDTO.setPlayers(players);
                String syncInfo = JSONObject.toJSONString(playerDTO);
                for (String key :
                        playerPool.keySet()) {
        
                    playerPool.get(key).session.getBasicRemote().sendText(syncInfo);
                }
                // 存放
                createdPlayer.put(playerId, this);
            }
        }

#### （6）销毁对象方法 ####

/**
         * 销毁对象方法
         * @param playerBaseInfo
         * @throws IOException
         */
        private void destroyPlayer(Player playerBaseInfo) throws IOException {
        
            PlayerDTO playerDTO = new PlayerDTO();
            playerDTO.setType(OperationType.DESTROY_OBJECT.getCode());
            List<Player> players = new ArrayList<>();
            players.add(playerBaseInfo);
            playerDTO.setPlayers(players);
            String syncInfo = JSONObject.toJSONString(playerDTO);
            for (String key :
                    playerPool.keySet()) {
        
                playerPool.get(key).session.getBasicRemote().sendText(syncInfo);
            }
        }

## 四、演示 ##

### 4.1 客户端1登陆服务器 ###

![在这里插入图片描述][e889fe0f460d4c58b7276d67b2cab782.gif_pic_center]

### 4.2 客户端2登陆服务器 ###

![在这里插入图片描述][155cabe2a23e41ebbfc08b40ee57db98.gif_pic_center]

### 4.3 客户端2移动 ###

![在这里插入图片描述][aa40eb6e94194a89971443eb23341bd2.gif_pic_center]

### 4.4 客户端1移动 ###

![在这里插入图片描述][99b8b21a47314eab98178ee1f6f3b3a5.gif_pic_center]

### 4.5 客户端1退出 ###

![在这里插入图片描述][f132598fb0e14dddb9adbc58232e0d17.gif_pic_center]  
完结撒花

[完整代码传送门][Link 2]

## 五、总结 ##

以上就是我对**网络游戏如何实现玩家实时同步**的理解与实现，我实现后心里也释然了，哈哈哈，真的好有趣！！！  
我希望大家也是，不要失去好奇心，遇到自己感兴趣的事情，一定要多思考呀~

后来随着我经验的不断积累，我又去了解了一下`Java`作为游戏服务器的相关内容，发现`Netty`更适合做这个并且更容易入门，比如《我的世界》一些现有的服务器就是使用`Netty`实现的。有空也实现下，玩玩~

[Link 1]: https://blog.csdn.net/qq_42785250?spm=1011.2124.3001.5343
[3e72f2ef6a4d4d39b62a902f267b144e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/cd7ff94dca4e44a2acbcb6f9e834b9ef.png
[WebSocket]: https://blog.csdn.net/qq_42785250/article/details/132500124?spm=1001.2014.3001.5501
[64709c2281e2475d871c1fd24dd2d706.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/79b6e9607e774fbc86aae26f48aea75d.png
[e889fe0f460d4c58b7276d67b2cab782.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/e8d207b7ba07453b8517b0a1c4fa4fe5.gif
[155cabe2a23e41ebbfc08b40ee57db98.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/360281baf6e941c6a71b2fa27bf8c720.gif
[aa40eb6e94194a89971443eb23341bd2.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/e7819f6ab0ba4c27ad63573b97b9581d.gif
[99b8b21a47314eab98178ee1f6f3b3a5.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/c75a8c78f4c14aa6b37c91a8835c378e.gif
[f132598fb0e14dddb9adbc58232e0d17.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/1b6ff039b7284536a53a7b0398e1be76.gif
[Link 2]: https://gitee.com/hu_jiangdi/game_server