《球球大作戰》原始碼解析：移動演算法

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

服務端處理了遊戲的各種遊戲邏輯，怎樣讓小球移動是重點之一。若想做服務端運算的遊戲，這一部分程式碼是很值得參考的。

SetInterval

nodejs中的setInterval是定時器，如下的程式碼表示每隔1秒執行一次myfunc方法。

  1. setInterval(myfunc,1000);

  3. function myfunc(){
  4. console.log("hehe");
  5. };
複製程式碼

3個定時器

原始碼中設定了3個定時器，分別是moveloop、gameloop和sendUpdates。其中moveloop每秒執行60次，它主要處理小球的移動計算。

  1. setInterval(moveloop, 1000 / 60);
  2. setInterval(gameloop, 1000);
  3. setInterval(sendUpdates, 1000 / c.networkUpdateFactor);
複製程式碼

moveloop

Moveloop方法的程式碼如下，它對每個玩家執行tickPlayer，處理每個小球的移動。

  1. function moveloop() {
  2.     for (var i = 0; i < users.length; i++) {
  3.         tickPlayer(users[i]);
  4.     }
  5.     for (i=0; i < massFood.length; i++) {
  6.         if(massFood[i].speed > 0) moveMass(massFood[i]);
  7.     }
  8. }
複製程式碼

moveMass

moveMass就是移動質量，小球可以噴射身體的一部分出去，噴出去的部分變成了食物。每個噴射出去的“質量”都會被儲存在massFood列表裡。moveMass會處理這些“質量”的運動軌跡，先是噴射出去、然後減速、停止。

《球球大作戰》原始碼解析：移動演算法

moveMass的程式碼比較簡單，先看看這一部分。Mass的運動分是個減速過程，噴射時Mass帶有較高的初速度，然後每一幀減速0.5，直到停止。程式碼後半部分還對Mass撞上邊緣的情況做處理。

  1. function moveMass(mass) {
  2.     var deg = Math.atan2(mass.target.y, mass.target.x);
  3.     var deltaY = mass.speed * Math.sin(deg);
  4.     var deltaX = mass.speed * Math.cos(deg);

  6.     mass.speed -= 0.5;
  7.     if(mass.speed < 0) {
  8.         mass.speed = 0;
  9.     }
  10.     if (!isNaN(deltaY)) {
  11.         mass.y += deltaY;
  12.     }
  13.     if (!isNaN(deltaX)) {
  14.         mass.x += deltaX;
  15.     }

  17.     var borderCalc = mass.radius + 5;

  19.     if (mass.x > c.gameWidth - borderCalc) {
  20.         mass.x = c.gameWidth - borderCalc;
  21.     }
  22.     if (mass.y > c.gameHeight - borderCalc) {
  23.         mass.y = c.gameHeight - borderCalc;
  24.     }
  25.     if (mass.x < borderCalc) {
  26.         mass.x = borderCalc;
  27.     }
  28.     if (mass.y < borderCalc) {
  29.         mass.y = borderCalc;
  30.     }
  31. }
複製程式碼

tickPlayer

tickPlayer是處理玩家移動的核心部分，它處理了小球的移動、分身、吞食，程式碼也比較長，整體程式碼結構如下所示，首先做心跳判斷，如果客戶端太久沒有傳送心跳協議，那麼向客戶端傳送kick協議，斷開連線。其後呼叫movePlayer，處理玩家移動。

《球球大作戰》原始碼解析：移動演算法

分身的過程

movePlayer計算了小球各個分身的移動過程，在遊戲中，玩家可以讓小球分身，具體過程如下。

1、玩家點選按鈕後，大球分身，分出來的小球沿著移動方向彈射

《球球大作戰》原始碼解析：移動演算法

2、彈射過後，分身們逐步靠近，最終連在一起

《球球大作戰》原始碼解析：移動演算法

3、經過一段時間，分身合併，又成為一個大球

《球球大作戰》原始碼解析：移動演算法

分身的過程分為彈射、靠近、緊靠、合併四個階段。

怎樣表示小球

既然小球有可能分身，那麼它便不能單一的由x,y座標和質量（半徑）表示。該專案採用這樣的表示方法（虛擬碼）。如果小球沒有分身，那麼cells陣列長度為1，表示只有1個“細胞”，如果分裂成多個，則cells陣列長度增加。player的x和y表示所有cell的中心座標，由程式計算得出，target是目的地的座標，即玩家滑鼠指向的位置。每個cell都有質量，而cell的半徑由質量換算而來，計算公式為radius=4+Math.sqrt(mass)*6。

  1. class player
  2. {
  3. var x;  //中心點座標x
  4. var y;  //中心點座標y
  5. var  target.x  //目的地座標
  6. var  target.y
  7. var[]  cells//分身陣列


  10. }

  12. class cells
  13. {
  14. var x;
  15. var y;
  16. var mass; //質量
  17. var radius //半徑，由mass換算而來
  18. }
複製程式碼

計算每個cell的目的地

由於每個cell都是獨立運動的，每一個cell都有自己的移動目的地，計算每個cell目的地的程式碼如下。

  1. function movePlayer(player) {
  2.     var x =0,y =0;
  3.     for(var i=0; i<player.cells.length; i++)
  4.     {
  5.         var target = {
  6.             x: player.x - player.cells[i].x + player.target.x,
  7.             y: player.y - player.cells[i].y + player.target.y
  8.         };
  9.         ……
  10.      }
  11.      ……
複製程式碼
……

具體來說，每個cell的目的地就是總目的地的座標加上它自己相對中心點的偏移，如下圖所示。

《球球大作戰》原始碼解析：移動演算法

計算移動速度

分身過程中，每個階段都有不同的速度，一開始彈射的時候速度很快，然後勻加速減少，減到一定程度後速度沿著對數函式曲線減小。

  1. var dist = Math.sqrt(Math.pow(target.y, 2) + Math.pow(target.x, 2));
  2.         var deg = Math.atan2(target.y, target.x);
  3.         var slowDown = 1;
  4.         if(player.cells[i].speed <= 6.25) {
  5.             slowDown = util.log(player.cells[i].mass, c.slowBase) - initMassLog + 1;
  6.         }
  7.         ……
  8.         if(player.cells[i].speed > 6.25) {
  9.             player.cells[i].speed -= 0.5;
  10.         }
  11.         ……
  12.         var deltaY = player.cells[i].speed * Math.sin(deg)/ slowDown;
  13.         var deltaX = player.cells[i].speed * Math.cos(deg)/ slowDown;
複製程式碼
……

如果接近目的地，cell距離目的地只有50+player.cells<i>.radius的距離。那麼調整速度，越接近移動速度越慢。

  1. var dist=Math.sqrt(Math.pow(target.y,2)+Math.pow(target.x,2));

  3. ……

  5. if(dist<(50+player.cells<i>.radius)){

  7. deltaY*=dist/(50+player.cells<i>.radius);

  9. deltaX*=dist/(50+player.cells<i>.radius);

  11. }
複製程式碼

在計算完y方向的移動速度deltaY和x方向的移動速度deltaX後，給cell的位置賦值，完成移動操作。

  1. if (!isNaN(deltaY)) {
  2.             player.cells[i].y += deltaY;
  3.         }
  4.         if (!isNaN(deltaX)) {
  5.             player.cells[i].x += deltaX;
  6.         }
複製程式碼

合併處理

若分身經過一定時間（其實是以距離來判斷），便需要合併，在下面的程式碼中，它會遍歷其他所有的cell，這裡分為兩種情況。（1）if(distance<radiusTotal)（2）distance<radiusTotal/1.75
  1. for(var j=0; j<player.cells.length; j++) {
  2.             if(j != i && player.cells[i] !== undefined) {
  3.                 var distance = Math.sqrt(Math.pow(player.cells[j].y-player.cells[i].y,2) + Math.pow(player.cells[j].x-player.cells[i].x,2));
  4.                 var radiusTotal = (player.cells[i].radius + player.cells[j].radius);
  5.                 if(distance < radiusTotal) {
  6.                     ……（1）
  7.                     }
  8.                     else if(distance < radiusTotal / 1.75) {
  9.                         ……（2）
  10.                     }
  11.                 }
  12.             }
  13.         }
複製程式碼

如果distance<radiusTotal，也就是兩個小球相互包含了，這裡又分為兩種情況（1）如果是還沒到合併時間，那麼讓他們遠離一點點。（2）如果到了合併時間，那就合併吧。

  1.   if(player.lastSplit > new Date().getTime() - 1000 * c.mergeTimer) {
  2.                         if(player.cells[i].x < player.cells[j].x) {
  3.                             player.cells[i].x--;
  4.                         } else if(player.cells[i].x > player.cells[j].x) {
  5.                             player.cells[i].x++;
  6.                         }
  7.                         if(player.cells[i].y < player.cells[j].y) {
  8.                             player.cells[i].y--;
  9.                         } else if((player.cells[i].y > player.cells[j].y)) {
  10.                             player.cells[i].y++;
  11.                         }
  12.                     }
複製程式碼

如果到了合併時間，且distance<radiusTotal/1.75（這個條件一定會滿足，因為前面有distance<radiusTotal的判斷），那麼就合併。合併部分的程式碼如下，其中cells表示刪除某個cell，合併了，那就兩個刪成一個。

  2. player.cells<i>.mass+=player.cells[j].mass;

  4. player.cells<i>.radius=util.massToRadius(player.cells<i>.mass);

  6. player.cells.splice(j,1);
複製程式碼

邊界處理

moveplayer後面的程式碼便是做邊界處理，保證cell在邊界之內，程式碼如下所示。

  1. if(player.cells.length > i) {
  2.             var borderCalc = player.cells[i].radius / 3;
  3.             if (player.cells[i].x > c.gameWidth - borderCalc) {
  4.                 player.cells[i].x = c.gameWidth - borderCalc;
  5.             }
  6.             if (player.cells[i].y > c.gameHeight - borderCalc) {
  7.                 player.cells[i].y = c.gameHeight - borderCalc;
  8.             }
  9.             if (player.cells[i].x < borderCalc) {
  10.                 player.cells[i].x = borderCalc;
  11.             }
  12.             if (player.cells[i].y < borderCalc) {
  13.                 player.cells[i].y = borderCalc;
  14.             }
  15.             x += player.cells[i].x;  
  16.             y += player.cells[i].y;
  17.    }
複製程式碼

重新計算中心點

player.x和player.y是所有cell的中心點，重新計算。

  1. player.x = x/player.cells.length;
  2. player.y = y/player.cells.length;
複製程式碼

經過上述步驟，實現了moveplayer的功能。由於判斷是否被其他cell包含的時候，採用了兩次for，效率上是否還有優化的空間呢？下一節再看看吞食食物、玩家相互吞食的處理方式。

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

《球球大作戰》原始碼解析：移動演算法


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

相關文章