《球球大作戰》原始碼解析——(1)執行起來

鑑於http://agar.io型別遊戲的火爆場面，一些公司紛紛效仿，一時間出現各種《XX大作戰》型別的遊戲。出於學習的目的，亦是做些技術和方案儲備，接下來會有大概10篇文章，分析下面這款使用nodejs編寫的開源“球球大作戰”。由於該遊戲採用服務端運算、客戶端顯示的方式，服務端的邏輯處理是該原始碼的重點，故而系列文章主要針對服務端。通過這套原始碼，可以學習到“一種基於nodejs的簡單伺服器實現方法”“一種簡單的服務端物理邏輯的實現方式”“一種基於redis pub/sub的跨服設計思想”“nodejs語法、框架及其使用方式”等內容。

系列文章將會分析huytd/agar.io-clone的原始碼，這是一套簡約而不簡單的Agar.IO實現。該專案使用NodeJS開發，使用socket.IO作為網路通訊，使用HTML5實現客戶端。

下圖為遊戲執行畫面，遊戲規則如下。

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無法訪問（或國內網路訪問速度慢），導致報錯。只要換個檔案地址即可，例如改成下面這樣：

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script >

執行遊戲，服務端也會列印出相應的資訊，如下圖所示。


把遊戲執行起來後，下一步就要分析下游戲的流程了。

還是放個廣告吧，筆者出版的一本書《Unity3D網路遊戲實戰》充分的講解怎樣開發一款網路遊戲，特別對網路框架設計、網路協議、資料處理等方面都有詳細的描述，相信會是一本好書的。


系列文章
《球球大作戰》原始碼解析——(1)執行起來
《球球大作戰》原始碼解析：伺服器與客戶端架構
《球球大作戰》原始碼解析：移動演算法
《球球大作戰》原始碼解析（6）：碰撞處理
《球球大作戰》原始碼解析（7）：遊戲迴圈
《球球大作戰》原始碼解析（8）：訊息廣播

專欄地址：https://zhuanlan.zhihu.com/p/26193373