분유 먹이기 게임

<style>
    #game-container {
        position: relative;
        width: 100%;
        max-width: 400px;
        margin: 20px auto;
        padding: 15px;
        background-color: #fff5f7;
        border-radius: 25px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        text-align: center;
        touch-action: none; /* 모바일 스크롤 방지 */
    }
    #gameCanvas {
        background-color: #ffffff;
        border: 4px solid #ffccd5;
        border-radius: 15px;
        width: 100%; /* 반응형 */
        max-width: 360px;
        cursor: none;
    }
    .game-ui { font-family: 'Nanum Gothic', sans-serif; margin-bottom: 10px; }
    .restart-btn {
        margin-top: 15px;
        padding: 10px 25px;
        background-color: #ff99aa;
        color: white;
        border: none;
        border-radius: 20px;
        cursor: pointer;
        font-weight: bold;
    }
</style>

<div id="game-container">
    <div class="game-ui">
        <h3 style="color: #ff8899;">👶 아기 분유 먹이기</h3>
        <p>배고픔 게이지: <span id="hp-text">100</span>%</p>
    </div>
    <canvas id="gameCanvas" width="360" height="450"></canvas>
    <button class="restart-btn" onclick="initGame()">다시 시작하기</button>
</div>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const hpText = document.getElementById('hp-text');

    let score, hunger, isGameOver, mouseX, mouseY;

    // 게임 초기화 함수
    function initGame() {
        score = 0;
        hunger = 100;
        isGameOver = false;
        mouseX = canvas.width / 2;
        mouseY = canvas.height - 50;
        loop();
    }

    // 마우스 및 터치 이벤트
    function updatePos(e) {
        const rect = canvas.getBoundingClientRect();
        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
        mouseX = clientX - rect.left;
        mouseY = clientY - rect.top;
    }
    canvas.addEventListener('mousemove', updatePos);
    canvas.addEventListener('touchmove', (e) => { e.preventDefault(); updatePos(e); }, {passive: false});

    function drawBaby() {
        // 얼굴
        ctx.fillStyle = "#ffe0bd";
        ctx.beginPath();
        ctx.arc(180, 220, 70, 0, Math.PI * 2);
        ctx.fill();
        
        // 눈 (깜빡임 효과 가능)
        ctx.fillStyle = "#333";
        ctx.beginPath();
        ctx.arc(155, 210, 6, 0, Math.PI * 2);
        ctx.arc(205, 210, 6, 0, Math.PI * 2);
        ctx.fill();

        // 입 (배고픔 상태에 따라 변화)
        ctx.beginPath();
        if (hunger > 40) {
            ctx.arc(180, 240, 20, 0, Math.PI, false); // 웃음
        } else {
            ctx.arc(180, 255, 12, 0, Math.PI * 2); // 울먹
        }
        ctx.strokeStyle = "#ff7777";
        ctx.lineWidth = 3;
        ctx.stroke();
    }

    function drawBottle() {
        ctx.save();
        ctx.translate(mouseX, mouseY);
        // 분유병
        ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
        ctx.fillRect(-15, -40, 30, 60);
        ctx.strokeRect(-15, -40, 30, 60);
        // 꼭지
        ctx.fillStyle = "#ffccaa";
        ctx.beginPath();
        ctx.arc(0, -45, 10, 0, Math.PI, true);
        ctx.fill();
        ctx.restore();
    }

    function loop() {
        if (isGameOver) return;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 배고픔 게이지 로직
        hunger -= 0.15;
        hpText.innerText = Math.max(0, Math.floor(hunger));

        // 충돌 판정 (아기 입 근처)
        let dist = Math.hypot(mouseX - 180, mouseY - 250);
        if (dist < 50) {
            if (hunger < 100) hunger += 0.5;
            score++;
        }

        drawBaby();
        drawBottle();

        if (hunger <= 0) {
            isGameOver = true;
            ctx.fillStyle = "rgba(0,0,0,0.6)";
            ctx.fillRect(0,0,canvas.width, canvas.height);
            ctx.fillStyle = "white";
            ctx.font = "24px Arial";
            ctx.textAlign = "center";
            ctx.fillText("아기가 배불러서 잠들었어요!", 180, 220);
        } else {
            requestAnimationFrame(loop);
        }
    }

    initGame();
</script>