🎉
```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 shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes grow {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: 0 auto; border: 2px solid #000; text-align: center; position: relative; overflow: hidden;">
<div id="emojiGame" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;">
<div id="character" style="position: absolute; font-size: 48px; animation: bounce 1s infinite;">🎉</div>
</div>
<input type="button" value="⬅️" onclick="moveCharacter(-20, 0)" style="position: absolute; bottom: 10px; left: 50px;">
<input type="button" value="➡️" onclick="moveCharacter(20, 0)" style="position: absolute; bottom: 10px; left: 100px;">
<input type="button" value="⬆️" onclick="moveCharacter(0, -20)" style="position: absolute; bottom: 50px; left: 75px;">
<input type="button" value="⬇️" onclick="moveCharacter(0, 20)" style="position: absolute; bottom: 10px; left: 75px;">
</div>
<script>
let character = document.getElementById('character');
let gameArea = document.getElementById('emojiGame');
let x = 0, y = 0;
function moveCharacter(deltaX, deltaY) {
x += deltaX;
y += deltaY;
character.style.left = `${x}px`;
character.style.top = `${y}px`;
character.style.animation = 'shake 0.5s';
setTimeout(() => {
character.style.animation = '';
}, 500);
}
gameArea.addEventListener('click', (event) => {
let posX = event.clientX - gameArea.getBoundingClientRect().left - 24;
let posY = event.clientY - gameArea.getBoundingClientRect().top - 24;
character.style.left = `${posX}px`;
character.style.top = `${posY}px`;
character.style.animation = 'grow 0.5s';
setTimeout(() => {
character.style.animation = '';
}, 500);
});
</script>
</body>
</html>
```