全文共8912字，预计阅读时间20分钟。

const Tween1 = new Tween(sprite)
.to({ y: sprite.y - 10 })
.easing(Easing.Quadratic.InOut.NONE)
.duration(duration)
.interpolation(Interpolation.Bezier([0.42, 0, 0.58, 1]))
.repeat(Infinity)
.yoyo(true);

// 初始化光圈元素，设置光圈初始化属性，并添加到画布中
const ringBgSprite = new Sprite(texture);
...
this.ringBgSprite = ringBgSprite;
this._parent.addChildAt(ringBgSprite, 0);

// 背景光圈scale动画
const Tween3 = new Tween(this.ringBgSprite.scale)
  .to({ x: 1.08, y: 1.08 })
  .easing(Easing.Quadratic.InOut)
  .duration(1250)
  .interpolation(Interpolation.Bezier([0.05, 0.0, 0.3, 1.0]))
  .repeat(Infinity);

1. 确定碰撞热区。由于障碍物的形状不规则，为了保证用户视觉上能感受到确实撞上了，需要约定一下碰撞的热区（备注：玩家热区应该是53*53，设计稿标注未及时更新）
   
   
2. 获取玩家和障碍物的坐标。

// 获取玩家产生碰撞检测的位置
public get playerCollisionPosition() {
  return {
    x: this._parent.position.x,
    x1: this._parent.position.x - 26.5, // 左边界
    y: this._parent.position.y + 26.5, // 下边界
    x2: this._parent.position.x + 26.5, // 右边界
  };
}

export interface IObstacle {
    _X: number; // 障碍物热区的X
    _Y: number; // 障碍物热区的Y
    ObstacleObjectX: number; // 障碍物的X
    ObstacleObjectY: number; // 障碍物的Y
    ObstacleObjectIndex: number; // 障碍物服务端位置
    _width: number; // 障碍物热区的宽度
    _height: number; // 障碍物热区的高度
    height: number;
    width: number;
    type: number;
    subType: number;
    id: string;
    isNeedCollision: boolean;
    imgElement: string;
    ObstacleObject: Sprite;
    // 碰撞检测
    // 初始化服务端数据
    init: (x: number, y: number, img: string, width: number, height: number) => void;
    // 碰撞效果
    collision: () => Promise<boolean>;
    // 异常
    error: () => void;
    // 销毁
    destroy: () => void;
    // 设置碰撞状态
    needCollision: (val: boolean) => void;
}

// 障碍物的坐标计算 ObstacleHotSize为70
this._X = x + (width - ObstacleHotSize) / 2;
this._Y = y + (height - ObstacleHotSize) / 2;

item._Y <= y + this.currentRoundDistance <= item._Y + item._height &&
((item._X <= x1 <= item._X + item._width) || (item._X <= x2 <= item._X + item._width))

export const slideLeftX = 137; // 左跑道中心点的位置
export const slideRightX = 277; // 右跑道中心点的位置

// 判断玩家是否到达了跑道的边界
// item._X < 207表示障碍物在左边的滑道（207=414/2，414是设计稿的宽度，207表示页面中心点的位置，如果礼盒的左边界小于这个值，表示在左滑道，反之在右滑道）
// x === slideLeftX 表示玩家的中心点与跑道的中心点重合，表示玩家在左跑道
const reachedSide = (x === slideLeftX && item._X < 207) || (x === slideRightX && item._X > 207);

// 玩家的中心点既不与左跑道重合，也不与右跑道重合，说明在切换方向中，此时左右跑道上的障碍物都要计算
const checkX = (x !== slideRightX && x !== slideLeftX) || reachedSide；

// 玩家产生碰撞检测的位置
const { x, x1, x2, y } = this._playerInstance.playerCollisionPosition;
const obstacle = this.hasShowObstaclePool.find((item: IObstacle) => {
  // 判断是否到达了左右两侧的边界
  const reachedSide = (x === slideLeftX && item._X < 207) || (x === slideRightX && item._X > 207);
  const checkX = (x !== slideRightX && x !== slideLeftX) || reachedSide;
  return (
    item.isNeedCollision && 
    checkX && 
    item._Y <= y + this.currentRoundDistance && y + this.currentRoundDistance <= item._Y + item._height && 
    ((item._X <= x1 && x1 <= item._X + item._width) || (item._X <= x2 && x2 <= item._X + item._width)));
});

// 取离玩家最近的障碍物进行碰撞校验
if (obstacle) {
  const index = this.hasShowObstaclePool.findIndex((item) => obstacle === item);
  index > -1 && this.hasShowObstaclePool.splice(index, 1);
  obstacle.needCollision(false);
  const entityType = obstacle.type > ObstacleType.BoX ? ObstacleType.BoX : obstacle.type;
  switch (entityType) {
    case ObstacleType.BoX:
      this.handleBox(obstacle);
      break;
    case ObstacleType.Rocket:
      this.handleRocket(obstacle);
      break;
    case ObstacleType.Stone:
      this.handleStone(obstacle);
      break;
    default:
      obstacle.collision();
      // console.error('撞到了不知道是啥', obstacle);
      return;
  }
}

// 找到离玩家最近的好友
const friend: IFriendContainer | undefined = this.hasShowFriendPool.find((item: IFriendContainer) => {
  return (
    item.isNeedCollision &&
    item.y + item.height >= y + this.currentRoundDistance &&
    y + this.currentRoundDistance >= item.y
  );
});
if (friend) {
  friend.isNeedCollision = false;
  this.handleFriend(friend); // 发私信
}