🕺
```html
<!html>
<html>
<head>
<meta charset="UTF-8">
<title>🕹️ ジャンプゲーム 🕹️</title>
<style>
@keyframes moveGarbage {
from { transform: translateX(400px); }
to { transform: translateX(-50px); }
}
@keyframes jumpAnimation {
0% { bottom: 0px; }
50% { bottom: 150px; }
100% { bottom: 0px; }
}
@keyframes backgroundScroll {
from { background-position: 0 0; }
to { background-position: -400px 0; }
}
.garbage {
animation: moveGarbage linear;
}
.character.jump {
animation: jumpAnimation 0.5s ease;
}
.emojiBounce {
animation: bounce 0.5s;
}
@keyframes bounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.5); }
}
</style>
</head>
<body>
<div style="position: relative; width: 400px; height: 400px; overflow: hidden; background-color: #a0e7e5; background-image: linear-gradient(120deg, #a0e7e5 25%, #fbcfe8 25%, #fbcfe8 50%, #a0e7e5 50%, #a0e7e5 75%, #fbcfe8 75%, #fbcfe8); background-size: 50px 50px; animation: backgroundScroll 5s linear infinite;">
<div id="character" class="character" style="position: absolute; bottom: 0px; left: 50px; font-size: 40px;">🕺</div>
<div id="garbageContainer" style="position: absolute; top: 0; left: 0; width: 400px; height: 400px;"></div>
<button id="jumpButton" style="position: absolute; bottom: 20px; right: 20px; padding: 10px; font-size: 20px;">🚀</button>
</div>
<script>
const character = document.getElementById('character');
const garbageContainer = document.getElementById('garbageContainer');
const jumpButton = document.getElementById('jumpButton');
let isJumping = false;
function createGarbage() {
const garbage = document.createElement('div');
garbage.classList.add('garbage');
garbage.style.position = 'absolute';
garbage.style.top = Math.random() * 350 + 'px';
garbage.style.left = '400px';
garbage.style.fontSize = '30px';
const emojis = ['🗑️', '🍕', '🚯', '📦', '🛍️', '🥤'];
garbage.textContent = emojis[Math.floor(Math.random() * emojis.length)];
garbage.style.animationDuration = (3 + Math.random() * 2) + 's';
garbageContainer.appendChild(garbage);
garbage.addEventListener('animationend', () => {
garbageContainer.removeChild(garbage);
});
}
setInterval(createGarbage, 1500);
function jump() {
if (isJumping) return;
isJumping = true;
character.classList.add('jump');
setTimeout(() => {
character.classList.remove('jump');
isJumping = false;
}, 500);
}
jumpButton.addEventListener('mousedown', () => {
jumpButton.classList.add('emojiBounce');
jump();
});
jumpButton.addEventListener('mouseup', () => {
jumpButton.classList.remove('emojiBounce');
});
document.addEventListener('keydown', (e) => {
if (e.code === 'Space' || e.code === 'ArrowUp') {
jump();
}
});
garbageContainer.addEventListener('click', () => {
garbageContainer.classList.add('emojiBounce');
setTimeout(() => {
garbageContainer.classList.remove('emojiBounce');
}, 500);
});
</script>
</body>
</html>
```