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);
}
