add fire and hit sound effects via web audio

- procedural sounds (no asset files): laser pew on fire, noise burst on rock hit
- unlock AudioContext on first user gesture for autoplay policy
- add src/audio.ts leaf module; wire playFire in ship, playHit in main

########## added by prepare-commit-msg ##########
# COMMIT_MSG_FILE: .git/COMMIT_EDITMSG
# DATE: 2026-06-09 09:22:42

Author: ysoftman

test_web_page/particle/src/audio.ts

@@ -0,0 +1,77 @@
+// 효과음 — Web Audio API 로 절차적으로 생성한다(에셋 파일 불필요).
+// 리프 유틸 모듈: 게임 로직에 의존하지 않으므로 entities/game/main 어디서든 import 가능.
+// 브라우저 자동재생 정책상 첫 사용자 제스처에서 unlockAudio() 로 컨텍스트를 깨워야 한다.
+
+let ctx: AudioContext | null = null;
+
+/** AudioContext 를 지연 생성한다. 미지원 환경(SSR 등)에서는 null. */
+function getCtx(): AudioContext | null {
+  if (typeof window === "undefined") return null;
+  if (!ctx) {
+    const AC =
+      window.AudioContext ??
+      (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+    if (!AC) return null;
+    ctx = new AC();
+  }
+  return ctx;
+}
+
+/**
+ * 첫 사용자 제스처(키다운/포인터/터치) 핸들러에서 호출한다.
+ * suspended 상태의 컨텍스트를 resume 해 이후 효과음 재생을 가능하게 한다.
+ */
+export function unlockAudio(): void {
+  const c = getCtx();
+  if (c && c.state === "suspended") {
+    void c.resume();
+  }
+}
+
+/** 발사음 — 짧게 떨어지는 사각파 "퓨". */
+export function playFire(): void {
+  const c = getCtx();
+  if (c?.state !== "running") return;
+  const t = c.currentTime;
+  const osc = c.createOscillator();
+  const gain = c.createGain();
+  osc.type = "square";
+  osc.frequency.setValueAtTime(880, t);
+  osc.frequency.exponentialRampToValueAtTime(180, t + 0.12);
+  gain.gain.setValueAtTime(0.1, t);
+  gain.gain.exponentialRampToValueAtTime(0.0008, t + 0.14);
+  osc.connect(gain).connect(c.destination);
+  osc.start(t);
+  osc.stop(t + 0.15);
+}
+
+/** 명중/파괴음 — 저역으로 떨어지는 노이즈 버스트 "펑". */
+export function playHit(): void {
+  const c = getCtx();
+  if (c?.state !== "running") return;
+  const t = c.currentTime;
+  const dur = 0.22;
+
+  const buffer = c.createBuffer(1, Math.max(1, Math.floor(c.sampleRate * dur)), c.sampleRate);
+  const data = buffer.getChannelData(0);
+  for (let i = 0; i < data.length; i++) {
+    // 시간이 지날수록 감쇠하는 화이트 노이즈.
+    data[i] = (Math.random() * 2 - 1) * (1 - i / data.length);
+  }
+
+  const noise = c.createBufferSource();
+  noise.buffer = buffer;
+
+  const filter = c.createBiquadFilter();
+  filter.type = "lowpass";
+  filter.frequency.setValueAtTime(1400, t);
+  filter.frequency.exponentialRampToValueAtTime(180, t + dur);
+
+  const gain = c.createGain();
+  gain.gain.setValueAtTime(0.22, t);
+  gain.gain.exponentialRampToValueAtTime(0.0008, t + dur);
+
+  noise.connect(filter).connect(gain).connect(c.destination);
+  noise.start(t);
+  noise.stop(t + dur);
+}

test_web_page/particle/src/entities/ship.ts

@@ -1,6 +1,7 @@
 // 플레이어 비행체 — ctx.input 의 키보드 입력으로 조종되는 시안색 삼각형.
 import { Bodies, Body } from "matter-js";
 import { Container, Graphics } from "pixi.js";
+import { playFire } from "../audio";
 import { BULLET, COLLISION, COLORS, SHIP } from "../constants";
 import type { Entity, GameContext } from "../types";
 import { Bullet } from "./bullet";
@@ -121,6 +122,7 @@ export class Ship implements Entity {
           body.velocity.y,
         ),
       );
+      playFire();
     }
 
     if (this.invulnerableLeft > 0) {

test_web_page/particle/src/main.ts

@@ -1,6 +1,7 @@
 // 통합 엔트리포인트 — 코어 엔진, 엔티티, 게임플레이 모듈을 와이어링한다.
 import { Body } from "matter-js";
 import "./style.css";
+import { playHit, unlockAudio } from "./audio";
 import { COLORS } from "./constants";
 import { Game } from "./core/game";
 import { createRenderer } from "./core/renderer";
@@ -26,6 +27,12 @@ async function bootstrap(): Promise<void> {
   // 터치 기기에서는 화면 위 가상 버튼 오버레이를 추가한다 (키보드와 동일한 InputState 공유).
   // 데스크탑에서는 null 을 반환하고 아무 DOM 도 만들지 않는다.
   createTouchControls(input);
+
+  // 브라우저 자동재생 정책: 첫 사용자 제스처에서 오디오 컨텍스트를 깨운다.
+  const unlock = (): void => unlockAudio();
+  for (const ev of ["keydown", "pointerdown", "touchstart"] as const) {
+    window.addEventListener(ev, unlock, { once: true });
+  }
   const game = new Game(app, input);
 
   const hud = new Hud(app.screen.width, app.screen.height, INITIAL_LIVES);
@@ -59,6 +66,7 @@ async function bootstrap(): Promise<void> {
     for (const fragment of rock.split(hitX, hitY)) {
       ctx.spawn(fragment);
     }
+    playHit();
     hud.rockDestroyed(rock.sizeLevel);
 
     // 살아있는 바위가 하나도 없으면 웨이브 클리어 (분열 조각도 바위로 집계).

test_web_page/particle/src/types.ts

@@ -1,8 +1,8 @@
 // 공유 계약(인터페이스) 정의.
-// 모듈 의존 규칙:
-//   core/**      import 가능: types, constants, matter-js, pixi.js  (entities/, game/ 금지)
-//   entities/**  import 가능: types, constants, matter-js, pixi.js  (core/, game/ 금지)
-//   game/**      import 가능: types, constants, pixi.js             (core/, entities/ 금지)
+// 모듈 의존 규칙 (audio 는 게임 로직 없는 리프 유틸이라 어디서든 import 가능):
+//   core/**      import 가능: types, constants, audio, matter-js, pixi.js  (entities/, game/ 금지)
+//   entities/**  import 가능: types, constants, audio, matter-js, pixi.js  (core/, game/ 금지)
+//   game/**      import 가능: types, constants, audio, pixi.js             (core/, entities/ 금지)
 //   main.ts      모든 모듈을 와이어링하는 통합 지점
 
 import type { Body } from "matter-js";