Super Mario Bros

.game-container { width: 800px; height: 400px; margin: 0 auto; position: relative; overflow: hidden; background-color: #5b8fe5; } .game-screen { width: 100%; height: 100%; position: relative; } .sky { position: absolute; width: 100%; height: 70%; background-color: #5b8fe5; } .ground { position: absolute; bottom: 0; width: 100%; height: 30%; background-color: #d4a762; border-top: 4px solid #8b5a2b; } .mario { position: absolute; width: 32px; height: 48px; bottom: 30%; left: 50px; background-color: #e52521; border-radius: 8px; } .mario:before { content: ''; position: absolute; width: 24px; height: 16px; top: -8px; left: 4px; background-color: #3a3939; border-radius: 50%; } .pipe { position: absolute; width: 64px; height: 80px; bottom: 30%; right: 200px; background-color: #3a9c37; border-left: 4px solid #2d7a2a; border-right: 4px solid #2d7a2a; } .brick { position: absolute; width: 32px; height: 32px; bottom: 50%; right: 300px; background-color: #b8522e; border: 2px solid #8b3a1e; } .coin { position: absolute; width: 16px; height: 16px; bottom: 55%; right: 310px; background-color: #f5d742; border-radius: 50%; box-shadow: 0 0 4px #f5d742; } const mario = document.querySelector('.mario'); let isJumping = false; let position = 50; document.addEventListener('keydown', (event) => { if (event.code === 'Space' && !isJumping) { jump(); } }); function jump() { isJumping = true; let upInterval = setInterval(() => { if (position >= 150) { clearInterval(upInterval); let downInterval = setInterval(() => { if (position <= 50) { clearInterval(downInterval); isJumping = false; } else { position -= 5; mario.style.bottom = position + 'px'; } }, 20); } else { position += 5; mario.style.bottom = position + 'px'; } }, 20); }