基于Seajs的可控台球碰撞游戏

前言

不记得哪个黑色星期五，贪吃鱼基本完工的时候，产品突然增加需求，要求金币扔出去后不消失，互相可碰撞，其最终结果还要由服务器控制(没错，至今做的所有游戏都有幕后黑手，=W=).

对于碰撞以前只写过一个球到处碰墙壁的，小球之间的碰撞倒是没有接触，想到他们碰撞过程中的角度变化、速度分配，就不敢往下想了，于是马上想到box2d这个牛逼哄哄的引擎.

但是，使用物理引擎虽然高效、逼真，但所有碰撞都是不可控，包括最终的落点。所以引擎不能解决这次遇到的需求。

不能用引擎，咱自己写也不怕，反正当年物理和高数都学得还不错，嘻嘻、

最后，趁游戏上线后的空闲时间，整理下碰撞的思路，记录成本文。

如果你喜欢先睹为快，可以先去玩玩这个游戏: view demo >>

游戏实现

本文的核心代码是通过游戏中的逻辑移动过来，为了方便，所以代码组织也和cocos2d的思想类似。

cocos2d中有Scene、director、layer层级之分，在demo中也有对应的init、game、ball，既然用到模块层级，当然首选seajs。

游戏架构

    
    ├ css 
        ├ main.css
    ├ js
        ├ jquery   
        ├ jquery.js
        ├ seajs
        ├ seajs.js
        ├ ball
        ├ game
        ├ util
        └ init
    └ CrashBall.html 

util模块封装的是一些必要的工具函数

ball模块封装小球move和drawPredict的类

game模块控制游戏进度，管理小球的运动

init模块是游戏入口，调用game.js的初始化和开始接口

游戏难度集中在ball和game模块，所以只分析碰撞过程得碰撞检测和处理。

复杂的碰撞

首先建系很重要。由于我们模拟使用left和top来改变坐标，所以我们以table左上角为坐标原点，垂直向下为x轴正方向，水平向左为y轴正方向。

边缘碰撞处理

边缘碰撞处理较为常规，只需要检测小球坐标和边缘的相对关系即可：

    // 左右墙壁
       if (ball.x < util.R || ball.x > util.W - util.R) { 
            ball.angle *= -1; 
            ball.angle %= Math.PI; 
            ....
            if (ball.x < util.R) {
               ball.x = util.R; 
            }
            if (ball.x > util.W - util.R) {
               ball.x = util.W - util.R; 
            }
        }

        // 上下墙壁
        if (ball.y < util.R || ball.y > util.H - util.R) { 
            ball.angle = ball.angle > 0 ? Math.PI - ball.angle: -Math.PI - ball.angle;                
            ball.angle %= Math.PI;
            ....

        }  

上述代码作用是，检测小球坐标和墙壁大小关系，修改小球运动的角度。

计算角度的源码：

   angle = Math.atan2(toPos[0] - fromPos[0], toPos[1] - fromPos[1]);

计算的是点(left, top)和x正方向的角度，即下图的∠DAC.

左右碰撞处理方案是乘以-1，∠DAC是入角，∠DAB和∠DAC正好差个-1.

上下碰撞是分正负处理。如上图中∠EAC和∠EAB互补，如果反向运动，∠EAB和∠CAB的变化应该是反向再选择180°。

最后注意的是，如果小球坐标超过边界坐标，则要它坐标设为边界坐标，不然就会出现靠着边界来回撞的bug，前人留下来的bug找了好久，= = .

小球碰撞处理

a. 碰撞检测是判断他们的距离和2倍半径的关系：

    var dis = Math.sqrt(Math.pow(disX, 2) + Math.pow(disY, 2)); 
    if (dis <= gap) {...}

b. 如果速度太大或者重绘频率太小，怎会看到两个小球互相融入的效果，所以处理第一步是还原碰撞初始状态。

  
    ball.x -= (gap - dis) * sin;
    ball.y -= (gap - dis) * cos; 

上面代码是修正主动碰的小球的位置，让他退回刚好碰撞的位置，其实就是下图的AB之间的距离，相当于球o1从A退到B. 

c. 小球斜碰很难分析，我们把他们的速度旋转到x轴方向。

    vx1 = vx * hitcos + vy * hitsin,
    
    vy1 = vy * hitcos - vx * hitsin,

上面的vx是原来速度v在x方向的速度，vy是v在y方向的速度。把原来的速度顺时针旋转两球圆心弦的角度，以后则不考虑y方向的运动。x方向上动量守恒和能量守恒，即

    m * vx10 + m * vx20 = m * vx11 + m * vx21;
    1/2 * m * vx10² + 1/2 * m * vx20² = 1/2 * m * vx11² + 1/2 * m * v21²

联立求解可得碰撞后的速度大小。

然后将速度旋转回去：

    vx = vx1 * hitcos - vy1 * hitsin;
    
    vy = vy1 * hitcos + vx1 * hitsin;

则碰撞后的速度和角度都可以得出：

    
    ball.v = Math.sqrt(vx * vx + vy * vy) * (1 - 0); // (1-0) 变为大小，标量
    obj.v = Math.sqrt(objVx * objVx + objVy * objVy) * (1 - 0);
    ball.angle = Math.atan2(vx, vy);
    obj.angle = Math.atan2(objVx, objVy);

注意atan2(y, x)计算的是(x,y)到(0,0)的角度，我们这里使用(vx, vy),计算的是(vx, vy)到(0,0)角的余角。

考虑外力

ball.v = ball.v * (1 - util.LOSS); // 碰撞边缘后减速

故循环跳出条件是 Math.round(v) <= 0

  
  if( Math.round(ball.v <= 0) {
        ball.v = 0;
        for(var i = 0; i < movingballs.length; i++) {
            if(movingballs[i] == ball) {
                movingballs.remove(i);
            }
        }
        window.clearInterval(_this.emmiter);
 } 

上式moveingballs.remove(i)移除数组指定位置的元素，是手动添加的：

    
    Array.prototype.remove = function() { 
        ...
 } 

预测线

预测线的运动逻辑和小球一样，唯一不同的是，使用while而不是setInterval, 这样预测路线就会比我们的小球提前运动到指定位置。

由于预测路线和小球运动路径相同，且比小球提前到达，那么就能提前知道小球的停止位置，如果判断到小球到达了不能到达的位置，则可以减小他的速度即可。

预测路线的小黄点，是通过

    var elem = document.createElement("div");
    ....

    wrap.append(elem);

追加到DOM父节点上的，所以如果一次碰撞小球太多，则会卡死的现象。

在cocos2d中是使用在Layer上drawDot()，几乎没有内存消耗，所以不存在卡的现象。

如果要应用到是项目中，建议使用canvas 或者 documentFragment处理。

另外在贪吃鱼游戏中，运动的过程是通过加速度和路程来计算每次增加的位置的，运动效果比刚才的每次增加相同dx,dy的方案要好，如果对运动效果要求较高，可以考虑这种方式。

结语

实际需求中，很多情况下我们不能使用现成的引擎或者框架，必须要去自己造轮子。

像刚才的碰撞处理中完全靠数学和物理知识，可见学好基本理论知识的重要性，就像作为程序员必需的数据结构和算法一样，总有你不知道的哪天就会用上，所以不断学习这些基础的东西，才能在用的时候随机应变。

最后，源码放在github上： https://github.com/freestyle21/CrashBall