[Day18] Vite 出小蜜蜂～位置校正 Position Adjustment！

Day18

接下来再进到分数系统之前，
卡比要先进行位置的校正，使我们更接近原作。

Enemy

首先我们需要校正 Enemy 的位置，
我们将每个整个 Enemy 区块切成 5 * 11 的格子，
而一个格子的长宽为 16。

但因为我们的对齐方式是对齐格子的左上，
所以我们要一些调整，让 Enemy 置中对齐。

-- src/characters/Enemy.ts

export type EnemyProps = {
  type: EnemyTypes;
  position: Vector;
  id: number;
+ grid: number;
};
export default function Enemy({
  type,
  id,
  position,
+ grid,
}: EnemyProps): IEnemy {
  const images = EnemyImages[type];

  let current = 0;

+ const height = images[current].length;
+ const width = images[current][0].length;

  return {
    id,
    tags: ["enemy"],
+   position: {
+     ...position,
+     x: position.x + grid / 2 - width / 2,
+   },

    set frame(value) {
      current = value % images.length;

      this.renderer.src = images[current];
    },
    get frame() {
      return current;
    },

    canShoot: false,
    shoot() {
      const { x, y } = this.position;
+     const [w, h] = [width, height];

      return EnemyLaser({
        position: { x: x + w / 2, y: y + h + 1 },
        update(it) {
          it.position.y += 1;
        },
      });
    },

    renderer: {
      type: "graphics",
      src: images[current],
    },

    collider: {
+     size: { x: width, y: height },
    },
  };
}

Game

接下来我们要调整整个 Enemy 的区块在画面上的位置，
我们希望整个区块能对其画面的正中间，
所以我们需要 screen 的长宽资讯。

移动 INIT_POSITION 跟 points 到函式内以取得 screen。

并且，我们要接着调整 Enemy 的移动距离，
透过改动 SequentialMovement 的 step。

矫正如下

-- src/scenes/Game.ts

export default function Game(screen: Rectangle): Scene<Container> {
+ const INIT_POSITION = {
+   x: screen.width / 2 - (GRID_SIZE * ROW_WIDTH) / 2,
+   y: 50,
+ };

+ const points: EnemyProps[][] = [
+   "squid",
+   "crab",
+   "crab",
+   "octopus",
+   "octopus",
+ ].map((type, y, list) =>
+   Array.from({ length: ROW_WIDTH }, (_, x) => ({
+     id: (list.length - 1 - y) * ROW_WIDTH + x,
+     type: type as EnemyTypes,
+     position: {
+       x: INIT_POSITION.x + x * GRID_SIZE,
+       y: INIT_POSITION.y + y * GRID_SIZE,
+     },
+     grid: GRID_SIZE,
+   }))
+ );

  let instances: GameObject[] = [
    LaserCannon(screen),
    ...spawn(Enemy, points),
    ...GameHUD(),
  ];

  const update = ap(
    SequentialMovement({
      counts: instances.filter(isEnemy).length,
+     step: { x: 2, y: GRID_SIZE / 2 },
    }),
    RandomlyShoot({
      row: ROW_WIDTH,
      rate: 1000,
    })
  );

  return {
    update(delta) {
      collisionDetect(instances.filter(canCollision).filter(canTransform));

      update(delta, instances);

      instances.forEach((instance) => {
        if (canControl(instance)) {
          instance.handleInput(getKeyPressed());
        }

        if (canShoot(instance) && instance.canShoot) {
          requestAnimationFrame(() => {
            instances = [...instances, instance.shoot()];
          });

          instance.canShoot = false;
        }

        if (instance.destroy) {
          requestAnimationFrame(() => {
            instances = instances.filter((_instance) => _instance !== instance);
          });

          return;
        }

        instance.update?.(delta);
      });
    },

    render(stage) {
      clear();

      instances
        .filter(canRender)
        .forEach((instance) => render(stage, instance));
    },
  };
}

SequentialMovement

除了改动移动的距离之外，
我们也需要调整移动的方式，让 Enemy 能限制在画面中间移动。

type Props = {
  counts: number;
+ step: Vector;
};
export function SequentialMovement({ counts, step }: Props) {
+ const movement = { x: step.x, y: 0 };
+ let offset = 0;

+ let direction = 1;
  let index = 0;

  return (_: number, instances: GameObject[]) => {
    const enemies = instances.filter(isEnemy);

    let processed = enemies.length > 0;

    while (processed) {
      enemies
        .filter((instance) => instance.id === index)
        .forEach((instance) => {
          instance.position.x += movement.x;
          instance.position.y += movement.y;
          instance.frame += 1;

          processed = false;
        });

      index = (index + 1) % counts;
    }

    if (index === 0) {
+     if (offset === 0) movement.y = 0;

+     offset += direction;
    }

+   if (Math.abs(offset) < 10) return;

+   movement.x *= -direction;
+   if (offset === 10) movement.y = step.y;

+   offset = 0;
+   direction *= -1;
  };
}