🐱
タップしてね！
😺
😹
😻
```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%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
@keyframes meow {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
</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; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
<div style="font-size: 5rem;">🐱</div>
<div id="message" style="font-size: 2rem; animation: bounce 2s infinite;">タップしてね！</div>
<div style="display: flex; gap: 10px; margin-top: 20px;">
<div style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #ffcccb; font-size: 2rem; cursor: pointer;" onclick="showReaction('😺')">😺</div>
<div style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #ffcccb; font-size: 2rem; cursor: pointer;" onclick="showReaction('😹')">😹</div>
<div style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #ffcccb; font-size: 2rem; cursor: pointer;" onclick="showReaction('😻')">😻</div>
</div>
</div>
<script>
function showReaction(emoji) {
const message = document.getElementById('message');
message.innerHTML = emoji;
message.style.animation = 'meow 1s';
message.addEventListener('animationend', () => {
message.style.animation = '';
message.innerHTML = 'タップしてね！';
});
}
window.addEventListener('keydown', (event) => {
let emoji;
if (event.key === '1') emoji = '😺';
if (event.key === '2') emoji = '😹';
if (event.key === '3') emoji = '😻';
if (emoji) showReaction(emoji);
});
</script>
</body>
</html>
```