PixiJSでマインスイーパーを作った

PixiJSという描画エンジンを使ってマインスイーパーを作りました

ゲームのリンク: マインスイーパー | マグロにアグロ

コード: GitHub - asurato/mine-sweeper

AI Coding+PixiJSを試したくて作りました。AIはTypeScriptの出力が得意らしいとはどこかで聞いていたので、「じゃあゲーム開発もTypeScriptでやればええやん」という興味より。

結構驚いたのが旗や爆弾を画像を使わずに表現できたことで、PixiJSのポリゴン的なやつを使ってAI様がそれっぽく仕上げてくれました。視覚情報はないはずなのにようやっとる。

AIが出力した旗のコードはこんな感じ。ようやっとる。

function drawFlag(g: PixiGraphics, x: number, y: number, size: number) {
  const poleX = x + size * 0.35;
  const poleTop = y + size * 0.15;
  const poleBottom = y + size * 0.75;
  const poleWidth = size * 0.06;

  // ポール（旗竿）
  g.rect(poleX, poleTop, poleWidth, poleBottom - poleTop);
  g.fill(COLORS.flagPole);

  // 旗の布（三角形）
  const flagLeft = poleX + poleWidth;
  const flagTop = poleTop;
  const flagRight = x + size * 0.8;
  const flagBottom = y + size * 0.45;
  g.poly([flagLeft, flagTop, flagRight, (flagTop + flagBottom) / 2, flagLeft, flagBottom]);
  g.fill(COLORS.flag);

  // 土台
  const baseWidth = size * 0.3;
  const baseHeight = size * 0.12;
  const baseX = poleX + poleWidth / 2 - baseWidth / 2;
  const baseY = poleBottom;
  g.rect(baseX, baseY, baseWidth, baseHeight);
  g.fill(COLORS.flagBase);
}