From Web Game Builder
클래식 아케이드 게임을 스캐폴딩합니다 — 벽돌깨기(Breakout), 뱀(Snake), 퐁(Pong), 스페이스 인베이더(Space Invaders). 이런 단순 아케이드·고전 게임 클론 요청 시 사용.
How this skill is triggered — by the user, by Claude, or both
Slash command
/web-game-builder:wgf-arcade-classicThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Breakout·Snake·Pong·Space Invaders 등 고전 아케이드 게임 4종의 핵심 루프를 스캐폴딩한다. 물리 의존도가 낮고 직접 좌표 이동으로 구현해도 충분하다. web-game-builder 플러그인의 전문 스킬이며 `engine/`(Phaser 4 + PixelForge + ChipAudio + MobileHarness)를 사용한다.
Breakout·Snake·Pong·Space Invaders 등 고전 아케이드 게임 4종의 핵심 루프를 스캐폴딩한다. 물리 의존도가 낮고 직접 좌표 이동으로 구현해도 충분하다. web-game-builder 플러그인의 전문 스킬이며 engine/(Phaser 4 + PixelForge + ChipAudio + MobileHarness)를 사용한다.
PixelForge / 미려한 스무스 VectorForge)·테마·분량이 요청에 명시돼 있지 않으면, 코드 전에 AskUserQuestion으로 확인한다 (web-game-builder의 '요청 명확화' 참고). 어떤 재미요소를 넣을지 막막하면 game-dna/arcade-casual.md(Snake·Crossy Road·Stack·Pac-Man 등 분석)와 fun-elements.md의 조합 설계법으로 아키타입·재미요소를 제안한다.games/<slug>/ 스캐폴딩. index.html은 super-runner의 모바일 하니스 + 스크립트 로드 순서 따르기.Game 씬에 구현. 물리 엔진 없이 update에서 직접 좌표 이동해도 무방(단순도 우선).PixelForge.bake 또는 PixelForge.buildAll), ChipAudio로 SFX, MobileHarness로 모바일 컨트롤.Title 씬에서 'Tap to start' + audio.unlock(). 로컬 서버 검증.update에서 vx·vy 더해 이동. 벽/천장 반사(vx *= -1 또는 vy *= -1). 패들 충돌 시 패들 위치 기반 각도 조정.destroy() + vy *= -1. 전멸 시 레벨업.audio.sfx('bump') 반사, audio.sfx('coin') 벽돌 파괴.setInterval 또는 누적 delta로 스텝 주기 제어.Array(큐)로 관리: 매 스텝 앞에 head 위치 추가 → 맨 뒤 제거(먹이 먹으면 제거 안 함).audio.sfx('coin').input.on('pointermove') delta 기반 방향 감지).Math.sign(ball.y - aiPaddle.y)로 추적).vy에 패들 속도 일부 반영(스핀).audio.sfx('bump') 패들/벽 반사, audio.sfx('die') 실점.audio.sfx('bump') 적 피격, audio.sfx('die') 플레이어 피격.// Breakout 패들-공 충돌 예시 (Arcade physics 없이 직접 처리)
update(time, delta) {
const dt = delta / 1000;
this.ball.x += this.bvx * dt;
this.ball.y += this.bvy * dt;
// 벽/천장 반사
if (this.ball.x < 8 || this.ball.x > GAME_W - 8) this.bvx *= -1;
if (this.ball.y < 8) this.bvy *= -1;
// 패들 충돌
if (Phaser.Geom.Intersects.RectangleToRectangle(
this.ball.getBounds(), this.paddle.getBounds())) {
// 패들 위치로 반사 각도 결정 (-60~60도)
const offset = (this.ball.x - this.paddle.x) / (this.paddle.width / 2);
const angle = offset * 60 * (Math.PI / 180);
const speed = Math.hypot(this.bvx, this.bvy);
this.bvx = speed * Math.sin(angle);
this.bvy = -Math.abs(speed * Math.cos(angle));
GAME_AUDIO.sfx('bump');
}
}
skills/wgf-web-game-builder/SKILL.md 및 reference/ 참고.MobileHarness.scaleConfig, installDomGuards. 터치 입력은 장르별로 스와이프·탭·D-패드 적절히 선택.npx claudepluginhub v0o0v/web-game-forge --plugin web-game-builderCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.