Day12

Level Design

接下来我们要开始设计关卡，
小蜜蜂的关卡很单纯，但是背後的心理却很深奥。

不过卡比目前只需要完成基本的就行了，
也就是将 Enemy 的阵型排列出来。

Screen

首先我们要先调整一下画面的大小，
这边按照原作的大小比例下去调整。

-- src/main.ts

const app = new Application({
+ width: 224,
+ height: 256,
+ resolution: 3,
});

Refactor

接着我们调整一下 Enemy，
我们需要这边的 types 方便我们在其他脚本中使用。

-- src/characters/Enemy.ts

export type EnemyTypes = "squid" | "crab" | "octopus";

export type EnemyProps = {
  type: EnemyTypes;
  position: Vector;
};

Spawn

接着根据原作，敌人的阵型会有 5 排，并且会以下的方式排列。

所以我们需要生成一个矩阵，
并透过这个矩阵产生相对应的 Enemy 以及提供其初始位置。

-- src/scenes/Game.ts

const grid = 16;

const points: EnemyProps[][] = [
  "squid",
  "crab",
  "crab",
  "octopus",
  "octopus",
].map((type, y) =>
  Array.from({ length: 11 }, (_, x) => ({
    type: type as EnemyTypes,
    position: { x: x * grid, y: y * grid },
  }))
);

function spawn(generate: typeof Enemy, points: EnemyProps[][]) {
  return points.map((row) => row.map(generate)).flat();
}

export default function Game(screen: Rectangle): Scene<Container> {
+ let instances: GameObject[] = [LaserCannon(screen), ...spawn(Enemy, points)];

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

      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) {
      instances
        .filter(canRender)
        .forEach((instance) => render(stage, instance));
    },
  };
}

这样 spawn 就完成了。

关於兔兔们：

• Tailwind CSS 台湾官网
• Tailwind CSS 台湾 (脸书粉丝专页)
• 兔兔教大本营