Chrome自带恐龙小游戏的源码研究(七)

　　在上一篇《Chrome自带恐龙小游戏的源码研究(六)》中研究了恐龙的跳跃过程，这一篇研究恐龙与障碍物之间的碰撞检测。

碰撞盒子

　　游戏中采用的是矩形(非旋转矩形)碰撞。这类碰撞优点是计算比较简单，缺点是对不规则物体的检测不够精确。如果不做更为精细的处理，结果会像下图：

 

如图所示，两个盒子虽然有重叠部分，但实际情况是恐龙和仙人掌之间并未发生碰撞。为了解决这个问题，需要建立多个碰撞盒子：

不过这样还是有问题，观察图片，恐龙和仙人掌都有四个碰撞盒子，如果每次Game Loop里都对这些盒子进行碰撞检测，那么结果是每次需要进行4X4=16次计算，如果物体或者盒子很多，就会导致运算量大大增加，造成严重的性能问题。为改进这一点，只需要先检测两个大盒子之间是否碰撞，如果没有，则略去里面小盒子的碰撞检测。反之则对里面的小盒子做碰撞检测。游戏中使用CollisionBox构造函数创建碰撞盒子：

/**
* 碰撞盒子
* @param x    {number} 盒子x坐标
* @param y    {number} 盒子y坐标
* @param w    {number} 盒子宽度
* @param h    {number} 盒子高度
*/
function CollisionBox(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;
}

使用boxCompare方法检测两个盒子是否发生碰撞：

/**
* 碰撞检测
* @param tRexBox {Object} 霸王龙的碰撞盒子
* @param obstacleBox {Object} 障碍物的碰撞盒子
*/
function boxCompare(tRexBox, obstacleBox) {
    var tRexBoxX = tRexBox.x,
        tRexBoxY = tRexBox.y,
        obstacleBoxX = obstacleBox.x,
        obstacleBoxY = obstacleBox.y;

    return tRexBoxX < obstacleBoxX + obstacleBox.width && tRexBoxX + tRexBox.width > obstacleBoxX && tRexBoxY < obstacleBoxY + obstacleBox.height && tRexBox.height + tRexBoxY > obstacleBoxY;
}

 

建立碰撞盒子

　　接下来要为恐龙和障碍物建立碰撞盒子。游戏中为恐龙建立了6个碰撞盒子，分布在头、躯干和脚，同时它还有闪避状态：

        Trex.collisionBoxes = {
            DUCKING:[
                new CollisionBox(1,18,55,25)
            ],
            RUNNING: [
                new CollisionBox(22, 0, 17, 16),
                new CollisionBox(1, 18, 30, 9),
                new CollisionBox(10, 35, 14, 8),
                new CollisionBox(1, 24, 29, 5),
                new CollisionBox(5, 30, 21, 4),
                new CollisionBox(9, 34, 15, 4)
            ]
        };

障碍物的碰撞盒子定义在Obstacle.types中：

Obstacle.types = [{
    type: 'CACTUS_SMALL',
    width: 17,
    height: 35,
    yPos: 105,
    multipleSpeed: 4,
    minGap: 120,
    minSpeed: 0,
    collisionBoxes: [new CollisionBox(0, 7, 5, 27), new CollisionBox(4, 0, 6, 34), new CollisionBox(10, 4, 7, 14)]
},
{
    type: 'CACTUS_LARGE',
    width: 25,
    height: 50,
    yPos: 90,
    multipleSpeed: 7,
    minGap: 120,
    minSpeed: 0,
    collisionBoxes: [new CollisionBox(0, 12, 7, 38), new CollisionBox(8, 0, 7, 49), new CollisionBox(13, 10, 10, 38)]
},
{
    type: 'PTERODACTYL',
    width: 46,
    height: 40,
    yPos: [100, 75, 50],
    // Variable height mobile.
    multipleSpeed: 999,
    minSpeed: 8.5,
    minGap: 150,
    collisionBoxes: [new CollisionBox(15, 15, 16, 5), new CollisionBox(18, 21, 24, 6), new CollisionBox(2, 14, 4, 3), new CollisionBox(6, 10, 4, 7), new CollisionBox(10, 8, 6, 9)],
    numFrames: 2,
    frameRate: 1000 / 6,
    speedOffset: .8
}];

不过这只是定义了障碍物数量为1的情况，复数的障碍物需要在创建时修正碰撞盒子：

if (this.size > 1) {//只针对仙人掌
    this.collisionBoxes[1].width = this.width - this.collisionBoxes[0].width - this.collisionBoxes[2].width;
    this.collisionBoxes[2].x = this.width - this.collisionBoxes[2].width;
}

下图分别为单数和复数的盒子。

最后执行碰撞检测：

function checkForCollision(obstacle, tRex) {
        //创建最外层的大盒子
    var tRexBox = new CollisionBox(tRex.xPos + 1, tRex.yPos + 1, tRex.config.WIDTH - 2, tRex.config.HEIGHT - 2);
    var obstacleBox = new CollisionBox(obstacle.xPos + 1, obstacle.yPos + 1, obstacle.typeConfig.width * obstacle.size - 2, obstacle.typeConfig.height - 2);

    }
    if (boxCompare(tRexBox, obstacleBox)) {
        var collisionBoxes = obstacle.collisionBoxes;
        var tRexCollisionBoxes = tRex.ducking ? Trex.collisionBoxes.DUCKING: Trex.collisionBoxes.RUNNING;

        for (var t = 0; t < tRexCollisionBoxes.length; t++) {
            for (var i = 0; i < collisionBoxes.length; i++) {
                //修正盒子
                var adjTrexBox = createAdjustedCollisionBox(tRexCollisionBoxes[t], tRexBox);
                var adjObstacleBox = createAdjustedCollisionBox(collisionBoxes[i], obstacleBox);
                var crashed = boxCompare(adjTrexBox, adjObstacleBox);

                if (crashed) {
                    return [adjTrexBox, adjObstacleBox];
                }
            }
        }
    }
    return false;
}

//修正盒子，将相对坐标转为画布坐标
function createAdjustedCollisionBox(box, adjustment) {
    return new CollisionBox(box.x + adjustment.x, box.y + adjustment.y, box.width, box.height);
}

以下是最终运行效果，打开控制台就能看到碰撞输出：

 

后记

　　通过建立碰撞盒子进行碰撞检测在应用上非常广泛，著名的街机游戏《街霸》和《拳皇》就是采用了这种方式：

 

可以看到游戏中对人物建立了多个碰撞盒子，红色代表攻击区域，蓝色代表可以被攻击的区域，绿色区域之间不能重叠，用来推挤对手。