🦸♂️
🐢
🐰
```html
<!DOCTYPE html>
<html>
<head>
<title>Emoji Adventure</title>
<style>
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
@keyframes sparkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.bounce {
animation: bounce 0.5s infinite;
}
.sparkle {
animation: sparkle 1s infinite;
}
</style>
</head>
<body>
<div style="width:400px; height:400px; border:2px solid #000; position:relative; overflow:hidden; background:linear-gradient(to bottom, #a0d8f1, #fffacd);">
<div id="player" style="font-size:40px; position:absolute; bottom:50px; left:50px; cursor:pointer;">🦸♂️</div>
<div id="emoji1" style="font-size:30px; position:absolute; bottom:100px; left:200px;">🐢</div>
<div id="emoji2" style="font-size:30px; position:absolute; bottom:150px; left:300px;">🐰</div>
<canvas id="gameCanvas" width="400" height="400" style="position:absolute; top:0; left:0;"></canvas>
<div style="position:absolute; bottom:10px; left:50%; transform:translateX(-50%);">
<button onclick="moveLeft()" style="font-size:20px; margin:5px;">⬅️</button>
<button onclick="jump()" style="font-size:20px; margin:5px;">⬆️</button>
<button onclick="moveRight()" style="font-size:20px; margin:5px;">➡️</button>
</div>
</div>
<script>
const player = document.getElementById('player');
let isJumping = false;
let position = 50;
let velocity = 0;
const gravity = 0.5;
function moveLeft() {
player.style.left = Math.max(position - 10, 0) + 'px';
player.classList.add('bounce');
setTimeout(() => player.classList.remove('bounce'), 300);
}
function moveRight() {
position += 10;
player.style.left = Math.min(position, 350) + 'px';
player.classList.add('bounce');
setTimeout(() => player.classList.remove('bounce'), 300);
}
function jump() {
if (isJumping) return;
isJumping = true;
velocity = -10;
player.classList.add('sparkle');
const jumpInterval = setInterval(() => {
velocity += gravity;
position += velocity;
if (position >= 50) {
position = 50;
clearInterval(jumpInterval);
isJumping = false;
player.classList.remove('sparkle');
}
player.style.bottom = position + 'px';
}, 20);
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') moveLeft();
if (e.key === 'ArrowRight') moveRight();
if (e.key === 'ArrowUp') jump();
});
player.addEventListener('click', () => {
player.classList.add('bounce');
setTimeout(() => player.classList.remove('bounce'), 300);
});
</script>
</body>
</html>
```