const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const cupRect = { x: canvas.width / 2 - 50, y: canvas.height / 2, width: 100, height: 200 };
const waterRect = { x: canvas.width / 2 - 50, y: canvas.height / 2 + 200, width: 100, height: 0 };

const surfaceTension = 5;
let gameOver = false;

canvas.addEventListener('mousedown', (event) => {
    if (!gameOver) {
        waterRect.height += 5;
        waterRect.y -= 5;
    }
});

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw cup
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 5;
    ctx.strokeRect(cupRect.x, cupRect.y, cupRect.width, cupRect.height);

    // Draw water
    ctx.fillStyle = 'blue';
    ctx.fillRect(waterRect.x, waterRect.y, waterRect.width, waterRect.height);

    // Check surface tension
    if (waterRect.height > cupRect.height + surfaceTension) {
        gameOver = true;
        ctx.fillStyle = 'red';
        ctx.font = '36px sans-serif';
        ctx.fillText('ゲームオーバー', canvas.width / 2 - 100, canvas.height / 2);
    }

    requestAnimationFrame(draw);
}

draw();