😺
```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 bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes grow {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #ccc; border-radius: 10px; background: #f0f8ff; font-family: Arial, sans-serif;">
<div id="catGame" style="position: relative; width: 100%; height: 80%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
<div id="cat" style="font-size: 3em; animation: bounce 0.6s infinite;">😺</div>
</div>
<div style="width: 100%; display: flex; justify-content: space-around; padding-top: 10px;">
<input type="button" value="⬅️" onclick="moveCat(-20, 0)" style="font-size: 2em; border: none; background: transparent; cursor: pointer;">
<input type="button" value="⬆️" onclick="moveCat(0, -20)" style="font-size: 2em; border: none; background: transparent; cursor: pointer;">
<input type="button" value="⬇️" onclick="moveCat(0, 20)" style="font-size: 2em; border: none; background: transparent; cursor: pointer;">
<input type="button" value="➡️" onclick="moveCat(20, 0)" style="font-size: 2em; border: none; background: transparent; cursor: pointer;">
</div>
</div>
<script>
const cat = document.getElementById('cat');
const catGame = document.getElementById('catGame');
function moveCat(dx, dy) {
const rect = cat.getBoundingClientRect();
const parentRect = catGame.getBoundingClientRect();
const newX = rect.left + dx;
const newY = rect.top + dy;
if (newX >= parentRect.left && newX <= (parentRect.right - rect.width) && newY >= parentRect.top && newY <= (parentRect.bottom - rect.height)) {
cat.style.transform = `translate(${newX - parentRect.left}px, ${newY - parentRect.top}px)`;
cat.style.transition = "transform 0.3s";
cat.innerHTML = '😸';
cat.style.animation = 'grow 0.5s';
} else {
cat.innerHTML = '🙀';
cat.style.animation = 'rotate 0.5s';
}
}
</script>
</body>
</html>
```