《球球大作战》源码解析：服务器与客户端架构

一、运行起来

下图为游戏运行画面，游戏规则如下。

1、玩家可以移动鼠标控制小球

2、当小球吞食场景中的食物或其他玩家控制的小球时，玩家控制的小球会变大

3、小球越大，移动速度越慢

4、小球的质量代表它的大小，质量为它吞食的食物或其他玩家的质量之和

5、游戏目标是尽可能的吞食其他玩家，使小球变大

6、玩家刚出生时会有无敌属性，直到它吞食食物

7、每当有玩家进入游戏，场景中会生成3个食物

8、每当吞食食物时，场景中亦会生成一个新的食物

第一步便是要让游戏运行起来，只有运行起来了，才谈得上后续的源码分析。为了“从零开始”，笔者购买Ubuntu系统的腾讯云，新的系统几乎没有安装额外软件，一步一步安装所需的软件，然后将游戏运行起来吧。笔者选用了最低一档配置的服务器，花费近50大洋（此处是不是应该发个求赞助的链接？）配置如下图所示。

1、安装nodeJs

游戏使用nodejs开发，那就必须要安装nodejs，可以有两种方法安装。

方法1：输入sudo apt install nodejs，这是最简单的安装方法了。不过使用该方式安装的程序名叫为nodejs，而不是普遍使用的node。可以使用sudo ln-s/usr/bin/nodejs/usr/bin/node建立名为node的连接，以解决这个问题。

方法2：下载源码、编译、安装。具体可以参考这篇文章在Ubuntu下安装Node.JS的不同方式-技术◆学习|Linux.中国-开源社区（文章里使用的node-v6.9.5要改为最新版的）

完成后，可以使用node-v查看nodejs版本号，以验证是否成功安装。

2、上传代码文件

从github上下载源码，然后上传到linux服务器上。如下图所示，笔者将源码上传到/home/ubuntu/agar.io-clone-master目录下

3、安装npm

npm(node package manager)是nodejs的包管理和分发工具，一般安装nodejs后都需要安装该软件，可以使用以下命令安装：sudo apt install npm

4、安装gulp

项目使用到了gulp，需要安装它。gulp是一个前端构建工具，开发者可以使用它在项目开发过程中自动执行常见任务，比如复制文件，比如替换文件中某些字符。进入源码目录，执行sudo npm install-g gulp即可安装。

5、安装项目所需的包文件

进入源码目录，执行npm install即可安装项目所需包文件。npm install会检查当前目录下的package.json文件，文件包含了项目所需的模块，npm根据该文件的描述下载这些文件并把模块放到./node_modules目录下。关于package.json的格式可以参考这篇文章package.json for NPM文件详解

6、运行服务器

在源码目录下执行gulp run，可以看到服务器启动的提示信息。

7、运行客户端

运行浏览器，输入地址即可，笔者的腾讯云ip为139.199.179.39，由于默认配置了3000端口，所以要输入http://139.199.179.39:3000/，即可看到如下的游戏界面。

在笔者的试验中，该页面报错，点击按钮没有反应。原因是src/client中的index.html最后面有这么一句，<script src=”//code.jquery.com/jquery-2.2.0.min.js”></script>，该语句用于加载jquery的，而http://code.jquery.com/jquery-2.2.0.min.js无法访问（或国内网络访问速度慢），导致报错。只要换个文件地址即可，例如改成下面这样：

运行游戏，服务端也会打印出相应的信息，如下图所示。

把游戏运行起来后，下一步就要分析下游戏的流程了。

二、程序流程

在解析源码之前，需要先了解该项目的程序流程，了解客户端和服务端是如何运行和通信的。本文是wiki文档Game Architecture的翻译，以帮助读者从大方向上了解《球球大作战》。

程序架构

游戏程序使用NodeJs编写，服务端通过http://Socket.IO创建WebSocket服务并默认监听3000号端口。程序还使用ExpressJS建立一个简单的HTTP服务器，它负责html页面的显示。index.html是游戏主页面，它通过Canvas渲染游戏，通过Javascript脚本和服务端通信。

目录结构该项目由3部分组成：

1、配置文件，如package.json,config.json等等

2、客户端程序

3、服务端程序

配置文件package.json列出了项目所需的库文件，读者只需在项目目录下执行“npm install”即可自动安装这些文件。package.json的格式可以参考下面的文章：

npm package.json属性详解

游戏客户端

client文件夹里包含了客户端所需的代码，它是一个简单的HTML文件，该文件会通过canvas绘制游戏场景、聊天框等元素。

js/app.js是客户端的逻辑代码，它实现了画面渲染、网络延迟检测、观战模式、聊天等功能，处理了鼠标输入、服务端通信等事项。游戏采用服务端运算模式，客户端只是负责将服务端发来的数据显示到屏幕上，以及接收鼠标事件。

客户端程序使用了requestAnimationFrame程序渲染循环，而不是使用setInterval，这让游戏有着更好的渲染性能。你可以试着修改代码，调用setInterval方法，看看低效率的渲染是个啥样子。
(function animloop(){
requestAnimFrame(animloop);
gameLoop();
})();

setInterval(gameLoop, 16);

游戏服务端

server/server.js包含了服务端的配置和逻辑处理，配置了诸如食物质量、移动速度、无敌状态的最大质量，处理了食物颜色计算、碰撞检测、玩家移动处理等等事项。

所有的游戏逻辑都在服务端处理，服务端和客户端的通信有着下面几个要点。

1、服务端使用list保存玩家列表，而不是使用array，使用list保存食物列表，而不是使用array。服务端保存着socket列表，用于记录所有客户端连接。

2、之前的版本设置了一个定时器，每隔几秒钟就产生一些食物，但这种方法的效率不高，会延迟服务端处理速度。所有在此版本中使用了一种新的方式来产生食物，当一个玩家进入游戏时，程序会随机产生3个食物（可以修改配置文件的newFoodPerPlayervariable改变该数值），当玩家吃掉一个食物时，程序会产生另外一个食物（可以修改配置文件的respawnFoodPerPlayer改变该数值）。如果场景中的食物数量大于50（配置文件的maxFoodCount），服务端会停止产生新食物。

客户端服务端通信

客户端与服务端通信可以分为两个部分，分别是登录认证和游戏内通信。

登陆认证

当一个玩家打开游戏网页，他先会看到一个输入用户名的对话框，点击“Play”按钮后，客户端发起socket连接，服务端accept连接后发出welcome协议，并把该客户端的UserID附带在协议中。

当客户端收到welcome协议，它会返回附带用户名的gotit协议。

当服务端收到gotit协议，它会其它的已连接玩家广播playerJoin协议，告诉他们有新的玩家加入。其它玩家收到该协议后，会在屏幕上绘制这个新加入的角色。

此时，对于新加入的玩家来说，游戏刚刚开始。

游戏内通信

游戏内通信分为3个部分，分别是游戏逻辑、聊天和Ping（测试网络延迟）。

游戏逻辑

玩家在游戏中会有移动、吞食食物、吞食其他玩家三种行为，这些逻辑全部由服务端运算，客户端只是根据运算结果将图像显示在对应的位置上。

移动

当玩家移动鼠标，小球会朝着鼠标的位置移动。客户端会发送附带了目的地坐标的playerSendTarget协议。服务端收到协议后会更新小球的运动状态，然后向该客户端回复serverTellPlayerMove协议，然后发送serverUpdateAllPlayers给其他客户端，让全部客户端更新所有玩家的坐标。

小球移动期间，服务端还会检测小球是否吞食了食物，或者吞食了其他玩家。

吞食食物