HTML5 Canvas 고정 델타 타임(Fixed Timestep) 루프와 Web Audio 절차적 효과음 합성HTML5 Canvas Fixed Timestep Loop and Procedural Web Audio Synthesis

// --- [1. 고정 델타 타임(Fixed Timestep) 캔버스 루프] ---
const FIXED_DT = 1 / 60; // 60Hz 고정 물리 스텝 (약 16.67ms)
const MAX_FRAME_TIME = 0.25; // 탭 전환 복귀 시 나선형 사망(Spiral of Death) 방지 상한

let lastTime = performance.now();
let accumulator = 0;

function gameLoop(now) {
    let frameTime = (now - lastTime) / 1000;
    lastTime = now;
    if (frameTime > MAX_FRAME_TIME) frameTime = MAX_FRAME_TIME;

    accumulator += frameTime;
    while (accumulator >= FIXED_DT) {
        updatePhysics(FIXED_DT); // 주사율과 무관하게 항상 동일한 dt로 적분
        accumulator -= FIXED_DT;
    }

    const alpha = accumulator / FIXED_DT; // 렌더링 보간 계수 (0.0 ~ 1.0)
    renderCanvas(alpha);
    requestAnimationFrame(gameLoop);
}

// --- [2. Web Audio API 절차적 효과음(점프/타격) 합성] ---
let audioCtx = null;

function playJumpSfx() {
    if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (audioCtx.state === 'suspended') audioCtx.resume();

    const t0 = audioCtx.currentTime;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();

    // 구형파(Square)로 레트로 아케이드 질감 생성 및 주파수 상향 스윕
    osc.type = 'square';
    osc.frequency.setValueAtTime(180, t0);
    osc.frequency.exponentialRampToValueAtTime(620, t0 + 0.14);

    // 클릭 노이즈 방지를 위한 지수 감쇠 볼륨 엔벨로프
    gain.gain.setValueAtTime(0.18, t0);
    gain.gain.exponentialRampToValueAtTime(0.001, t0 + 0.15);

    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start(t0);
    osc.stop(t0 + 0.15);
}

// --- [1. Fixed Timestep Canvas Loop] ---
const FIXED_DT = 1 / 60; // 60Hz fixed physics step (~16.67ms)
const MAX_FRAME_TIME = 0.25; // Upper bound to prevent Spiral of Death after tab switching

let lastTime = performance.now();
let accumulator = 0;

function gameLoop(now) {
    let frameTime = (now - lastTime) / 1000;
    lastTime = now;
    if (frameTime > MAX_FRAME_TIME) frameTime = MAX_FRAME_TIME;

    accumulator += frameTime;
    while (accumulator >= FIXED_DT) {
        updatePhysics(FIXED_DT); // Integrate with identical dt regardless of refresh rate
        accumulator -= FIXED_DT;
    }

    const alpha = accumulator / FIXED_DT; // Render interpolation factor (0.0 ~ 1.0)
    renderCanvas(alpha);
    requestAnimationFrame(gameLoop);
}

// --- [2. Web Audio API Procedural Sound Effect (Jump/Hit) Synthesis] ---
let audioCtx = null;

function playJumpSfx() {
    if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (audioCtx.state === 'suspended') audioCtx.resume();

    const t0 = audioCtx.currentTime;
    const osc = audioCtx.createOscillator();
    const gain = audioCtx.createGain();

    // Square wave for retro arcade timbre with upward frequency sweep
    osc.type = 'square';
    osc.frequency.setValueAtTime(180, t0);
    osc.frequency.exponentialRampToValueAtTime(620, t0 + 0.14);

    // Exponential decay volume envelope to prevent click artifacts
    gain.gain.setValueAtTime(0.18, t0);
    gain.gain.exponentialRampToValueAtTime(0.001, t0 + 0.15);

    osc.connect(gain);
    gain.connect(audioCtx.destination);
    osc.start(t0);
    osc.stop(t0 + 0.15);
}