```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水滴ゲーム</title>
<style>
@keyframes drop {
0% { transform: translateY(0); }
100% { transform: translateY(300px); }
}
@keyframes fill {
0% { transform: scaleY(0); }
100% { transform: scaleY(1); }
}
@keyframes overflow {
0% { opacity: 1; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border: 2px solid #00f;">
<div id="glass" style="width: 200px; height: 300px; border: 5px solid #00f; position: relative; overflow: hidden; background-color: rgba(173, 216, 230, 0.2);">
<div id="water" style="width: 100%; height: 0; background-color: rgba(0, 191, 255, 0.7); position: absolute; bottom: 0; transform-origin: bottom;">
</div>
</div>
<div style="margin-top: 20px;">
<button id="dropButton" style="font-size: 24px;">💧 水滴を落とす 💧</button>
</div>
</div>
<script>
const glass = document.getElementById('glass');
const water = document.getElementById('water');
const dropButton = document.getElementById('dropButton');
const maxWaterHeight = 300; // max height of water in the glass in pixels
glass.addEventListener('click', (event) => {
dropWater(event.clientY, 10);
});
dropButton.addEventListener('click', () => {
dropWater(50, 10);
});
function dropWater(size, speed) {
let drop = document.createElement('div');
drop.style = `width: ${size}px; height: ${size}px; background-color: blue; border-radius: 50%; position: absolute; top: 0; left: 100px; animation: drop ${speed}s forwards;`;
glass.appendChild(drop);
setTimeout(() => {
drop.remove();
let currentHeight = parseInt(water.style.height) || 0;
let newHeight = Math.min(currentHeight + size, maxWaterHeight);
water.style.height = newHeight + 'px';
water.style.animation = 'fill 1s forwards';
if (newHeight === maxWaterHeight) {
water.style.animation = 'overflow 2s forwards';
setTimeout(() => {
water.style.height = '0';
water.style.animation = 'none';
}, 2000);
}
}, speed * 1000);
}
</script>
</body>
</html>
```
